@charset "utf-8";
/* ----------------------------------------
   Unified design system for campaign pages
   ---------------------------------------- */
:root {
	/* Primary Brand Colors */
	--color-primary: #004986;       /* Deep blue */
	--color-primary-dark: #033268;  /* Darker blue */
	--color-primary-light: #1D438A; /* Lighter blue */
	--color-primary-navy: #092846;  /* Dark navy blue */

	/* Secondary/Accent Colors - Orange Family */
	--color-secondary: #F1890E;     /* Main orange */
	--color-secondary-dark: #C16E0B;/* Dark orange */
	--color-secondary-alt: #DE7F0F; /* Alternative orange */
	--color-secondary-light: #F17F0E; /* Light orange */
	--color-secondary-bright: #E65A10; /* Vibrant orange */
	--color-secondary-darker: #BB6C0F;

	/* Tertiary Colors - Red/Pink Family */
	--color-tertiary: #FD3651;      /* Bright pink/red */
	--color-tertiary-alt: #F84F63;  /* Softer pink/red */
	--color-tertiary-dark: #F14444; /* Darker pink/red */
	--color-tertiary-magenta: #FF3BB3;/* Magenta */
	--color-tertiary-red: #E83936;  /* True red */
	--color-tertiary-pale: #E899A0; /* Pale pink */
	--color-tertiary-darker-red: #D91C0B; /* Dark red */

	/* Green Colors */
	--color-green: #0F6A33;         /* Main green */
	--color-green-dark: #0C5A2B;    /* Slightly darker green */
	--color-green-light: #1BC9A9;   /* Light green/teal */
	--color-green-success: #28a745; /* Success green */

	/* Social/Utility Colors */
	--color-twitter: #00ACEE;       /* Twitter blue */
	--color-twitter-light: #0FACEE; /* Lighter Twitter blue */

	/* Neutral Colors */
	--color-charcoal: #333333;      /* Dark gray */
	--color-gray-dark: #555555;     /* Medium dark gray */
	--color-gray-medium: #666666;   /* Medium gray */
	--color-gray: #CCCCCC;          /* Medium gray */
	--color-gray-light: #E4E4E4;    /* Light gray */
	--color-gray-lighter: #F4F4F4;  /* Very light gray */
	--color-gray-lightest: #F5F5F5; /* Off-white gray */
	--color-gray-pale: #D9D9D9;     /* Pale gray */
	--color-gray-cool: #C7C7C7;     /* Cool gray */
	--color-gray-border: #DDDDDD;   /* Border gray */
	--color-gray-nav: #8494A3;      /* Navigation gray */
	--color-gray-breadcrumb: #828DA6; /* Breadcrumb gray */
	--color-white: #FFFFFF;         /* Pure white */ 

	/* Background Colors */
	--color-bg: #FFFFFF;            /* Default background */
	--color-bg-alt: #FFF3F1;        /* Pinkish white */
	--color-bg-warm: #FFF4E8;       /* Warm off-white */
	--color-bg-soft: #FFF5EA;       /* Soft warm white */
	--color-bg-cream: #FEF6EC;      /* Cream white */
	--color-bg-light: #F8F9FA;      /* Light background */
	--color-bg-section: #E9ECEF;    /* Section background */

	/* Accent Colors */
	--color-accent: #FF583C;        /* Coral accent */
	--color-accent-light: #FDD8AA;  /* Light peach accent */
	--color-accent-orange: #FF6B35; /* Orange accent variant */

	/* State Colors */
	--color-error: #FF0000;         /* Pure red for errors */
	--color-error-bg-light: #FFEBEE;      /* Light red background */
	--color-error-disabled: #DDDDDD;      /* Light gray for error backgrounds */
	--color-warning: #FFC107;       /* Warning yellow */
	--color-warning-bg: #FFF3CD;    /* Warning background */
	--color-info: #17A2B8;          /* Info blue */

	/* ARIGATO Campaign Colors */
	--color-arigato-pink: #FF0069;  /* ARIGATO Pink */
	--color-arigato-purple: #D300C5; /* ARIGATO Purple */
	--color-arigato-blue: #008FDC;  /* ARIGATO Blue */
	--color-arigato-blue-dark: #0065B8; /* ARIGATO Dark Blue */
	--color-arigato-green: #1DC9A9; /* ARIGATO Green */
	--color-arigato-green-dark: #03A98E; /* ARIGATO Dark Green */
	/* Halloween Campaign Event Section - Following Figma Design */
	/* Halloween Campaign Variables */
	--halloween-main-color: #333;
	--halloween-main-color-design: #3C1D6B;
	--halloween-orange: #F1890E;
	--halloween-orange-dark: #C16E0B;
	--halloween-flow-bg: #FFF5E9;
	--halloween-flow-border: #FFC581;
	--halloween-gold: #FCC82A;
	--halloween-gold-border: #FFAC2F;
	--halloween-silver: #B4C1CD;
	--halloween-silver-border: #A6B1BB;
	--halloween-bronze: #CD8152;
	--halloween-bronze-border: #B1602E;
	--halloween-gray-bg: #F5F5F5;
	--halloween-row-alt: #FBFBFB;
	--halloween-btn: #DA2F74;


	/* NJ-81650 */
	--color-submission-primary: #21B1D1;  /* submission Pink */
	--color-submission-red: #E40000; /* submission Purple */
	--color-submission-dark-orange: #F55D55;  /* submission Dark Orange */
}
/* Japanese */
html:lang(ja) body {
	font-family: "Noto Sans JP", "Noto Sans", sans-serif;
}
/* Traditional Chinese (Taiwan) */
html:lang(zh-tw) body {
	font-family: "Noto Sans TC", "Noto Sans", sans-serif;
}

button {
	cursor: pointer;
	border: none;
}

ul, ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Main Content */
.main-content {
	width: 100%;
	margin: 0 0 0;
	padding: 0;
	background-color: var(--color-gray-lightest);
	clear: both;
	overflow: hidden;
}

/* Container styles */
.container {
	max-width: 96rem;
	margin: 2rem auto;
	padding: 0;
	background-color: var(--color-white);
	border: none;
	border-radius: 0.5rem;
	box-shadow: none;
	overflow: hidden;
}

/* Main banner */
.main-banner {
	width: 100%;
	height: 26rem;
	border-radius: 0.5rem 0.5rem 0 0;
}

.main-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Campaign info section */
.campaign-info {
	padding: 4rem 0 6rem;
}


.button_copy{
	color: #fff;
	background: #f1890e;
	font-size: 2rem;
	font-weight: bold;
	width: 32rem;
	height: 3em;
	line-height: 3em;
	border-radius: 0.8rem;
	box-sizing: border-box;
	box-shadow: 0 6px 0 0 #c16e0b;
	border: none;
	text-align: center;
}

.hashtag-box {
	width: 54.4rem;
	border: 0.1rem solid var(--color-gray);
	border-radius: 2rem;
	padding: 3rem 0;
	margin: 2.5rem auto 0;
}

.hashtag-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	width: 32rem;
    margin: 0 auto 3rem;
}

.hashtag {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-charcoal);
}

.campaign-title {
	margin: 0 auto;
	padding-bottom: 4rem;
}

.campaign-title h2 {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--color-primary-light);
	text-align: center;
	line-height: 1.45;
}

.campaign-ribbon {
	position: relative;
	width: 38rem;
	height: 6.3rem;
	margin: 0 auto 2rem;
}

.ribbon-bg {
	position: absolute;
	width: 32rem;
	height: 4.8rem;
	background-color: var(--color-secondary);
	top: 0;
	left: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
}

.ribbon-text {
	color: var(--color-white);
	font-size: 1.8rem;
	font-weight: 700;
}

.ribbon-left, .ribbon-right {
	position: absolute;
	width: 3rem;
	height: 0;
	background-color: var(--color-secondary-alt);
	top: 3.3rem;
	border: 1.5rem solid transparent;
}

.ribbon-left {
	left: 0;
	border-left-color: var(--color-white);
}

.ribbon-right {
	right: 0;
	border-right-color: var(--color-white);
}

.ribbon-triangle-left, .ribbon-triangle-right {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	top: 4.8rem;
}

.ribbon-triangle-left {
	left: 3rem;
	border-width: 1.5rem 0 0 3rem;
	border-color: var(--color-secondary-darker) transparent transparent transparent;
}

.ribbon-triangle-right {
	right: 3rem;
	border-width: 1.5rem 3rem 0 0;
	border-color: var(--color-secondary-darker) transparent transparent transparent;
}

.campaign-date {
	text-align: center;
	font-size: 2rem;
	font-weight: 700;
}

/* Campaign details section */
.campaign-details {
	width: 100%;
	padding: 0 0 6rem;
	display: flex;
	flex-direction: column;
	align-items: normal;
	gap: 4rem;
}

.section-title {
	width: 100%;
	height: 6.4rem;
	background-color: var(--color-primary);
	display: flex;
	justify-content: center;
	align-items: center;
}

.section-title h2 {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-white);
}

.page-links {
	display: flex;
	flex-direction: column;
	align-items: normal;
	gap: 2rem;
	padding: 0 8rem;
}

.link-item {
	display: flex;
	align-items: center;
	gap: 4rem;
	padding: 1.2rem 1.6rem 1.2rem 2rem;
	border: 0.2rem solid var(--color-charcoal);
	box-shadow: 0rem 0.3rem 0.6rem rgba(0, 0, 0, 0.16);
	cursor: pointer;
}

.link-text {
	flex: 1;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-charcoal);
}

.link-icon {
	width: 2.3rem;
	height: 2.3rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23333333' d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Event 1 section */
.event {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: normal;
	gap: 4rem;
	padding: 0 0 6rem;
}

.event > *:not(.section-title){
	padding: 0 8rem;
}

.event-text {
	padding: 4rem 6.2rem 0;
	font-size: 1.8rem;
	line-height: normal;
	font-weight: 400;
	color: var(--color-charcoal);
}

.method {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.method-title {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.method-title-bg {
	width: 0.6rem;
	height: 3.5rem;
	background-color: var(--color-primary);
}

.method-title-text {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-primary);
}

.steps {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4rem;
}

.step {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.step-number {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.8rem 2rem;
	background-color: var(--color-primary);
	border-radius: 5rem;
	width: fit-content;
	max-width: 11.5rem;
	height: 4.5rem;
}

.step-number-text {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-white);
}

.step-text {
	font-size: 2.2rem;
	color:var(--color-charcoal);
	font-weight: 700;
	line-height: normal;
}

.step-image {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
}

.step-note {
	display: flex;
	gap: 0.4rem;
}

.step-note-mark {
	font-size: 1.6rem;
	color: var(--color-tertiary);
}

.step-note-text {
	font-size: 1.6rem;
	color: var(--color-tertiary-darker-red);
	flex: 1;
	line-height: 1.5;
}

.arrow {
	width: 0;
	height: 0;
	border: 8rem solid transparent;
	border-bottom: 0;
	border-top: 4rem solid var(--color-gray-pale);
	margin: 0 auto;
}

/* Stamp area */
.stamp-area {
	width: 100%;
	box-sizing: border-box;
}

.stamp-inner {
	background-color: var(--color-bg-alt);
	padding: 0 0 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.4rem;
	border: 0.4rem solid var(--color-primary);
	border-radius: 2rem;
	overflow: hidden;
}

.stamp-banner {
	width: 100%;
	height: 21.7rem;
}

.stamp-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stamp-count {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20.8rem;
}

.stamp-number {
	font-size: 3.6rem;
	font-weight: 700;
	color: var(--color-primary-light);
	text-align: right;
}

.stamp-text {
	font-size: 1.6rem;
	font-weight: 700;
	margin-left: 0.4rem;
	margin-bottom: 0.8rem;
	align-self: flex-end;
}

/* Calendar table */
.calendar {
	width: 100%;
}

.calendar-header {
	display: flex;
}

.calendar-header-cell {
	width: 10.4rem;
	padding: 0.8rem 1rem;
	text-align: center;
	border: 0.1rem solid var(--color-gray-light);
	font-size: 1.4rem;
}

.calendar-header-cell.sat {
	color: var(--color-accent);
}

.calendar-header-cell.sun {
	color: var(--color-accent);
}

.calendar-header-cell:first-child {
	border-radius: 1rem 0 0 0;
}

.calendar-header-cell:last-child {
	border-radius: 0 1rem 0 0;
}

.calendar-row {
	display: flex;
}

.calendar-cell {
	width: 10.4rem;
	padding: 1rem;
	border: 0.1rem solid var(--color-gray-light);
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	align-items: center;
}

.calendar-cell:first-child {
	border-radius: 0 0 0 1rem;
}

.calendar-cell:last-child {
	border-radius: 0 0 1rem 0;
}

.calendar-date {
	font-size: 1.4rem;
	font-weight: 700;
	text-align: center;
}

.stamp-placeholder {
	width: 100%;
	height: 4.6rem;
}

/* Tag Guide Styles */
.tag-guide {
	background-color: var(--color-white);
	border-radius: 2.2rem;
	overflow: hidden;
	border: 0.1rem solid var(--color-gray);
}

.tag-guide-header {
	background-color: var(--color-arigato-pink);
	padding: 1rem 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 4.9rem;
    box-sizing: border-box;
}

.tag-guide-header h4 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-white);
}

.tag-guide-icon {
	position: absolute;
	right: 1.8rem;
	width: 2.3rem;
	height: 1.3rem;
	background-image: url(/images/common/chevron-down-solid-white.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

.tag-guide-content {
	padding: 3rem 2rem;
	background-color: var(--color-gray-lightest);
	transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
	opacity: 1;
	overflow: hidden;
}

.tag-guide-content.hidden {
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.tag-guide-header {
	cursor: pointer;
}

.tag-guide-icon {
	transition: transform 0.3s ease;
}

.tag-guide-icon.rotated {
	transform: rotate(180deg);
}

.tag-guide-item {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-bottom: 4rem;
}

.tag-guide-item:last-child {
	margin-bottom: 0;
}

.tag-guide-text {
	display: flex;
	gap: 0.5rem;
}

.tag-guide-number {
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--color-gray-dark);
}

.tag-guide-text span {
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--color-gray-dark);
	line-height: normal;
}

.tag-guide-image {
	text-align: center;
}

.tag-guide-image img {
	border-radius: 1.2rem;
	overflow: hidden;
}

/* Notice section */
.notice {
	width: auto;
}

.notice-inner {
	background-color: var(--color-gray-lightest);
	padding: 2rem;
}

.notice-title {
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: 0.8rem;
}

.notice-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.notice-item {
	line-height: normal;
	padding-left: 1em;
	text-indent: -1em;
	font-size: 1.5rem;
	color: var(--color-gray-dark);
}

.notice-item.red {
	color: var(--color-tertiary);
}

.notice-text a.link-text {
	color: var(--color-twitter);
	font-size: inherit;
	font-weight: inherit;
}

/* Back Link - Based on Figma layout_0N2V3M */
.back-link {
	color: var(--color-twitter);
	margin-top: 5rem;
	text-align: left;
	text-decoration: underline;
}

/* Event 2 section */
.option-list {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.option-item {
	display: flex;
	gap: 0.4rem;
}

.option-mark {
	font-size: 1.6rem;
	color: var(--color-tertiary);
}

.option-text {
	font-size: 1.6rem;
	color: var(--color-tertiary);
	flex: 1;
}

.native-option {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.option-content {
	position: relative;
	top: 2.6rem;
	width: 64rem;
	background-color: var(--color-bg-warm);
	padding: 4.6rem 3rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

.option-title {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-secondary-light);
	text-align: center;
}

.callan-info {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.callan-icon {
	width: 4rem;
	height: 4rem;
}

.callan-text {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.option-image {
	width: 51.9rem;
	height: 17.3rem;
}

.option-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.8rem 3rem;
	border: 0.1rem solid var(--color-secondary);
	border-radius: 2rem;
	background-color: var(--color-white);
}

.option-more-text {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-secondary);
}

.option-label {
	position: absolute;
	padding: 1rem 4rem;
	background-color: var(--color-secondary-light);
	color: var(--color-white);
	font-size: 2.2rem;
	font-weight: 700;
	border-radius: 1rem;
	box-shadow: 0rem 0rem 1.5rem rgba(241, 125, 15, 0.16);
	z-index: 1;
}

.participation-conditions {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.condition-title {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.condition-title-bg {
	width: 0.6rem;
	height: 3.5rem;
	background-color: var(--color-accent);
}

.condition-title-text {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-accent);
}

.condition-text {
	font-size: 2.2rem;
	font-weight: 700;
}

.condition-options {
	display: flex;
	flex-direction: column;
	align-items: normal;
	gap: 4rem;
}

.condition-option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
}

.option-header {
	display: flex;
	align-items: center;
}

.option-number {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4rem;
	height: 4rem;
	background-color: var(--color-accent);
	border-radius: 50%;
	flex: 1 0 4rem;
}

.option-number-text {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-white);
}

.option-header-text {
	margin-left: 0.8rem;
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--color-accent);
}

.participate-button {
	width: 42rem;
	height: 7.5rem;
	background-color: var(--color-gray-lighter);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 1rem;
	margin: 0 auto;
}

.participate-text {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-gray-cool);
}

.option-note {
	display: flex;
	gap: 0.4rem;
	width: 75.2rem;
}

.option-note-mark {
	font-size: 1.6rem;
	color: var(--color-white);
}

.option-note-text {
	font-size: 1.6rem;
	color: var(--color-white);
	flex: 1;
}

.apply-button {
	width: 42rem;
	height: 7.5rem;
	background-color: var(--color-secondary);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 1rem;
	box-shadow: 0rem 0.6rem 0rem var(--color-secondary-dark);
	cursor: pointer;
	margin: 0 auto;
}

.apply-text {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-white);
}

/* Event 3 section */
.hashtag-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;
	padding: 3rem 11.2rem;
	border: 0.1rem solid var(--color-gray);
	border-radius: 2rem;
	margin: 0 auto;
}

.hashtag {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-gray-dark);
	width: 33.6rem;
}

.copy-button {
	width: 32rem;
	height: 6.6rem;
	position: relative;
	border: none;
}

.copy-button-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 32rem;
	height: 6.6rem;
	background-color: var(--color-secondary-dark);
	border-radius: 0.8rem;
}

.copy-button-front {
	position: absolute;
	top: 0;
	left: 0;
	width: 32rem;
	height: 6rem;
	background-color: var(--color-secondary);
	border-radius: 0.8rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.copy-text {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-white);
}

.login-note {
	font-size: 1.8rem;
	color: var(--color-error);
	text-align: center;
}

.present-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 60rem;
	gap: 2rem;
	padding: 0 0 1rem;
	border: 0.2rem solid var(--color-accent);
	border-radius: 2rem;
	margin: 0 auto;
}

.present-header {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem 2rem;
	background-color: var(--color-accent);
	border-radius: 2rem 2rem 0 0;
}

.present-title {
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--color-white);
	width: 56rem;
	text-align: center;
}

.present-content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 56rem;
}

.present-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 2rem;
	border-bottom: 0.1rem solid var(--color-gray-border);
}

.present-row:last-child {
	border-bottom: none;
}

.present-week {
	font-size: 1.8rem;
	font-weight: 700;
	width: 17.3rem;
}

.present-date {
	font-size: 1.8rem;
	width: 36.7rem;
	text-align: center;
}

.date-note {
	width: 60rem;
	display: flex;
	justify-content: flex-end;
	gap: 0.4rem;
	font-size: 1.5rem;
	margin: 0 auto;
}

.date-note-mark, .date-note-text{
	color: var(--color-white);
}


.btn-green:hover{
	background: #26B569;
}

.btn-green{
	background: #1DC9A9;
	box-shadow: 0 0.6rem 0 #03A98E;
}

.btn-style{
	border-radius: 1rem;
	width: 48rem;
	height: 7.5rem;
	flex-shrink: 0;
	font-size: 2.4rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: #FFF;
	justify-content: center;
	display: flex;
	align-items: center;
}
/* recommended teacher */
/* Main content container */
		#recommended_teacher_campaignPage .main-content {
			max-width: 96rem;
			margin: 2rem auto;
			background-color: var(--color-white);
			border-radius: 0.5rem;
			overflow: hidden;
		}

		/* Banner section */
		#recommended_teacher_campaignPage .main-banner {
			width: 100%;
			height: 26rem;
			background-color: var(--color-gray-light);
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--color-gray-medium);
			font-size: 1.6rem;
		}

		/* Campaign info section */
		#recommended_teacher_campaignPage .campaign-info {
			padding: 5rem 0;
			text-align: left;
		}

		#recommended_teacher_campaignPage .campaign-title {
			max-width: 80rem;
			margin: 0 auto;
			padding-bottom: 0rem;
		}

		#recommended_teacher_campaignPage .campaign-title h1 {
			font-size: 1.8rem;
			font-weight: 400;
			color: var(--color-gray-dark);
			line-height: 1.33;
			margin: 0;
		}

		/* Event sections */
		#recommended_teacher_campaignPage .event-section {
			margin-bottom: 5rem;
		}

		#recommended_teacher_campaignPage .section-title {
			background-color: var(--color-primary);
			height: 6.4rem;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#recommended_teacher_campaignPage .section-title h2 {
			font-size: 2.4rem;
			font-weight: 700;
			color: var(--color-white);
			margin: 0;
		}

		#recommended_teacher_campaignPage .section-content {
			padding: 0 8rem;
			margin: 5rem auto 0
		}

		#recommended_teacher_campaignPage .event-text {
			font-size: 1.8rem;
			line-height: 1.33;
			color: var(--color-charcoal);
			margin: 3rem 0;
		}

		#recommended_teacher_campaignPage .event-text span,
		#recommended_teacher_campaignPage .step-text span{
			color:#F14444;
			font-weight: 700;
		}

		#recommended_teacher_campaignPage .event-text.bold {
			font-weight: 700;
		}

		#recommended_teacher_campaignPage .bullet-list {
			text-align: left;
			margin: 2rem 0;
		}

		#recommended_teacher_campaignPage .bullet-item {
			font-size: 1.8rem;
			color: var(--color-charcoal);
			margin: 1rem 0;
		}

		/* Campaign schedule box */
		#recommended_teacher_campaignPage .schedule-box {
			margin: 5rem 0 3rem;
		}

		#recommended_teacher_campaignPage .schedule-header {
			background-color: var(--color-tertiary-alt);
			padding: 1.9rem 25.1rem;
			border-radius: 1rem 1rem 0 0;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
		}

		#recommended_teacher_campaignPage .schedule-icon {
			width: 2.4rem;
			height: 2.4rem;
			background-color: var(--color-white);
			border-radius: 0.3rem;
		}

		#recommended_teacher_campaignPage .schedule-header-text {
			font-size: 2.2rem;
			font-weight: 400;
			color: var(--color-white);
		}

		#recommended_teacher_campaignPage .schedule-content {
			background-color: var(--color-white);
			border: 0.1rem solid var(--color-tertiary-alt);
			border-top: none;
			padding: 3.5rem 6.8rem;
			border-radius: 0 0 1rem 1rem;
			text-align: center;
		}

		#recommended_teacher_campaignPage .schedule-text {
			font-size: 2.2rem;
			font-weight: 700;
			color: #555;
			margin: 0;
		}

		/* Steps section */
		#recommended_teacher_campaignPage .steps-container {
			margin: 5rem 0 3rem;
		}

		#recommended_teacher_campaignPage .step {
			margin: 4rem 0;
			text-align: left;
		}

		#recommended_teacher_campaignPage .step-header {
			display: flex;
			align-items: center;
			gap: 1.5rem;
		}

		#recommended_teacher_campaignPage .step-number {
			background-color: var(--color-primary);
			color: var(--color-white);
			padding: unset;
			border-radius: 17rem;
			font-size: 2.4rem;
			font-weight: 700;
			min-width: fit-content;
			height: 5.1rem;
			display: block;
			align-items: center;
			width: 11.5rem;
			text-align: center;
			align-content: center;
		}

		#recommended_teacher_campaignPage .step-content {
			flex: 1;
		}

		#recommended_teacher_campaignPage .step-text {
			font-size: 1.8rem;
			color: var(--color-charcoal);
			line-height: 1.33;
			margin: 0;
			font-weight: 400;
		}

		#recommended_teacher_campaignPage .step-note {
			font-size: 1.6rem;
			color: var(--color-charcoal);
			margin-top: 1rem;
		}

		#recommended_teacher_campaignPage .step-image-placeholder {
			width: 70rem;
			height: 41.4rem;
			background-color: var(--color-gray-light);
			border: 0.1rem solid var(--color-gray-border);
			border-radius: 1.2rem;
			margin: 2rem auto;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--color-gray-medium);
			font-size: 1.6rem;
			overflow: hidden;
		}

		/* Notice section */
		#recommended_teacher_campaignPage .notice-section {
			background-color: var(--color-white);
			padding: 3rem 0 0;
		}

		#recommended_teacher_campaignPage .notice-content {
			text-align: left;
		}

		#recommended_teacher_campaignPage .notice-title {
			font-size: 1.8rem;
			font-weight: 700;
			color: var(--color-charcoal);
			margin-bottom: 1rem;
		}

		#recommended_teacher_campaignPage .notice-list {
			list-style: none;
			padding: 0;
			margin: 0;
			margin-bottom: 0.4rem;
			gap:1rem;
		}

		#recommended_teacher_campaignPage .notice-item {
			font-size: 1.4rem;
			display: flex;
			gap: 0.4rem;
		}

		#recommended_teacher_campaignPage .notice-text {
			flex: 1;
		}

		#recommended_teacher_campaignPage .notice-link {
			display:block;
			margin-bottom: 1.4rem;
		}
		#recommended_teacher_campaignPage .notice-link a{
			text-decoration: underline;
			color: var(--color-twitter);
			font-size: 1.4rem;
		}

		/* Back link */
		#recommended_teacher_campaignPage .back-link {
			text-align: left;
			margin-top: 5rem;
		}

		#recommended_teacher_campaignPage .back-link a {
			color: var(--color-twitter);
			text-decoration: underline;
			font-size: 1.4rem;
		}
		#recommended_teacher_campaignPage .transButton{
			margin: auto;
			width: fit-content;
			padding: 3rem 0;
		}
		#recommended_teacher_campaignPage .redbtn{
			width: fit-content;
			margin: 3rem auto 3.8rem;
			padding:1.9rem 6.6rem;
			background:#F05444;
			box-shadow: 0 1rem 0rem #AD4237;
			color: #FFFFFF;
			font-size: 2.4rem;
			border-radius: 1rem;
			font-weight: 700;
			cursor: pointer;
		}
		#recommended_teacher_campaignPage .c-orange span{
			color:#F1890E;
		}
/* NJ-72081 */
/* Custom CSS overrides for #EF9B00 primary color */
.family_english .notice_box.t_center.m_b_30{
	margin: 0 8rem;
}
.family_english .campaign-title h2,
.family_english .method-title-text{
	color:#EF9B00;
}
.family_english .method-title-text{
	position: relative;
	padding-left: 1.2rem;
}
.family_english .method-title-text:before {
	content: "";
	position: absolute;
	width: .6rem;
	height: 3.5rem;
	background: #EF9B00;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.family_english .section-title {
	background-color: #EF9B00;
}
.family_english .step-number{
	width: 11.5rem;
	height: 5.1rem;
	padding: 0;
}
.family_english .step-number,.method-title-bg,
.family_english .campaign-ribbon .ribbon-bg  {
	background-color: #F1890E;
}
.family_english .ribbon-left,.family_english .ribbon-right {
	width: 3rem;
}
.family_english .campaign-ribbon .ribbon-left,
.family_english .campaign-ribbon .ribbon-right {
	background-color: #DE7F0F;
}

.family_english .campaign-ribbon .ribbon-triangle-left,
.family_english .campaign-ribbon .ribbon-triangle-right {
	border-color: #BB6C0F transparent transparent transparent;
}

/* Button group styling */
.family_english .btn-group {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 2rem;
}

.family_english .apply-button {
	color: white;
	border: none;
	width: 26rem;
	height: 8.1rem;
	border-radius: 1rem;
	font-size: 2.4rem;
	font-weight: 700;
	cursor: pointer;
	position: relative;
	font-family: 'Noto Sans JP', sans-serif;
}

/* First button - Green */
.family_english .apply-button:nth-child(1) {
	background-color: #2CC575;
	box-shadow: 0 0.6rem 0 #009D50;
}

.family_english .apply-button:nth-child(1):hover {
	background-color: #26B569;
}

/* Second button - Blue */
.family_english .apply-button:nth-child(2) {
	background-color: #008FDC;
	box-shadow: 0 0.6rem 0 #0065B8;
}

.family_english .apply-button:nth-child(2):hover {
	background-color: #0080C7;
}

/* Third button - Red */
.family_english .apply-button:nth-child(3) {
	background-color: #FF5961;
	box-shadow: 0 0.6rem 0 #D22E2E;
}

.family_english .apply-button:nth-child(3):hover {
	background-color: #FF4A53;
}

/* Present box styling */
.family_english .present-box {
	max-width: 60rem;
	margin: 0 auto;
	border: 0.2rem solid #EF9B00;
	border-radius: 2rem;
	overflow: hidden;
}

.family_english .present-header {
	background-color: #EF9B00;
	padding: 1rem 6rem;
	text-align: center;
}

.family_english .present-title {
	color: white;
	font-size: 2.2rem;
	font-weight: 700;
	margin: 0;
}

.family_english .present-content {
	padding: 2rem;
}

.family_english .present-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0;
	border-bottom: 0.1rem solid #DDDDDD;
}

.family_english .present-row:last-child {
	border-bottom: none;
}

.family_english .present-week {
	text-align: center;
	font-size: 1.8rem;
	font-weight: 700;
	width: 17.3rem;
}

.family_english .present-date {
	font-size: 1.8rem;
	text-align: center;
	width: 36.7rem;
}

.family_english .date-note {
	display: flex;
	justify-content: flex-end;
	gap: 0.4rem;
	font-size: 1.5rem;
	margin: -1rem auto 0;
	max-width: 60rem;
}

.family_english .date-note-mark,
.family_english .date-note-text {
	color: #555555;
}

/* Additional styling for better visual hierarchy */
.family_english .event-text h4 {
	font-size: 2.4rem;
	font-weight: 700;
	color: #333333;
	margin: 2rem 0 1rem 0;
}

/* Ensure proper spacing for step images */
.family_english .step-image {
	max-width:60rem;
	margin: 0 auto;
	text-align: center;
}
.family_english .step-image.bordered,
.family_english .step-image img.bordered{
	border-radius: 12px;
	border: 1px solid #DDD;
}

.family_english .step-image p {
	margin-top: 1rem;
	font-size: 1.8rem;
	color: #333333;
}

/* Participate button styling */

.family_english .participate-text {
	text-align: center;
	background-color: transparent;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	color: #FF0000;
}

/* Stamp area styling */
.family_english .stamp-area.blue-border{
	border: 0.3rem solid #B1E8FA;
}
.family_english .stamp-area {
	background-color: #FFFFFF;
	border: 0.3rem solid #FACFDA;
	padding: 0;
	margin: 0 auto;
	max-width: 80rem;
}

.family_english .stamp-inner {
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.4rem;
	border: 0;
	border-radius: 0;
}

.family_english .stamp-banner {
	width: 100%;
}

.family_english .stamp-banner img {
	width: 100%;
	height: auto;
	display: block;
}

.family_english .stamp-count {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18rem;
}

.family_english .stamp-number {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-size: 3.6rem;
	line-height: 1.4479999542236328em;
	text-align: right;
	color: #FF0000;
	align-items: center;
}

.family_english .stamp-text {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	gap: .4rem;
	font-size: 1.6rem;
	line-height: 1.625em;
	color: #555555;
}

/* Calendar styling */
.family_english .calendar {
	width: 72.2rem;
	height: 28.8rem;
	background-color: #FFFFFF;
	position: relative;
}

.family_english .calendar-header {
	display: flex;
	width: 72.2rem;
	height: 3.6rem;
	position: absolute;
	top: 0;
	left: 0;
}

.family_english .calendar-header-cell {
	width: 10.4rem;
	height: 3.6rem;
	border: 0.1rem solid #E4E4E4;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 2.142857142857143em;
	color: #555555;
	box-sizing: border-box;
	padding: 0.3rem 3.5rem;
}

.family_english .calendar-header-cell:nth-child(1) { left: 0; border-radius: 0;}
.family_english .calendar-header-cell:nth-child(2) { left: 10.3rem; }
.family_english .calendar-header-cell:nth-child(3) { left: 20.6rem; }
.family_english .calendar-header-cell:nth-child(4) { left: 30.9rem; }
.family_english .calendar-header-cell:nth-child(5) { left: 41.2rem; }
.family_english .calendar-header-cell:nth-child(6) { left: 51.5rem; }
.family_english .calendar-header-cell:nth-child(7) { left: 61.8rem; border-radius: 0;; }

.family_english .calendar-row {
	position: absolute;
	width: 72.2rem;
	height: 8.6rem;
}

.family_english .calendar-row:nth-child(2) { top: 3.4rem; }
.family_english .calendar-row:nth-child(3) { top: 11.9rem; }
.family_english .calendar-row:nth-child(4) { top: 20.3rem; }

.family_english .calendar-cell {
	position: absolute;
	width: 10.4rem;
	height: 8.6rem;
	border: 0.1rem solid #E4E4E4;
	background-color: #FFFFFF;
	box-sizing: border-box;
}

/* Position calendar cells in each row */
.family_english .calendar-cell:nth-child(1) { left: 0; border-radius: 0;}
.family_english .calendar-cell:nth-child(2) { left: 10.3rem; }
.family_english .calendar-cell:nth-child(3) { left: 20.6rem; }
.family_english .calendar-cell:nth-child(4) { left: 30.9rem; }
.family_english .calendar-cell:nth-child(5) { left: 41.2rem; }
.family_english .calendar-cell:nth-child(6) { left: 51.5rem; }
.family_english .calendar-cell:nth-child(7) { left: 61.8rem; border-radius: 0;}

.family_english .calendar-date {
	position: absolute;
	top: 0;
	left: 1rem;
	width: 8.4rem;
	height: 3rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 2.142857142857143em;
	text-align: center;
	color: #555555;
	display: flex;
	align-items: center;
	justify-content: center;
}

.family_english .stamp-placeholder {
	position: absolute;
	top: 3rem;
	left: 2.4rem;
	width: 5.6rem;
	height: 4.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.family_english .stamp-placeholder img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Apply button for family plan */
.family_english a.apply-button {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #EF9B00;
	color: white;
	text-decoration: none;
	border-radius: 1rem;
	font-size: 1.8rem;
	font-weight: 700;
	margin: 2rem 0;
	box-shadow: 0 0.6rem 0 #C16E0B;
	transition: background-color 0.3s ease;
}

.family_english .apply-button:hover {
	background-color: #DE7F0F;
}

.family_english .apply-text {
	color: white;
}
.family_english .step-text.reload{
	font-size: 2.2rem;
	margin-top: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
}
.family_english .reload-icon {
  display: block;
  width: 3rem;
  height: 3rem;
  object-fit: cover;
}
.family_english .campaign-detail-text{
	font-size: 2.2rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}
.family_english .register-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

.family_english .btn-orange{
	background: #F1890E;
	box-shadow: 0 0.6rem 0 #C16E0B;
}
.family_english .btn-orange:hover{
	background: #EF9B00;
}

.page_inner .btn-green:hover{
	background: #26B569;
}

.page_inner .btn-green{
	background: #1DC9A9;
	box-shadow: 0 0.6rem 0 #03A98E;
}

.page_inner .btn-style{
	border-radius: 1rem;
	width: 48rem;
	height: 7.5rem;
	flex-shrink: 0;
	font-size: 2.4rem;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	color: #FFF;
	justify-content: center;
	display: flex;
	align-items: center;
}

.family_english .event-text-title{
	font-size: 2.4rem;
	font-style: normal;
	font-weight: 700;

}
.family_english a.apply-button.disabled {
	background-color: #F4F4F4;
	box-shadow: 0 0.6rem 0 #DDDDDD;
	color: #cccc;
	pointer-events: none;
}
/* ARIGATO Campaign Styles */
.arigato_campaign .campaign-title h2 {
	color: var(--color-arigato-pink);
}

.arigato_campaign .section-title {
	background: linear-gradient(90deg, var(--color-arigato-pink) 0%, var(--color-arigato-purple) 100%);
}

.arigato_campaign .sub-title {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.arigato_campaign .sub-title-bar {
	width: 0.6rem;
	height: 3.5rem;
	background-color: var(--color-arigato-pink);
}

.arigato_campaign .method-title-text {
	color: var(--color-arigato-pink);
	font-size: 2.4rem;
	font-weight: 700;
}

.arigato_campaign .step-number {
	background-color: var(--color-arigato-pink);
	width: 11.5rem;
	height: 5.1rem;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.arigato_campaign .step .notice-red {
	font-weight: 400;
}

.arigato_campaign .notice-red {
	color: var(--color-error);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.5;
}

.arigato_campaign .btn-area {
	margin-top: 2.4rem;
	display: flex;
	justify-content: center;
}

.arigato_campaign .btn-style {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48rem;
	height: 7.5rem;
	border-radius: 1rem;
	font-size: 2.4rem;
	font-weight: 700;
	text-decoration: none;
}

.arigato_campaign .btn-blue {
	background-color: var(--color-arigato-blue);
	box-shadow: 0 0.6rem 0 var(--color-arigato-blue-dark);
	color: var(--color-white);
}

.arigato_campaign .btn-blue.disabled {
	background: #F4F4F4 !important;
	color: #CCCCCC;
	box-shadow: none;
	pointer-events: none;
}
.arigato_campaign .btn-blue.disabled:hover {
	background: none !important;
}
.arigato_campaign .btn-blue:hover {
	background: #0080C7;
}

.arigato_campaign .btn-green {
	background-color: var(--color-arigato-green);
	box-shadow: 0 0.6rem 0 var(--color-arigato-green-dark);
	color: var(--color-white);
}

.arigato_campaign .btn-green:hover {
	background-color: #26B569;
}

/* Message History Styles */
.arigato_campaign .message-history {
	width: 100%;
	margin: 2.5rem 0;
}

.arigato_campaign .message-history-inner {
	background-color: #FFF8E6;
	border-radius: 2rem;
	padding: 2.4rem;
}

.arigato_campaign .message-history-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2.6rem;
}

.arigato_campaign .message-icon {
	width: 3rem;
	height: 3rem;
	background-color: var(--color-arigato-pink);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z'/%3E%3C/svg%3E");
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

.arigato_campaign .message-history-title h4 {
	font-size: 2.2rem;
	font-weight: 700;
	color: #000000;
}

.arigato_campaign .message-scroll {
	max-height: 40rem;
	overflow-y: auto;
	display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.arigato_campaign .message-scroll::-webkit-scrollbar {
  display: none;
}


.arigato_campaign .message-item {
	background-color: var(--color-white);
	border-radius: 1.2rem;
	padding: 1.6rem;
	box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.05);
	position: relative;
	width: 36.8rem;
	min-height: 14.6rem;
    box-sizing: border-box;
}

.arigato_campaign .message-teacher {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.8rem;
	margin-right: 6.5rem;
}

.arigato_campaign .teacher-avatar img {
	width: 4rem;
	min-width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background-color: #ccc;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23FFFFFF' d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z'/%3E%3C/svg%3E");
	background-size: 60%;
	background-position: center;
	background-repeat: no-repeat;
}

.arigato_campaign .teacher-name {
	font-size: 1.8rem;
	font-weight: 700;
	color: #000000;
}

.arigato_campaign .message-content {
	font-size: 1.4rem;
	line-height: 1.6;
	color: #000000;
}

.arigato_campaign .message-date {
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	font-size: 1.2rem;
	color: #888888;
}

/* Tag Guide Styles */
.arigato_campaign .tag-guide {
	background-color: var(--color-white);
	border-radius: 2.2rem;
	overflow: hidden;
	border: 0.1rem solid var(--color-gray);
}

.arigato_campaign .tag-guide-header {
	background-color: var(--color-arigato-pink);
	padding: 1rem 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 4.9rem;
    box-sizing: border-box;
}

.arigato_campaign .tag-guide-header h4 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-white);
}

.arigato_campaign .tag-guide-icon {
	position: absolute;
	right: 1.8rem;
	width: 2.3rem;
	height: 1.3rem;
	background-image: url(/images/common/chevron-down-solid-white.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

.arigato_campaign .tag-guide-content {
	padding: 3rem 2rem;
	background-color: var(--color-gray-lightest);
	transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
	opacity: 1;
	overflow: hidden;
}

.arigato_campaign .tag-guide-content.hidden {
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.arigato_campaign .tag-guide-header {
	cursor: pointer;
}

.arigato_campaign .tag-guide-icon {
	transition: transform 0.3s ease;
}

.arigato_campaign .tag-guide-icon.rotated {
	transform: rotate(180deg);
}

.arigato_campaign .tag-guide-item {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-bottom: 4rem;
}

.arigato_campaign .tag-guide-item:last-child {
	margin-bottom: 0;
}

.arigato_campaign .tag-guide-text {
	display: flex;
	gap: 0.5rem;
}

.arigato_campaign .tag-guide-number {
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--color-gray-dark);
}

.arigato_campaign .tag-guide-text span {
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--color-gray-dark);
	line-height: normal;
}

.arigato_campaign .tag-guide-image {
	text-align: center;
}

.arigato_campaign .tag-guide-image img {
	border-radius: 1.2rem;
	overflow: hidden;
}

.trial_area {
    margin-bottom: 6.6rem;
}

/* Hashtag Box Styles */
.arigato_campaign .hashtag-box {
	width: 54.4rem;
	border: 0.1rem solid var(--color-gray);
	border-radius: 2rem;
	padding: 3rem 0;
	margin: 2.5rem auto 0;
}

.arigato_campaign .hashtag-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	width: 32rem;
    margin: 0 auto 3rem;
}

.arigato_campaign .hashtag {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-charcoal);
}

.arigato_campaign .copy-button-container {
	display: flex;
	justify-content: center;
}

.arigato_campaign .copy-button {
	position: relative;
	width: 32rem;
	height: 6.6rem;
}

.arigato_campaign .copy-button-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-secondary-dark);
	border-radius: 0.8rem;
}

.arigato_campaign .copy-button-front {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 6rem;
	background-color: var(--color-secondary);
	border-radius: 0.8rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.arigato_campaign .copy-text {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-white);
}

.trial_area .balloon {
	color: #f1890e;
	font-size: 2.4rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.0rem;
}

.trial_area .balloon:before {
	content: "";
	display: inline-block;
    width: 4.9rem;
    height: 6rem;
	vertical-align: middle;
	background: url(/images/index/ver_3/balloon_l.png) no-repeat;
	background-size: contain;
}

.trial_area .balloon:after {
	content: "";
	display: inline-block;
    width: 4.9rem;
    height: 6rem;	
	vertical-align: middle;
	background: url(/images/index/ver_3/balloon_r.png) no-repeat;
	background-size: contain;
}

.trial_area .action .button_trial {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.4rem;
	text-align: center;
	font-weight: 700;
	color: #fff;
	background: #f1890e;
	width: 100%;
	max-width: 50rem;
	height: 7.5rem;
	line-height: 3em;
	border-radius: 3em;
	box-shadow: 0px 6px 0px 0px #c16e0b;
	box-sizing: border-box;
}

.trial_area .action {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* NJ-75273 */
.arigato_campaign .button_copy{
	color: #fff;
	background: #f1890e;
	font-size: 2rem;
	font-weight: bold;
	width: 32rem;
	height: 3em;
	line-height: 3em;
	border-radius: 0.8rem;
	box-sizing: border-box;
	box-shadow: 0 6px 0 0 #c16e0b;
	border: none;
	text-align: center;
}

/* NJ-77512 Halloween Campaign*/
/* Halloween Campaign */
.halloween_campaign .section-title {
	background-color: #3C1D6B;
}

.halloween_campaign .step-number {
	background-color: #3C1D6B;
}

.halloween_campaign .method-title-bg {
	background-color: #3C1D6B;
}

.halloween_campaign .method-title-text {
	color: #3C1D6B;
	position: relative;
	padding-left: 1.8rem;
}

.halloween_campaign .halloween-accent {
	color: #F1890E;
	font-weight: 700;
}
.halloween_campaign .campaign-title,
.halloween_campaign .campaign-title h2 {
	color: #3C1D6B;
	padding-bottom: 0;
}
.halloween_campaign .campaign-info{
	padding: 4rem 2rem 6rem;
}

.halloween_campaign .halloween-decoration {
	font-size: 3rem;
	text-align: center;
	margin: 2rem 0;
	color: #F1890E;
}
.halloween_campaign .method-title-text::before {
    content: "";
    position: absolute;
    width: .6rem;
    height: 3.5rem;
    background: #3C1D6B;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 1.5rem;
}

.halloween_campaign .m_t_30{
	margin-top: 3rem;
}

.halloween_campaign .step-notes {
	font-size: 1.6rem;
	color: #333333;
}

/* Contest Flow Section - Horizontal Layout */
.halloween_campaign .halloween-contest-flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.7rem;
	margin: 2rem 0 4rem;
}

.halloween_campaign .halloween-flow-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 22rem;
	height: 12.2rem;
	position: relative;
}

.halloween_campaign .halloween-flow-date {
	font-size: 1.6rem;
	font-weight: 700;
	color: #555555;
	text-align: center;
	margin-top: 1rem;
	line-height: 1.45;
}

.halloween_campaign .halloween-flow-stage {
	width: 22rem;
	height: 8.9rem;
	background-color: var(--halloween-flow-bg);
	border: 0.1rem solid var(--halloween-flow-border);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.halloween_campaign .halloween-flow-stage-text {
	font-size: 2rem;
	font-weight: 700;
	color: var(--halloween-orange);
	text-align: center;
	line-height: 1.45;
}

.halloween_campaign .halloween-flow-arrow {
	width: 1.6rem;
	height: 8.9rem;
	top: -1.7rem;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	background-color: transparent;
}

.halloween_campaign .halloween-flow-arrow::before {
	content: "";
	width: 1.6rem;
	position: absolute;
    height: 2.7rem;
	background-image: url('https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/user/webroot/images/campaign/halloween/arrow.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Department Categories Section */
.halloween_campaign .halloween-departments {
	display: flex;
	justify-content: center;
	gap: 3rem;
	margin: 2rem 0;
}

.halloween_campaign .halloween-dept-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 2rem 3rem 2rem 2rem;
	background-color: var(--color-white);
	border: 0.1rem solid var(--halloween-main-color-design);
	border-radius: 1.2rem;
	min-height: 6rem;
	box-sizing: border-box;
}

.halloween_campaign .halloween-dept-icon {
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-shrink: 0;
}

.halloween_campaign .halloween-dept-number {
	width: 3rem;
	height: 3rem;
	object-fit: contain;
}

.halloween_campaign .halloween-dept-text {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--halloween-main-color-design);
	line-height: 1.45;
}

/* Prize Table Section */
.halloween_campaign .halloween-prize-table {
	width: 80rem;
	border: 0.1rem solid var(--halloween-orange);
	border-radius: 1.2rem;
	overflow: hidden;
	margin: 2rem 0;
}

.halloween_campaign .halloween-prize-header {
	width: 100%;
	height: 5.3rem;
	background-color: var(--halloween-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.halloween_campaign .halloween-prize-header-content {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.halloween_campaign .halloween-prize-header-icon {
	width: 2.8rem;
	height: 2.5rem;
	background-image: url("https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/user/webroot/images/campaign/halloween/image_coin.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

.halloween_campaign .halloween-prize-header-text {
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--color-white);
	text-align: center;
	line-height: 1.45;
}

.halloween_campaign .halloween-prize-table-header {
	display: flex;
	height: 4.2rem;
	background-color: var(--color-white);
	border-bottom: 0.1rem solid var(--halloween-orange);
}

.halloween_campaign .halloween-prize-table-header-rank {
	width: 25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--halloween-orange);
}

.halloween_campaign .halloween-prize-table-header-prize {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--halloween-orange);
}

.halloween_campaign .halloween-prize-row {
	display: flex;
	align-items: center;
	min-height: 6.9rem;
}

.halloween_campaign .halloween-prize-row:nth-child(even) {
	background-color: var(--halloween-row-alt);
}

.halloween_campaign .halloween-prize-row:last-child {
	border-bottom: none;
}

.halloween_campaign .halloween-prize-rank {
	width: 25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
}

.halloween_campaign .halloween-rank-circle img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.halloween_campaign .halloween-rank-text {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-charcoal);
	text-align: center;
	line-height: 1.45;
}

.halloween_campaign .halloween-prize-text {
	flex: 1;
	padding: 1rem 2rem;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.45;
	display: flex;
	justify-content: center;
	align-items: center;
}

.halloween_campaign .halloween-prize-text-gold {
	color: #EA9B22;
}

.halloween_campaign .halloween-prize-text-silver {
	color: #777777;
}

.halloween_campaign .halloween-prize-text-bronze {
	color: #B1602E;
}

.halloween_campaign .halloween-prize-text-normal {
	color: var(--color-charcoal);
}

.halloween_campaign .halloween-participation-prize {
	width: 25rem;
	height: 12rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.halloween_campaign .halloween-participation-text {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-charcoal);
	text-align: center;
	line-height: 1.45;
}

.halloween_campaign .halloween-participation-details {
	flex: 1;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: center;
	justify-content: center;
}

.halloween_campaign .halloween-participation-item {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-charcoal);
	line-height: 1.45;
	text-align: center;
}

/* Notice Section */
.halloween_campaign .halloween-notice-box {
	background-color: var(--halloween-gray-bg);
	padding: 2rem;
	border-radius: 0.5rem;
}

.halloween_campaign .halloween-notice-title {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-charcoal);
	margin-bottom: 0.5rem;
	line-height: 1.19;
}

.halloween_campaign .halloween-notice-content {
	display: flex;
	gap: 0.2rem;
	align-items: flex-start;
}

.halloween_campaign .halloween-notice-mark {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--color-charcoal);
	line-height: 1.33;
	flex-shrink: 0;
}

.halloween_campaign .halloween-notice-text {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--color-charcoal);
	line-height: 1.33;
	flex: 1;
}

/* Halloween Participation Section Styles */
.halloween_campaign .halloween-button-container {
	display: flex;
	justify-content: center;
	padding: 2.5rem 0 0;
}

.halloween_campaign .halloween-dropdown {
	position: relative;
	display: inline-block;
}

.halloween_campaign .halloween-tag-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80rem;
	height: 5.6rem;
	background: #DA2F74;
	border: none;
	border-radius: 5rem;
	cursor: pointer;
	position: relative;
	box-shadow: 0 0.7rem 0 #AF245C;
}

.halloween_campaign .halloween-tag-button:hover {
	background: #C52A69;
}

.halloween_campaign .halloween-tag-button.active {
	border-radius: 2.2rem 2.2rem 0 0;
	box-shadow: none;
	height: 4.9rem;
}

.halloween_campaign .halloween-button-text {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-white);
	text-align: center;
	line-height: 1.45;
}

.halloween_campaign .halloween-button-icon {
	position: absolute;
	right: 2.3rem;
	width: 2.3rem;
	height: 1.3rem;
	background-image: url("https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/user/webroot/images/campaign/halloween/chevron-down-solid.svg");
	background-size: contain;
	background-repeat: no-repeat;
	transition: transform 0.3s ease;
}

.halloween_campaign .halloween-tag-button.active .halloween-button-icon {
	transform: rotate(180deg);
}

.halloween_campaign .halloween-dropdown-content {
	display: none;
	position: relative;
	width: 80rem;
	background-color: var(--color-gray-lightest);
	border-radius: 0 0 2.2rem 2.2rem;
	flex-direction: column;
	align-self: stretch;
}

.halloween_campaign .halloween-dropdown-content.show {
	display: flex;
}

.halloween_campaign .halloween-instruction-box {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 2rem;
	padding: 3rem 2rem;
}

.halloween_campaign .halloween-instruction-text {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.halloween_campaign .halloween-instruction-number {
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--color-gray-dark);
	line-height: 1.2;
	flex-shrink: 0;
}

.halloween_campaign .halloween-instruction-description {
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--color-gray-dark);
	line-height: 1.2;
	flex: 1;
}

.halloween_campaign .halloween-instruction-image {
	display: flex;
	justify-content: center;
	width: 76rem;
    margin: 0 auto;
}

.halloween_campaign .halloween-instruction-image img {
	border: 0.1rem solid var(--color-gray);
	border-radius: 1.2rem;
}

.halloween_campaign .halloween-hashtag-container {
	display: flex;
	justify-content: center;
	align-self: stretch;
	padding: 2.5rem 0 0;
}

.halloween_campaign .halloween-hashtag-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;
	padding: 3rem 11.2rem;
	background-color: var(--color-white);
	border: 0.1rem solid var(--color-gray-border);
	border-radius: 1.2rem;
}

.halloween_campaign .halloween-hashtag-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.halloween_campaign .halloween-hashtag-item {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-charcoal);
	text-align: left;
	line-height: 1.45;
	width: 32rem;
}

.halloween_campaign .halloween-copy-button-container {
	display: flex;
	justify-content: center;
	padding: 0 0 0.6rem;
}

.halloween_campaign .halloween-copy-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32rem;
	height: 6.5rem;
	background-color: var(--color-secondary);
	border: none;
	border-radius: 1rem;
	cursor: pointer;
	box-shadow: 0 0.6rem 0 var(--color-secondary-dark);
	position: relative;
}

.halloween_campaign .halloween-copy-button:hover {
	background-color: #E5930F;
}

.halloween_campaign .halloween-copy-text {
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--color-white);
	text-align: center;
	line-height: 1.19;
}

.halloween_campaign .halloween-apply-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2.5rem 0 0.6rem;
}

.halloween_campaign .halloween-apply-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 2.5rem;
}

.halloween_campaign .halloween-apply-text {
	font-size: 1.8rem;
	font-weight: 400;
	color: #D91C0B;
	text-align: center;
	line-height: 1.33;
}

.halloween_campaign .halloween-image-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2.5rem 0 0;
}

.halloween_campaign .halloween-image-container img {
	border-radius: 1.2rem;
}

.halloween_campaign .halloween-notice-section {
	display: flex;
	flex-direction: column;
	padding: 2rem 0 0;
}

.halloween_campaign .halloween-notice-container {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 2rem;
	background-color: var(--color-gray-lightest);
}

.halloween_campaign .halloween-notice-main {
	display: flex;
	gap: 1rem;
	padding: 0 0 0.5rem;
}

.halloween_campaign .halloween-notice-main-title {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-charcoal);
	line-height: 1.19;
}

.halloween_campaign .halloween-notice-category {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0 0 1rem;
}

.halloween_campaign .halloween-notice-category:last-child {
	padding-bottom: 0;
}

.halloween_campaign .halloween-notice-category-title {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-charcoal);
	line-height: 1.19;
}

.halloween_campaign .halloween-notice-item {
	display: flex;
	gap: 0.2rem;
	align-items: flex-start;
}

.halloween_campaign .halloween-notice-mark {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--color-charcoal);
	line-height: 1.33;
	flex-shrink: 0;
}

.halloween_campaign .halloween-notice-text {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--color-charcoal);
	line-height: 1.33;
	flex: 1;
}

/* Halloween Event 2 Styles */
.halloween_campaign .halloween-event2-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rem;
	padding: 0 8rem;
}

.halloween_campaign .halloween-campaign-period {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.halloween_campaign .halloween-period-ribbon {
	position: relative;
	width: 38rem;
	height: 6.3rem;
	margin-bottom: 2rem;
}

.halloween_campaign .halloween-period-center {
	position: absolute;
	width: 32rem;
	height: 4.8rem;
	background-color: var(--color-secondary);
	top: 0;
	left: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
}

.halloween_campaign .halloween-period-text {
	color: var(--color-white);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.22;
}

.halloween_campaign .halloween-period-sides {
	position: absolute;
	width: 6rem;
	height: 3rem;
	background-color: var(--color-secondary-alt);
	top: 3.3rem;
}

.halloween_campaign .halloween-period-sides:first-child {
	left: 0;
}

.halloween_campaign .halloween-period-sides:last-of-type {
	right: 0;
}

.halloween_campaign .halloween-period-triangle-left,
.halloween_campaign .halloween-period-triangle-right {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	top: 4.8rem;
}

.halloween_campaign .halloween-period-triangle-left {
	left: 3rem;
	border-width: 1.5rem 0 0 3rem;
	border-color: var(--color-secondary-darker) transparent transparent transparent;
}

.halloween_campaign .halloween-period-triangle-right {
	right: 3rem;
	border-width: 1.5rem 3rem 0 0;
	border-color: var(--color-secondary-darker) transparent transparent transparent;
}

.halloween_campaign .halloween-period-date {
	text-align: center;
}

.halloween_campaign .halloween-date-text {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-charcoal);
	line-height: 1.2;
}

.halloween_campaign .halloween-event2-description {
	text-align: left;
	width: 80rem;
}

.halloween_campaign .halloween-event2-description p {
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--color-charcoal);
	line-height: 1.44;
}

.halloween_campaign .halloween-materials-section {
	width: 60rem;
	position: relative;
}

.halloween_campaign .halloween-materials-container {
	border: 0.1rem solid var(--color-gray-border);
	border-radius: 1.2rem;
	position: relative;
	background-color: var(--color-white);
	padding: 5.3rem 7.6rem;
}

.halloween_campaign .halloween-materials-content {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4rem;
}

.halloween_campaign .halloween-textbook-item {
	display: flex;
	flex-direction: column;
	width: 20.4rem;
	background-color: var(--color-white);
	border-radius: 0.8rem;
	box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.08);
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
}

.halloween_campaign .halloween-textbook-item:hover {
	transform: translateY(-0.4rem);
	box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.15);
}

.halloween_campaign .halloween-textbook-image {
	width: 20.4rem;
	height: 12rem;
	overflow: hidden;
}

.halloween_campaign .halloween-textbook-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.halloween_campaign .halloween-textbook-title {
	padding: 1.8rem 1.5rem;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--color-gray-dark);
	line-height: 1.36;
	height: 1.8rem;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.halloween_campaign .halloween-textbook-levels {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	padding: 1.2rem 1.6rem 1.6rem;
}

.halloween_campaign .halloween-level-badge {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 0.2rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-white);
	box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.15);
	text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.25);
}

.halloween-level-1  { background-color: #9CCC65; } 
.halloween-level-2  { background-color: #C5DB5A; } 
.halloween-level-3  { background-color: #E2E658; }
.halloween-level-4  { background-color: #F8EE58; }
.halloween-level-5  { background-color: #FFE144; }
.halloween-level-6  { background-color: #FFCC29; }
.halloween-level-7  { background-color: #FFBA26; }
.halloween-level-8  { background-color: #F8A83B; }
.halloween-level-9  { background-color: #F5913D; }
.halloween-level-10 { background-color: #F57E3D; }


.halloween_campaign .halloween-materials-label {
	position: absolute;
	top: -1.2rem;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--color-white);
	padding: 0 2rem;
}

.halloween_campaign .halloween-materials-text {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-charcoal);
	line-height: 1.45;
}

.halloween_campaign .halloween-present-section {
	width: 60rem;
	position: relative;
}

.halloween_campaign .halloween-present-container {
	border: 0.1rem solid var(--color-gray-border);
	border-radius: 1.2rem;
	position: relative;
	background-color: var(--color-white);
	padding: 4rem 5.4rem 5.3rem;
}

.halloween_campaign .halloween-present-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3.8rem;
}

.halloween_campaign .halloween-present-description {
	text-align: center;
}

.halloween_campaign .halloween-present-description p {
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--color-charcoal);
	line-height: 1.2;
}

.halloween_campaign .halloween-coin-image {
	width: 23rem;
	height: 9rem;
}

.halloween_campaign .halloween-coin-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.halloween_campaign .halloween-present-label {
	position: absolute;
	top: -1.2rem;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--color-white);
	padding: 0 2rem;
}

.halloween_campaign .halloween-present-text {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-charcoal);
	line-height: 1.45;
}

.halloween_campaign .halloween-event2-notice {
	width: 80rem;
}

.halloween_campaign .halloween-notice-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 2rem;
	background-color: var(--color-gray-lightest);
}

.halloween_campaign .halloween-notice-header {
	display: flex;
	gap: 1rem;
	padding: 0 0 0.5rem;
}

.halloween_campaign .halloween-notice-title-main {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-charcoal);
	line-height: 1.19;
}

.halloween_campaign .halloween-notice-row {
	display: flex;
	gap: 0.2rem;
	align-items: flex-start;
}

.halloween_campaign .halloween-notice-bullet {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--color-charcoal);
	line-height: 1.33;
	flex-shrink: 0;
}

.halloween_campaign .halloween-notice-content {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--color-charcoal);
	line-height: 1.33;
	flex: 1;
}

.page_wrap_2025 {
    padding-bottom: 27rem;
    background: url('https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/user/webroot/images/campaign/halloween/halloween_bg.webp'), -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c392d5), color-stop(0.90, #fff));
    background: url('https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/user/webroot/images/campaign/halloween/halloween_bg.webp'), -webkit-linear-gradient(top, #f5f5f5 calc(100% - 200px), #c392d5 100%);
    background: url('https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/user/webroot/images/campaign/halloween/halloween_bg.webp') , -moz-linear-gradient(top, #f5f5f5 calc(100% - 200px), #c392d5 100%);
    background: url('https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/user/webroot/images/campaign/halloween/halloween_bg.webp') , -o-linear-gradient(top, #f5f5f5 calc(100% - 200px), #c392d5 100%);
    background: url('https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/user/webroot/images/campaign/halloween/halloween_bg.webp') , -ms-linear-gradient(top, #f5f5f5 calc(100% - 200px), #c392d5 100%);
    background: url('https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/user/webroot/images/campaign/halloween/halloween_bg.webp'), linear-gradient(to bottom, #f5f5f5 calc(100% - 200px), #c392d5 100%);
    background-position: bottom center;
    background-repeat: no-repeat;
}

.page_wrap--campaign_halloween_vote,
.page_wrap--campaign_halloween {
    padding-top: 2rem;
}

/* Halloween Voting Page Styles */
.halloween_campaign .halloween-vote-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rem;
	padding: 4rem 0 6rem;
}

.halloween_campaign .halloween-vote-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80rem;
}

.halloween_campaign .halloween-vote-title h2 {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--halloween-main-color);
	text-align: center;
	line-height: 1.45;
}

.halloween_campaign .halloween-title-border {
	width: 80rem;
	height: 0.2rem;
	background-color: #F9A31C;
}

.halloween_campaign .halloween-vote-warning {
	text-align: center;
}

.halloween_campaign .halloween-warning-text {
	font-size: 1.8rem;
	font-weight: 700;
	color: #ED1212;
	line-height: 1.45;
	margin: 0;
}

.halloween_vote,
.halloween_report{
	background: #ffff;
}

.halloween_campaign .halloween-vote-form {
	display: flex;
	flex-direction: column;
	gap: 6rem;
}

.halloween_campaign .halloween-vote-sections {
	display: flex;
	flex-direction: column;
	gap: 6rem;
}

.halloween_campaign .halloween-vote-section {
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

.halloween_campaign .halloween-vote-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem;
	width: 80rem;
	margin: 0 auto;
}

.halloween_campaign .halloween-vote-item {
	display: flex;
	flex-direction: column;
	width: 24.2rem;
	position: relative;
}

.halloween_campaign .halloween-vote-item.active {
	border: unset;
	background: #FFE4B9;
	border-radius: 1rem;
}

.halloween_campaign .halloween-vote-card {
	width: 24.2rem;
	height: 30.6rem;
	background-color: transparent;
	border-radius: 1rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.16);
	position: relative;
	cursor: pointer;
	transition: border-color 0.3s ease;
}

.halloween_campaign .halloween-vote-card-inner {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	width: 21.2rem;
	height: 24.3rem;
	background-color: var(--color-white);
	border: 0.2rem solid #F9A31C;
	border-radius: 1rem;
}

.halloween_campaign .halloween-vote-card-inner.halloween-vote-card--black {
	background-color: #0A0404;
}

.halloween_campaign .halloween-card-star {
	position: absolute;
	top: 0;
	right: 0;
	width: 6.7rem;
	height: 6.7rem;
	z-index: 2;
}

.halloween_campaign .halloween-card-star img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.halloween_campaign .halloween-card-name {
	position: absolute;
	top: 1.8rem;
	left: 1.8rem;
	width: 13.7rem;
	height: 2.2rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--halloween-main-color);
	line-height: 1.36;
}
.halloween_campaign .halloween-card-image {
	position: absolute;
	top: 4.9rem;
	left: 1.8rem;
	width: 17.6rem;
	height: 17.6rem;
	border: 0.2rem solid #F9A31C;
	overflow: hidden;
}

.halloween_campaign .halloween-vote-card-inner.halloween-vote-card--black .halloween-card-name {
	color: var(--color-white);
}

.halloween_campaign .halloween-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.halloween_campaign .halloween-vote-radio {
	position: absolute;
	top: 27.3rem;
	left: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.halloween_campaign .halloween-vote-radio input[type="radio"] {
	width: 1.8rem;
	height: 1.8rem;
	border: 0.1rem solid #CCCCCC;
	border-radius: 50%;
	background-color: #EEEEEE;
	margin: 0;
	cursor: pointer;
}

.halloween_campaign .halloween-vote-radio label {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--halloween-main-color);
	line-height: 1.36;
	cursor: pointer;
}

.halloween_campaign .halloween-vote-warning-bottom {
	text-align: center;
	margin-top: 2rem;
}

.halloween_campaign .halloween-vote-button-container {
	display: flex;
	justify-content: center;
	margin-bottom: 6rem;
}

.halloween_campaign .halloween-vote-button {
	width: 42rem;
	height: 7.8rem;
	background-color: #DA2F74;
	box-shadow: 0px 6px 0px 0px #A12356;
	border: none;
	border-radius: 1rem;
	font-size: 2.4rem;
	font-weight: 700;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
}

.halloween_campaign .halloween-vote-button.disabled{
	background-color: #F4F4F4;
	box-shadow: 0px 6px 0px 0px #F4F4F4;
	color: #CCCCCC;
	cursor: not-allowed;
}

.halloween_campaign .halloween-vote-form:has(.halloween-vote-item.active) .halloween-vote-button {
	cursor: pointer;
}

.halloween_campaign .halloween-vote-form:has(.halloween-vote-item.active) .halloween-vote-button:hover {
	background-color: #A12356;
}
/* Halloween Report Page Styles */
.halloween_campaign .halloween-title-border {
	width: 80rem;
	height: 0.2rem;
	background-color: #F9A31C;
	margin: 2rem auto 0;
}

.halloween_campaign .halloween-ranking-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rem;
	padding: 0 8rem;
}

.halloween_campaign .halloween-winner-large {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	width: 80rem;
	position: relative;
}

.halloween_campaign .halloween-rank-number {
	position: absolute;
	top: -2rem;
	left: -2rem;
	z-index: 10;
}

.halloween_campaign .halloween-rank-circle {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--color-white);
	border: 0.2rem solid;
}

.halloween_campaign .halloween-rank-gold {
	background-color: var(--halloween-gold);
	border-color: var(--halloween-gold-border);
}

.halloween_campaign .halloween-rank-silver {
	background-color: var(--halloween-silver);
	border-color: var(--halloween-gold-border);
}

.halloween_campaign .halloween-rank-bronze {
	background-color: var(--halloween-bronze);
	border-color: var(--halloween-gold-border);
}

.halloween_campaign .halloween-winner-card {
	width: 80rem;
	height: 42rem;
	border: 0.2rem solid #F9A31C;
	border-radius: 1rem;
	position: relative;
	box-sizing: border-box;
}

.halloween_campaign .halloween-winner-white {
	background-color: var(--color-white);
}

.halloween_campaign .halloween-winner-black {
	background-color: #0A0404;
}

.halloween_campaign .halloween-winner-star {
	position: absolute;
	top: 0;
	right: 0;
	width: 8rem;
	height: 8rem;
	z-index: 5;
}

.halloween_campaign .halloween-winner-name {
	position: absolute;
	top: 2.2rem;
	left: 4.2rem;
	width: 51.5rem;
	height: 3rem;
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--halloween-main-color);
	line-height: 1.36;
}

.halloween_campaign .halloween-winner-black .halloween-winner-name {
	color: var(--color-white);
}

.halloween_campaign .halloween-winner-small.halloween-winner-black .halloween-winner-name {
	color: var(--color-white);
}

.halloween_campaign .halloween-participant-item.halloween-winner-black .halloween-winner-name {
	color: var(--color-white);
}

.halloween_campaign .halloween-winner-content {
	position: absolute;
	top: 6.4rem;
	left: 2.2rem;
	display: flex;
	gap: 2rem;
	width: 75.6rem;
	height: 30.3rem;
}

.halloween_campaign .halloween-winner-image {
	width: 30.3rem;
	height: 30.3rem;
	border: 0.2rem solid #F9A31C;
	overflow: hidden;
	flex-shrink: 0;
}

.halloween_campaign .halloween-winner-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.halloween_campaign .halloween-winner-comment {
	width: 43.3rem;
	height: 29.9rem;
	padding-top: 0.4rem;
}

.halloween_campaign .halloween-winner-comment p {
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--halloween-main-color);
	line-height: 1.36;
	margin: 0;
}

.halloween_campaign .halloween-winner-info {
	display: flex;
	gap: 2.2rem;
	width: 100%;
}

.halloween_campaign .halloween-winners-small {
	display: flex;
	gap: 4rem;
	justify-content: center;
}

.halloween_campaign .halloween-winner-small {
	width: 38rem;
	height: 42.2rem;
	border: 0.2rem solid #F9A31C;
	border-radius: 1rem;
	position: relative;
	box-sizing: border-box;
}

.halloween_campaign .halloween-winner-small .halloween-rank-number {
	position: absolute;
	top: -2rem;
	left: -2rem;
}

.halloween_campaign .halloween-winner-small .halloween-winner-star {
	position: absolute;
	top: 0;
	right: 0;
	width: 8rem;
	height: 8rem;
}

.halloween_campaign .halloween-winner-small .halloween-winner-name {
	position: absolute;
	top: 2.2rem;
	left: 4.2rem;
	width: 28.3rem;
	height: 3rem;
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--halloween-main-color);
	line-height: 1.36;
}

.halloween_campaign .halloween-winner-small .halloween-winner-image {
	position: absolute;
	top: 6.4rem;
	left: 2.2rem;
	width: 33.6rem;
	height: 33.6rem;
	border: 0.2rem solid #F9A31C;
}

.halloween_campaign .halloween-participants {
	display: flex;
	gap: 4rem;
	justify-content: center;
	flex-wrap: wrap;
}

.halloween_campaign .halloween-participant-item {
	width: 38rem;
	height: 42.2rem;
	border: 0.2rem solid #F9A31C;
	border-radius: 1rem;
	position: relative;
	box-sizing: border-box;
}

.halloween_campaign .halloween-participant-item .halloween-winner-star {
	position: absolute;
	top: 0;
	right: 0;
	width: 8rem;
	height: 8rem;
}

.halloween_campaign .halloween-participant-item .halloween-winner-name {
	position: absolute;
	top: 2.2rem;
	left: 4.2rem;
	width: 28.3rem;
	height: 3rem;
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--halloween-main-color);
	line-height: 1.36;
}

.halloween_campaign .halloween-participant-item .halloween-winner-image {
	position: absolute;
	top: 6.4rem;
	left: 2.2rem;
	width: 33.6rem;
	height: 33.6rem;
	border: 0.2rem solid #F9A31C;
}

/* Halloween Photo Gallery Section - Instagram */
.halloween_campaign .event[style*="border-top"] {
	border-top: 0.1rem solid #DDDDDD;
	padding-top: 6rem;
}

.halloween_campaign .halloween-photo-gallery-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rem;
	border-top: 0.1rem solid #DDDDDD;
	padding: 6rem 0 0;
}

.halloween_campaign .halloween-photo-gallery-text {
	width: 80rem;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--color-charcoal);
	line-height: 1.448;
}

.halloween_campaign .halloween-photo-grid {
	width: 80rem;
	height: 133rem;
	background-color: #000000;
	position: relative;
	margin: 0 auto;
	padding: 0;
}

.halloween_campaign .halloween-photo-grid-inner {
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 78rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.05rem;
}

.halloween_campaign .halloween-photo-item {
	width: 25.3rem;
	height: 25.3rem;
}

.halloween_campaign .halloween-photo-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.halloween_campaign .halloween-photo-item img:hover {
	transform: scale(1.05);
}

.halloween_campaign .halloween-instagram-button {
	display: flex;
	justify-content: center;
}

.halloween_campaign .halloween-insta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 42rem;
	height: 7.8rem;
	background: #DA2F74;
	border-radius: 1rem;
	text-decoration: none;
	color: var(--color-white);
	font-size: 2.4rem;
	font-weight: 700;
	transition: transform 0.2s ease;
	box-shadow: 0 0.6rem 0 #A12356;
}

.halloween_campaign .halloween-insta-btn:hover {
	transform: translateY(-0.2rem);
	box-shadow: 0 0.8rem 0 #DA2F74;
}

.halloween_campaign .halloween-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	background-image: url("https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/user/webroot/images/campaign/halloween/icon_insta.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Halloween Vote In Progress Styles */
.halloween_campaign .halloween-vote-in-progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6rem;
	padding: 4rem 0;
	max-width: 96rem;
	margin: 0 auto;
	background-color: var(--color-white);
	box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.2);
	border-radius: 0.5rem;
}

.halloween_campaign .halloween-vote-progress-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rem;
}

.halloween_campaign .halloween-vote-progress-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80rem;
}

.halloween_campaign .halloween-vote-progress-title h2 {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--halloween-main-color);
	text-align: center;
	line-height: 1.448;
}

.halloween_campaign .halloween-vote-progress-deadline {
	text-align: center;
}

.halloween_campaign .halloween-vote-progress-deadline p {
	font-size: 2rem;
	font-weight: 700;
	color: var(--halloween-main-color);
	line-height: 1.448;
	margin: 0;
}

.halloween_campaign .halloween-vote-progress-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rem;
	max-width: 80rem;
}

.halloween_campaign .halloween-vote-progress-text {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	text-align: left;
}

.halloween_campaign .halloween-vote-progress-text p {
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--halloween-main-color);
	line-height: 1.448;
	margin: 0;
	width: 80rem;
}

.halloween_campaign .halloween-vote-progress-login {
	text-align: center;
}

.halloween_campaign .halloween-vote-progress-login p {
	font-size: 1.8rem;
	font-weight: 700;
	color: #ED1212;
	line-height: 1.448;
	margin: 0;
}

.halloween_campaign .halloween-vote-progress-sections {
	display: flex;
	flex-direction: column;
	gap: 6rem;
	width: 100%;
	align-items: center;
}

.halloween_campaign .halloween-vote-progress-section {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	width: 100%;
	align-items: center;
}

.halloween_campaign .halloween-vote-progress-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.05rem;
	width: 80rem;
}

.halloween_campaign .halloween-vote-progress-item {
	width: 25.3rem;
	height: 29.1rem;
	border: 0.2rem solid #F9A31C;
	border-radius: 1rem;
	position: relative;
	box-sizing: border-box;
}

.halloween_campaign .halloween-vote-progress-item.halloween-vote-card--white {
	background-color: var(--color-white);
}

.halloween_campaign .halloween-vote-progress-item.halloween-vote-card--black {
	background-color: #0A0404;
}

.halloween_campaign .halloween-vote-progress-item .halloween-card-name {
	position: absolute;
	top: 2.2rem;
	left: 2.2rem;
	width: 16.1rem;
	height: 2.5rem;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--halloween-main-color);
	line-height: 1.362;
}

.halloween_campaign .halloween-vote-progress-item.halloween-vote-card--black .halloween-card-name {
	color: var(--color-white);
}

.halloween_campaign .halloween-vote-progress-item .halloween-card-image {
	position: absolute;
	top: 6rem;
	left: 2.2rem;
	width: 20.9rem;
	height: 20.9rem;
	border: 0.2rem solid #F9A31C;
	overflow: hidden;
}

.halloween_campaign .halloween-vote-progress-item .halloween-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.halloween_campaign .halloween-vote-progress-instagram {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 42rem;
}

.halloween_campaign .halloween-vote-progress-instagram-title {
	color: var(--color-charcoal);
	font-size: 1.9rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.0rem;
}

.halloween_campaign .halloween-vote-progress-instagram-title::before {
	content: "";
	display: inline-block;
    width: 2.1rem;
    height: 2.8rem;
	vertical-align: middle;
	background: url("https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/user/webroot/images/campaign/halloween/bar_before.svg") no-repeat;
	background-size: contain;
}

.halloween_campaign .halloween-vote-progress-instagram-title::after {
	content: "";
	display: inline-block;
    width: 2.1rem;
    height: 2.8rem;
	vertical-align: middle;
	background: url("https://nativecamp-public-web-production.s3-ap-northeast-1.amazonaws.com/user/webroot/images/campaign/halloween/bar_after.svg") no-repeat;
	background-size: contain;
}
/* Halloween Vote Item Styles */
.halloween_campaign .halloween-vote-item:hover {
    transform: translateY(-0.2rem);
    transition: transform 0.2s ease;
}

.halloween_campaign .halloween-vote-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.8rem;
    height: 1.8rem;
    border: 0.1rem solid #CCCCCC;
    border-radius: 50%;
    background-color: #EEEEEE;
    margin: 0;
    cursor: pointer;
    position: relative;
}

.halloween_campaign .halloween-vote-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: #16A9B2;
}

/* Halloween Vote Completion Page Styles - Desktop */
.halloween_vote .container {
	max-width: 96rem;
	margin: 2rem auto;
	padding: 0;
	background-color: #FFFFFF;
	border-radius: 0.5rem;
	box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.halloween_vote .page_inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 4rem 0 6rem;
	width: 96rem;
	margin: 0 auto;
}

.halloween_vote .halloween_result {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13rem;
	width: 100%;
}

.halloween_vote .page_header {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80rem;
	position: relative;
}

.halloween_vote .page_ttl {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 2.5rem;
	line-height: 1.4479998779296874em;
	text-align: center;
	color: #333333;
	margin: 0 0 2rem 0;
	width: 80rem;
	height: 3.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.halloween_vote .page_ttl::after {
	content: '';
	position: absolute;
	bottom: -1rem;
	left: 0;
	width: 80rem;
	height: 0.2rem;
	background: #F9A31C;
}

.halloween_vote .halloween_message {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80rem;
}

.halloween_vote .halloween_message p {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.4479999542236328em;
	text-align: center;
	color: #333333;
	margin: 0;
	width: 80rem;
}

.halloween_vote .halloween_redirect {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 80rem;
}

.halloween_vote .halloween_redirect p {
	margin: 0;
	width: 80rem;
}

.halloween_vote .halloween_redirect a {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 1.4479999542236328em;
	text-align: left;
	color: #0FACEE;
	text-decoration: none;
}

.halloween_vote .halloween_redirect a:hover {
	text-decoration: underline;
}

/* NJ-77512 END*/


/* NJ-81650 */
.submission_campaign .section-title{
	background: var(--color-submission-primary);
}
.submission_campaign .m_b_5{
	line-height: 2rem;
}
.submission_campaign .notice-item{
	color: #333;
}
.submission_campaign .step-number{
	background: var(--color-submission-primary);
	height: unset;
	max-width: 12rem;
	width: 100%;
	padding: 1.1rem 0;
}
.submission_campaign .campaign-title h2{
	color: var(--color-submission-red);
}
.conditions-list{
	width: 55.8rem;
	margin: auto;
}
.conditions-list ul li {
    width: 55.8rem;
    margin: auto auto 1rem;
    padding: 1.5rem;
    background: rgba(33, 177, 209, 10%);
    font-size: 2.2rem;
    font-weight: 700;
	border-radius: 8px;
	color: #333;
}
.conditions-list ul li span {
    display: inline-block;
    margin-right: 1.5rem;
    background: #fff;
    color: #21B1D1;
    border: 1px solid #21B1D1;
    border-radius: 50%;
	padding: 0.6rem 1.1rem;
    text-align: center;
	font-size: 2.6rem;
}
.activityContentList li {
	margin-bottom: 0.5rem;
	font-weight: 700;
}
a.condition-link-item {
    padding: 1.6rem;
    width: 25rem;
    display: block;
    height: 21.8rem;
    position: relative;
	box-sizing: border-box;
	border-radius: 16px;
	box-shadow: 0px 0px 15px rgba(33, 177, 209, 0.3);
}
.condition-image img{
	margin-top: 1.6rem;
}
.condition-image{
	position: relative;
	padding: 0 0 2rem 11.6rem;
}
.condition-link-item .PublicationName{
	font-size: 2.8rem;
	font-weight: 700;
	color: #21B1D1;
	margin-bottom: 1.5rem;
	line-height: 1;
}
.condition-link-item .PublicationCondition{
	font-size: 2rem;
	font-weight: 700;
	color: #502909;
	line-height: 1;
}
.condition-page-links {
  counter-reset: image-counter; /* Initialize counter */
}

.condition-link-item .condition-image::before {
  counter-increment: image-counter; /* Increase counter */
  content: counter(image-counter, decimal-leading-zero); /* Output 01, 02, 03... */
  position: absolute;
  top: -1.2rem;
  left: 0;
  font-size: 8rem;
  font-weight: 700;
  font-family: "Noto Sans", sans-serif;
  color: #21B1D1;
  line-height: 1;
  opacity: 20%;
}
.chevron-campaign {
	content: url(https://nativecamp-public-web-production.s3.amazonaws.com/user/webroot/images/campaign/submit_feedback/Group.svg);
    width: 3rem;
    position: absolute;
    font-size: 1.8rem;
    height: 3rem;
    align-content: center;
    right: 1rem;
    bottom: 1rem;
}
.condition-page-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
}
.example-image .example-text{
	background: #F0F0F0;
	color: #333;
	font-size: 1.8rem;
	display: block;
	padding: 2rem;
	font-weight: 700;
}

.example-image .sample-images-item {
	background: #FAFAFA;
	display: flex;
	padding: 3rem 3.2rem;
	gap: 2.3rem;
}

.submission_campaign .tag-guide-header{
	background-color: #DA2F74;
}
.submission_campaign .tag-guide-text p {
  	display: flex;
}
.submission_campaign .tag-guide-notes{
	color: #333;
}
.submission_campaign .btn-area {
	margin-top: 2.4rem;
	display: flex;
	justify-content: center;
}

.submission_campaign .btn-style {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48rem;
	height: 7.5rem;
	border-radius: 1rem;
	font-size: 2.4rem;
	font-weight: 700;
	text-decoration: none;
}
.submission_campaign .btn-green {
	background-color: var(--color-arigato-green);
	box-shadow: 0 0.6rem 0 var(--color-arigato-green-dark);
	color: var(--color-white);
}

.submission_campaign .btn-green:hover {
	background-color: #26B569;
}

.submission_campaign .hashtag{
	color: #555;
}
.submission_campaign .hashtag-list2 .hashtag{
	margin-bottom: 0.4rem;
}
.submission_campaign .c-red{
	color:#D91C0B ;
}
.submission_campaign .step-image img {
  border: 1px solid #ccc;
}
.submission_campaign .campaign-info {
	padding: 4rem 0rem 2rem;
}
.tag-guide-header h3 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-white);
}