:root {
--zone-rock: #ff7043;
--zone-fantasy: #7e57c2;
--zone-future: #00838f;
--zone-water: #2196f3;
--zone-horror: #607d8b;
--zone-food: #ffb300;
--zone-space: #3f51b5;
--zone-castle: #e91e63;
--zone-extra: #4caf50;
--zone-finale: #2c2c3e;
--zone-rock-end: #ff8a65;
--zone-fantasy-end: #64b5f6;
--zone-future-end: #26a69a;
--zone-water-end: #42a5f5;
--zone-horror-end: #78909c;
--zone-food-end: #ffd54f;
--zone-space-end: #5c6bc0;
--zone-castle-end: #f06292;
--zone-extra-end: #66bb6a;
--zone-finale-end: #3d3d52;
--zone-gradient: linear-gradient(45deg, var(--zone-color), var(--zone-color-end));
--zone-event-min-height: 2rem;
--zone-event-font-size: 0.8rem;
--zone-event-border-radius: 4px;
--zone-event-margin: 2px;
--zone-event-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
html {
margin: 0;
padding: 0;
background: #ffffff;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
padding-bottom: 0;
font-family: "M PLUS Rounded 1c", sans-serif;
background: #ffffff;
color: #111;
position: relative;
overflow-x: hidden;
}
.event-banner {
color: white;
text-align: center;
padding: 0.7rem 1rem;
font-weight: bold;
font-size: 0.95rem;
position: relative;
z-index: 20;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
display: none;
}
.event-banner.active {
display: block;
}
.banner-rock-fantasy {
background: linear-gradient(90deg, #f44336 0%, #9c27b0 50%, #ff4081 100%);
}
.banner-future-water {
background: linear-gradient(90deg, #00e676 0%, #00bcd4 50%, #448aff 100%);
}
.banner-horror-food {
background: linear-gradient(90deg, #4a148c 0%, #f44336 50%, #ff9800 100%);
}
.banner-space-castle {
background: linear-gradient(90deg, #3f51b5 0%, #673ab7 100%);
}
.banner-text {
display: inline-block;
letter-spacing: 0.05em;
}
.floating-zone-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
animation: slideUp 0.5s ease-out;
text-decoration: none !important;
display: block;
}
.floating-zone-banner:hover {
text-decoration: none !important;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.zone-banner-item {
color: white;
text-align: center;
padding: 0.8rem 1rem;
font-weight: bold;
font-size: 0.95rem;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s ease;
display: none;
}
.zone-banner-item.active {
display: block;
}
.zone-banner-item:hover {
filter: brightness(1.1);
padding-bottom: 0.9rem;
}
.zone-banner-item.banner-rock-fantasy {
background: linear-gradient(90deg, #f44336 0%, #9c27b0 50%, #ff4081 100%);
}
.zone-banner-item.banner-future-water {
background: linear-gradient(90deg, #00e676 0%, #00bcd4 50%, #448aff 100%);
}
.zone-banner-item.banner-horror-food {
background: linear-gradient(90deg, #4a148c 0%, #f44336 50%, #ff9800 100%);
}
.zone-banner-item.banner-space-castle {
background: linear-gradient(90deg, #3f51b5 0%, #673ab7 100%);
}
.zone-banner-item.banner-last-day {
background: linear-gradient(90deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
border-top: 1px solid #444;
border-bottom: 1px solid #444;
}
@media (max-width: 768px) {
.zone-banner-item {
padding: 0.7rem 0.8rem;
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
body {
padding-bottom: 35px;
}
}
a {
color: #2196f3;
font-weight: bold;
text-decoration: underline;
}
a:hover {
color: #1976d2;
}
#balloons {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.balloon {
position: absolute;
width: 25px;
height: 42px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.6;
animation: floatSimple 4.5s linear infinite alternate;
pointer-events: none;
}
@keyframes floatSimple {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -30px, 0);
}
}
.balloon-1 {
left: 10%;
top: 70%;
background-image: url('data:image/svg+xml;utf8,');
animation-delay: 0s;
}
.balloon-2 {
left: 25%;
top: 80%;
background-image: url('data:image/svg+xml;utf8,');
animation-delay: 1s;
}
.balloon-3 {
left: 50%;
top: 75%;
background-image: url('data:image/svg+xml;utf8,');
animation-delay: 2s;
}
.balloon-4 {
left: 70%;
top: 85%;
background-image: url('data:image/svg+xml;utf8,');
animation-delay: 3s;
}
.balloon-5 {
left: 85%;
top: 70%;
background-image: url('data:image/svg+xml;utf8,');
animation-delay: 4s;
}
.balloon-6 {
left: 40%;
top: 65%;
background-image: url('data:image/svg+xml;utf8,');
animation-delay: 5s;
}
/* 上部に配置するバルーン */
.balloon-7 {
left: 15%;
top: 20%;
background-image: url('data:image/svg+xml;utf8,');
animation-delay: 1.5s;
}
.balloon-8 {
left: 60%;
top: 10%;
background-image: url('data:image/svg+xml;utf8,');
animation-delay: 2.5s;
}
.balloon-9 {
left: 80%;
top: 30%;
background-image: url('data:image/svg+xml;utf8,');
animation-delay: 3.5s;
}
.balloon-10 {
left: 35%;
top: 40%;
background-image: url('data:image/svg+xml;utf8,');
animation-delay: 4.5s;
}
header {
background: linear-gradient(90deg, #ffe600 0%, #ffd000 100%);
padding: 0.7rem;
text-align: center;
clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
box-shadow: 0 5px 0 #ff6f61;
position: relative;
z-index: 2;
}
.header-deco,
.header-deco-bottom {
position: absolute;
left: 0;
width: 100%;
height: 10px;
background: repeating-linear-gradient(45deg, #ff3d00, #ff3d00 10px, #00bcd4 10px, #00bcd4 20px);
}
.header-deco {
top: 0px;
}
.header-deco-bottom {
bottom: -6px;
}
.header-title {
font-family: "Fredoka", sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: #ff3d00;
letter-spacing: 1px;
margin: 0;
}
.sew-letter {
font-size: 2.5rem;
color: #ff3d00;
font-weight: 900;
letter-spacing: 1px;
margin: 0 2px;
display: inline-block;
position: relative;
animation: letterBounceIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
opacity: 0;
transform: translate3d(0, 50px, 0) scale(0.3);
}
/* SEWの大文字のアニメーション遅延 */
.title-word:nth-child(1) .sew-letter {
animation: letterBounceIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
animation-delay: 0.1s;
}
.title-word:nth-child(2) .sew-letter {
animation: letterBounceIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
animation-delay: 0.3s;
}
.title-word:nth-child(3) .sew-letter {
animation: letterBounceIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
animation-delay: 0.5s;
}
@keyframes letterBounceIn {
0% {
opacity: 0;
transform: translate3d(0, 50px, 0) scale(0.3);
}
50% {
opacity: 1;
transform: translate3d(0, -20px, 0) scale(1.1);
}
70% {
transform: translate3d(0, 5px, 0) scale(0.95);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
.letter {
font-size: 1.1rem;
color: #ff3d00;
font-weight: 700;
letter-spacing: 1px;
display: inline-block;
position: relative;
opacity: 0;
}
/* 小文字のアニメーション割り当て */
/* Sound */
.title-word:nth-child(1) .letter:nth-child(2) {
animation: letterIntro1 1.5s ease-out forwards;
animation-delay: 0.15s;
}
.title-word:nth-child(1) .letter:nth-child(3) {
animation: letterIntro2 1.5s ease-out forwards;
animation-delay: 0.2s;
}
.title-word:nth-child(1) .letter:nth-child(4) {
animation: letterIntro3 1.5s ease-out forwards;
animation-delay: 0.25s;
}
.title-word:nth-child(1) .letter:nth-child(5) {
animation: letterIntro4 1.5s ease-out forwards;
animation-delay: 0.3s;
}
/* Enjoy */
.title-word:nth-child(2) .letter:nth-child(2) {
animation: letterIntro1 1.5s ease-out forwards;
animation-delay: 0.35s;
}
.title-word:nth-child(2) .letter:nth-child(3) {
animation: letterIntro2 1.5s ease-out forwards;
animation-delay: 0.4s;
}
.title-word:nth-child(2) .letter:nth-child(4) {
animation: letterIntro3 1.5s ease-out forwards;
animation-delay: 0.45s;
}
.title-word:nth-child(2) .letter:nth-child(5) {
animation: letterIntro4 1.5s ease-out forwards;
animation-delay: 0.5s;
}
/* World */
.title-word:nth-child(3) .letter:nth-child(2) {
animation: letterIntro1 1.5s ease-out forwards;
animation-delay: 0.55s;
}
.title-word:nth-child(3) .letter:nth-child(3) {
animation: letterIntro2 1.5s ease-out forwards;
animation-delay: 0.6s;
}
.title-word:nth-child(3) .letter:nth-child(4) {
animation: letterIntro3 1.5s ease-out forwards;
animation-delay: 0.65s;
}
.title-word:nth-child(3) .letter:nth-child(5) {
animation: letterIntro4 1.5s ease-out forwards;
animation-delay: 0.7s;
}
/* letterIntro アニメーション定義 */
@keyframes letterIntro1 {
0% {
opacity: 0;
transform: translateY(30px) rotate(-180deg) scale(0);
}
20% {
opacity: 1;
transform: translateY(-20px) rotate(20deg) scale(1.2);
}
40% {
transform: translateY(5px) rotate(-10deg) scale(0.9);
}
60% {
transform: translateY(-2px) rotate(5deg) scale(1.05);
}
80% {
transform: translateY(1px) rotate(-2deg) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) rotate(0) scale(1);
}
}
@keyframes letterIntro2 {
0% {
opacity: 0;
transform: translateX(-50px) rotate(720deg) scale(0);
}
30% {
opacity: 1;
transform: translateX(10px) rotate(360deg) scale(1.3);
}
50% {
transform: translateX(-5px) rotate(180deg) scale(0.8);
}
70% {
transform: translateX(2px) rotate(90deg) scale(1.1);
}
85% {
transform: translateX(-1px) rotate(45deg) scale(0.95);
}
100% {
opacity: 1;
transform: translateX(0) rotate(0) scale(1);
}
}
@keyframes letterIntro3 {
0% {
opacity: 0;
transform: translate(30px, 30px) rotate(0deg) scale(0);
}
25% {
opacity: 1;
transform: translate(-20px, -20px) rotate(90deg) scale(1.2);
}
50% {
transform: translate(15px, -10px) rotate(180deg) scale(0.9);
}
70% {
transform: translate(-8px, 5px) rotate(270deg) scale(1.1);
}
85% {
transform: translate(3px, -2px) rotate(315deg) scale(0.95);
}
100% {
opacity: 1;
transform: translate(0, 0) rotate(360deg) scale(1);
}
}
@keyframes letterIntro4 {
0% {
opacity: 0;
transform: translateY(50px) scale(0.2);
}
20% {
opacity: 1;
transform: translateY(-30px) scale(1.5);
}
35% {
transform: translateY(15px) scale(0.7);
}
50% {
transform: translateY(-10px) scale(1.2);
}
65% {
transform: translateY(8px) scale(0.9);
}
80% {
transform: translateY(-4px) scale(1.05);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.title-word {
display: inline-block;
margin: 0;
}
.title-word:not(:last-child)::after {
content: " ";
display: inline;
}
.header-subtitle {
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 0.75rem;
font-weight: 700;
color: #555;
}
.hero {
background: transparent;
padding: 1rem 0;
padding-bottom: 0rem;
position: relative;
z-index: 2;
max-width: 600px;
margin: 0 auto;
}
.hero.animating {
z-index: 9999 !important;
}
.hero-container {
position: relative;
width: 100%;
padding-bottom: 57.125%; /* 914/1600 * 100 = 57.125% */
overflow: hidden;
border-radius: 3px;
}
.hero-container > img:first-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 3px;
}
.hero-overlay {
position: absolute;
top: 64.2%;
left: 50.4%;
transform: translate(-50%, -50%);
width: 10.98%;
height: auto;
z-index: 3;
cursor: pointer;
opacity: 1;
/* animation: goldenGlow 3s ease-in-out infinite; */
}
.hero-container.animating {
overflow: visible !important;
z-index: 9999 !important;
}
.hero-overlay.animating {
z-index: 10000 !important;
}
@keyframes goldenGlow {
0%,
100% {
filter: brightness(1) drop-shadow(0 0 0 transparent);
}
50% {
filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 215, 0, 0.4)) drop-shadow(0 0 15px rgba(255, 215, 0, 0.25));
}
}
@keyframes characterJump1 {
0% {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
10% {
transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
}
25% {
transform: translate(40vw, -30vh) rotate(540deg) scale(2);
}
40% {
transform: translate(45vw, -45vh) rotate(900deg) scale(0.5);
}
55% {
transform: translate(-45vw, -40vh) rotate(1260deg) scale(3);
}
70% {
transform: translate(-40vw, 30vh) rotate(1620deg) scale(0.8);
}
85% {
transform: translate(20vw, 35vh) rotate(1980deg) scale(1.8);
}
95% {
transform: translate(-30vw, 0) rotate(2340deg) scale(0.3);
}
100% {
transform: translate(-50%, -50%) rotate(2520deg) scale(1);
}
}
@keyframes characterJump2 {
0% {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
15% {
transform: translate(-50%, -50%) rotate(-360deg) scale(0.5);
}
30% {
transform: translate(-35vw, 40vh) rotate(-720deg) scale(2.5);
}
45% {
transform: translate(30vw, 45vh) rotate(-1080deg) scale(0.3);
}
60% {
transform: translate(40vw, -35vh) rotate(-1440deg) scale(1.8);
}
75% {
transform: translate(-30vw, -40vh) rotate(-1800deg) scale(0.7);
}
90% {
transform: translate(0, 20vh) rotate(-2160deg) scale(1.5);
}
100% {
transform: translate(-50%, -50%) rotate(-2520deg) scale(1);
}
}
@keyframes characterJump3 {
0% {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
20% {
transform: translate(-50%, -50%) rotate(720deg) scale(2);
}
35% {
transform: translate(0, -45vh) rotate(1080deg) scale(0.4);
}
50% {
transform: translate(45vw, 0) rotate(1440deg) scale(3);
}
65% {
transform: translate(0, 40vh) rotate(1800deg) scale(0.6);
}
80% {
transform: translate(-45vw, 0) rotate(2160deg) scale(2);
}
100% {
transform: translate(-50%, -50%) rotate(2880deg) scale(1);
}
}
.sew-songs-banner {
background: linear-gradient(135deg, #ff5722 0%, #ff6f00 25%, #ff8f00 50%, #ff5722 75%, #ff6f00 100%);
background-size: 200% 200%;
animation: gradientShift 3s ease infinite;
margin: 2rem auto;
max-width: 700px;
width: 95%;
border-radius: 20px;
box-shadow:
0 10px 40px rgba(255, 61, 0, 0.4),
0 0 60px rgba(255, 111, 0, 0.3);
position: relative;
z-index: 10;
overflow: hidden;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.sew-songs-banner-content {
display: flex;
align-items: center;
justify-content: center;
padding: 1.8rem 2.5rem;
color: white !important;
text-decoration: none !important;
position: relative;
}
.banner-sparkle {
position: absolute;
font-size: 2rem;
animation: sparkle 1.5s ease-in-out infinite;
}
.banner-sparkle.left {
left: 20px;
top: 50%;
transform: translateY(-50%);
}
.banner-sparkle.right {
right: 20px;
top: 50%;
transform: translateY(-50%);
animation-delay: 0.75s;
}
@keyframes sparkle {
0%,
100% {
opacity: 0.3;
transform: translate3d(0, -50%, 0) scale(0.8) rotate(0deg);
}
50% {
opacity: 1;
transform: translate3d(0, -50%, 0) scale(1.2) rotate(180deg);
}
}
.banner-main {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.banner-title {
font-family: "Fredoka", sans-serif;
font-size: 1.6rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.6rem;
letter-spacing: 0.3px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.banner-title i {
animation: musicNote 1.5s ease-in-out infinite;
}
.banner-title i:last-of-type {
animation-delay: 0.5s;
}
@keyframes musicNote {
0%,
100% {
transform: translate3d(0, 0, 0) rotate(0deg);
}
25% {
transform: translate3d(0, -3px, 0) rotate(-10deg);
}
50% {
transform: translate3d(0, 0, 0) rotate(0deg);
}
75% {
transform: translate3d(0, -3px, 0) rotate(10deg);
}
}
.banner-subtitle {
font-size: 0.9rem;
opacity: 0.95;
letter-spacing: 0.3px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}
.banner-arrow {
position: absolute;
right: 30px;
font-size: 1.5rem;
animation: arrowSlide 2s ease-in-out infinite;
}
@keyframes arrowSlide {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(5px, 0, 0);
}
}
.sew-songs-banner:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
.sew-songs-banner:hover .banner-arrow {
/* animation: arrowSlideHover 0.5s ease-in-out infinite; */
}
@keyframes arrowSlideHover {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(10px, 0, 0);
}
}
@media screen and (max-width: 768px) {
.sew-songs-banner {
margin: 1.5rem auto;
width: 92%;
}
.sew-songs-banner-content {
padding: 1.3rem 1.5rem;
}
.banner-title {
font-size: 1.1rem;
gap: 0.4rem;
}
.banner-subtitle {
font-size: 0.75rem;
}
.banner-sparkle {
font-size: 1.5rem;
}
.banner-sparkle.left {
left: 10px;
}
.banner-sparkle.right {
right: 10px;
}
.banner-arrow {
display: none;
}
}
.content-area {
padding: 0.5rem 1.5rem;
padding-bottom: 0rem;
background: rgba(255, 255, 255, 0.8);
text-align: center;
z-index: 2;
position: relative;
}
@media screen and (max-width: 768px) {
.content-area {
padding: 0.5rem 0.5rem;
}
}
.icon-section {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
margin-top: 2rem;
}
.icon-box {
flex: 1 1 250px;
background: #f9f9f9;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.icon-box .icon {
font-size: 2.5rem;
margin-bottom: 0.5rem;
color: #ff6f61;
}
.section-title {
font-family: "Fredoka", sans-serif;
font-size: 1.3rem;
font-weight: 700;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
position: relative;
color: #333;
}
.icon-box p {
font-size: 0.9rem;
line-height: 1.5;
color: #555;
}
.zone-intro {
margin-top: 3.5rem;
font-family: "Fredoka", sans-serif;
font-size: 2rem;
font-weight: 800;
color: #ff3d00;
text-align: center;
position: relative;
}
.zone-intro::after {
content: "";
display: block;
width: 100%;
max-width: 600px;
height: 3px;
margin: 0.3rem auto 0;
background: repeating-linear-gradient(45deg, #ff3d00, #ff3d00 10px, #00bcd4 10px, #00bcd4 20px);
border-radius: 5px;
}
.zone-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
max-width: 1000px;
margin: 2rem auto 0;
gap: 1rem;
}
@media screen and (max-width: 768px) {
.zone-cards {
gap: 0.8rem;
margin: 1.5rem auto 0;
}
}
.zone-card {
background: #f9f9f9;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.zone-card img {
width: 100%;
height: 160px;
object-fit: cover;
}
.zone-card-content {
padding: 1rem;
text-align: center;
}
.zone-card-content p {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.zone-name {
font-size: 1.2rem;
font-weight: 900;
margin-bottom: 0.5rem;
color: #ff3d00;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
letter-spacing: 0.5px;
font-family: "Fredoka", sans-serif;
}
.zone-desc {
font-size: 0.85rem;
color: #555;
margin-bottom: 0.75rem;
line-height: 1.5;
margin-left: -0.8rem;
margin-right: -0.8rem;
padding: 0;
text-align: center;
}
.zone-manager {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.zone-manager-label {
font-size: 0.7rem;
color: #666;
margin-bottom: 0.2rem;
}
.zone-manager img {
width: 32px;
height: 32px;
border-radius: 50%;
}
.zone-manager span {
font-size: 0.9rem;
font-weight: 700;
color: #333;
}
.zone-manager a {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: inherit;
}
.zone-manager a:hover {
text-decoration: none;
color: inherit;
}
.zone-manager a:visited {
text-decoration: none;
color: inherit;
}
.footer {
padding: 1.3rem;
background: rgba(245, 245, 245, 0.96);
text-align: center;
font-size: 0.9rem;
color: #666;
z-index: 2;
position: relative;
background-image: url(images/footer.svg);
background-size: auto 220px;
background-repeat: no-repeat;
background-position: center top;
}
.submission-section {
margin-top: 4rem;
padding: 2rem 1rem;
background: linear-gradient(90deg, rgba(0, 188, 212, 0.8) 0%, rgba(33, 150, 243, 0.8) 100%);
text-align: center;
position: relative;
z-index: 2;
transform: translateZ(0);
}
@media screen and (max-width: 768px) {
.submission-section {
padding: 2rem 0.5rem;
margin-top: 3rem;
}
}
.submission-card {
background: #ffffff;
border-radius: 12px;
padding: 2rem;
max-width: 800px;
margin: 0 auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
}
@media screen and (max-width: 768px) {
.submission-card {
padding: 1.5rem 0.8rem;
}
}
.submission-header {
font-family: "Fredoka", sans-serif;
font-size: 1.6rem;
font-weight: 900;
color: #2196f3;
margin-bottom: 1rem;
}
.submission-header-sub {
font-family: "Fredoka", sans-serif;
font-size: 1rem;
font-weight: 900;
color: #2196f3;
margin-bottom: 0.5rem;
text-align: left;
}
.submission-content p {
text-align: left;
font-size: 0.9rem;
color: #333;
margin-bottom: 0.2rem;
}
.submission-content .left-margin {
margin-left: 0.8rem;
}
.submission-content-tag {
color: #4455ff;
}
.highlight {
color: #d32f2f;
font-weight: 900;
font-size: 1.15em;
margin: 0 0.2em;
}
.submission-thumb-example {
margin-top: 1rem;
text-align: center;
}
.submission-thumb-example > div {
font-size: 0.9rem;
color: #666;
margin-bottom: 0.5rem;
}
.submission-thumb-example img {
max-width: 400px;
width: 100%;
height: auto;
border-radius: 4px;
}
.management-section {
padding: 2rem 1rem;
background: linear-gradient(90deg, rgba(255, 138, 101, 0.8) 0%, rgba(255, 112, 67, 0.8) 100%);
text-align: center;
position: relative;
transform: translateZ(0);
}
@media screen and (max-width: 768px) {
.management-section {
padding: 2rem 0.5rem;
}
}
.management-card {
position: relative;
overflow: hidden;
border-radius: 12px;
padding: 2rem;
max-width: 800px;
margin: 0 auto;
background: transparent;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
.management-card {
padding: 1.5rem 0.8rem;
}
}
.management-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
z-index: 1;
}
.management-header,
.management-content {
position: relative;
z-index: 2;
}
.management-header {
font-family: "Fredoka", sans-serif;
font-size: 1.6rem;
font-weight: 900;
color: #ff7043;
margin-bottom: 1rem;
}
.management-content p {
font-size: 0.9rem;
color: #333;
margin-bottom: 0.8rem;
text-align: left;
}
.modal-content .box {
padding: 1rem;
}
.modal-zone-image {
width: 100%;
height: auto;
margin-bottom: 1rem;
}
.modal-zone-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #333;
}
.modal-zone-description {
font-size: 1rem;
margin-bottom: 1rem;
color: #555;
}
.modal-zone-period {
font-size: 1.1rem;
font-weight: 600;
color: #ff9800;
margin-bottom: 1rem;
text-align: center;
padding: 0.5rem;
background: #fff8e1;
border-radius: 8px;
border: 2px solid #ffc107;
}
.modal-zone-comment-title {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 0.3rem;
color: #ff3d00;
}
.modal-zone-comment {
font-size: 0.95rem;
color: #666;
margin-bottom: 1rem;
}
.modal-zone-comment-sub {
font-size: 0.86rem;
color: #888;
margin-top: 2rem;
margin-bottom: 1rem;
}
.modal-zone-comment .horror {
font-size: 0.95rem;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
}
.modal-zone-manager {
font-size: 1.2rem;
color: #555;
text-align: right;
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 1rem;
}
.modal-zone-manager a {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #2196f3;
font-weight: bold;
font-size: 1rem;
}
.modal-zone-manager img {
width: 32px;
height: 32px;
margin-right: 6px;
display: inline-block;
border-radius: 50%;
}
.popcornrockm img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}
/* モーダルアニメーション */
@keyframes modalFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes modalFadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes modalScaleIn {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes modalScaleOut {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0.9);
opacity: 0;
}
}
.modal {
display: none;
}
.modal.is-active {
display: flex;
}
.modal.is-closing {
display: flex;
}
.modal.is-active .modal-background {
animation: modalFadeIn 0.15s ease-out;
}
.modal.is-closing .modal-background {
animation: modalFadeOut 0.15s ease-in;
}
.modal.is-active .modal-content {
animation: modalScaleIn 0.15s ease-out;
}
.modal.is-closing .modal-content {
animation: modalScaleOut 0.15s ease-in;
}
.modal-close {
width: 48px !important;
height: 48px !important;
max-width: 48px !important;
max-height: 48px !important;
background-color: rgba(255, 255, 255, 0.95) !important;
border: 2px solid #ff6f00 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
right: 20px !important;
top: 20px !important;
}
.modal-close:hover {
background-color: #ff6f00 !important;
transform: scale(1.05);
}
.modal-close::before,
.modal-close::after {
background-color: #ff6f00 !important;
width: 50% !important;
height: 2px !important;
left: 50% !important;
top: 50% !important;
transform-origin: center !important;
}
.modal-close::before {
transform: translateX(-50%) translateY(-50%) rotate(45deg) !important;
}
.modal-close::after {
transform: translateX(-50%) translateY(-50%) rotate(-45deg) !important;
}
.modal-close:hover::before,
.modal-close:hover::after {
background-color: white !important;
}
.x-news-section {
padding: 2rem 1rem;
background: linear-gradient(90deg, rgba(29, 161, 242, 0.8) 0%, rgba(33, 150, 243, 0.8) 100%);
text-align: center;
position: relative;
transform: translateZ(0);
}
@media screen and (max-width: 768px) {
.x-news-section {
padding: 2rem 0.5rem;
}
}
.x-news-card {
background: #ffffff;
border-radius: 12px;
padding: 2rem;
max-width: 600px;
margin: 0 auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
}
@media screen and (max-width: 768px) {
.x-news-card {
padding: 1.5rem 0.8rem;
}
}
.x-news-header {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
margin-bottom: 1.5rem;
font-family: "Fredoka", sans-serif;
font-size: 1.6rem;
font-weight: 900;
color: #2196f3;
}
.x-news-header i {
font-size: 1.6rem;
}
.x-news-content {
position: relative;
text-align: center;
}
.x-news-divider {
width: 80%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(29, 161, 242, 0.3), transparent);
margin: 2rem auto;
border-radius: 1px;
}
.schedule-section {
padding: 2rem 1rem;
background: linear-gradient(90deg, rgba(255, 193, 7, 0.8) 0%, rgba(255, 152, 0, 0.8) 100%);
text-align: center;
position: relative;
}
@media screen and (max-width: 768px) {
.schedule-section {
padding: 2rem 0.5rem;
}
}
.schedule-card {
background: #ffffff;
border-radius: 12px;
padding: 2rem;
max-width: 1000px;
margin: 0 auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
}
@media screen and (max-width: 768px) {
.schedule-card {
padding: 1.5rem 0.8rem;
}
}
.schedule-header {
font-family: "Fredoka", sans-serif;
font-size: 1.6rem;
font-weight: 900;
color: #ff9800;
margin-bottom: 0.7rem;
}
.schedule-year {
font-family: "Fredoka", sans-serif;
font-size: 1.2rem;
font-weight: 700;
color: #333;
margin-top: 0.3rem;
}
@media screen and (min-width: 1024px) {
.calendar-day {
height: 140px;
}
.calendar-header {
padding: 1.2rem 0.8rem;
font-size: 1.1rem;
}
.zone-event-overlay {
font-size: var(--zone-event-font-size);
min-height: var(--zone-event-min-height);
height: auto;
padding: 0.2rem 0;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
text-align: center;
line-height: 1.2;
}
.zone-event-overlay.second {
margin-top: 1.2rem;
}
}
.zone-event-overlay {
display: flex;
align-items: center;
justify-content: center;
font-family: "Fredoka", sans-serif;
font-size: var(--zone-event-font-size);
font-weight: 700;
color: white;
text-shadow: var(--zone-event-text-shadow);
border-radius: var(--zone-event-border-radius);
margin: var(--zone-event-margin);
z-index: 10;
min-height: var(--zone-event-min-height);
height: auto;
position: absolute;
top: 2.5rem;
left: 0;
right: 0;
padding: 0.2rem 0;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
text-align: center;
line-height: 1.2;
}
.zone-event-overlay.rock {
background: linear-gradient(45deg, var(--zone-rock), #ff8a65);
}
.zone-event-overlay.fantasy {
background: linear-gradient(45deg, var(--zone-fantasy), #64b5f6);
}
.zone-event-overlay.future {
background: linear-gradient(45deg, var(--zone-future), #26a69a);
}
.zone-event-overlay.water {
background: linear-gradient(45deg, var(--zone-water), #42a5f5);
}
.zone-event-overlay.horror {
background: linear-gradient(45deg, var(--zone-horror), #78909c);
}
.zone-event-overlay.food {
background: linear-gradient(45deg, var(--zone-food), #ffd54f);
}
.zone-event-overlay.space {
background: linear-gradient(45deg, var(--zone-space), #5c6bc0);
}
.zone-event-overlay.castle {
background: linear-gradient(45deg, var(--zone-castle), #f06292);
}
.zone-event-overlay.second {
top: 4rem;
}
.last-day-container {
margin-top: 1.2rem;
padding: 0.8rem 1.2rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
position: relative;
background: linear-gradient(135deg, #fff5f5 0%, #f5fff5 50%, #f5f5ff 100%);
border: 3px dashed #ffb3ba;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(255, 179, 186, 0.2);
}
.last-day-date {
display: flex;
align-items: baseline;
gap: 0.3rem;
}
.last-day-date .date-number {
font-size: 1.5rem;
font-weight: bold;
color: #ff4444;
font-family: "Fredoka", sans-serif;
}
.last-day-date .date-label {
font-size: 0.85rem;
color: #ff4444;
font-weight: bold;
}
.last-day-zones {
display: flex;
gap: 0.8rem;
}
.last-day-zone {
padding: 0.4rem 1rem;
border-radius: 6px;
color: white;
font-weight: bold;
font-size: 0.85rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
font-family: "Fredoka", sans-serif;
}
.last-day-zone.extra {
background: linear-gradient(45deg, var(--zone-extra), var(--zone-extra-end));
}
.last-day-zone.finale {
background: linear-gradient(45deg, var(--zone-finale), var(--zone-finale-end));
}
.pop-month {
display: inline-block;
font-size: 1.5rem;
font-weight: 900;
color: #ff9800;
background: #fff3cd;
border-radius: 0.7em;
padding: 0.1em 0.7em;
margin-left: 0.3em;
margin-right: 0.1em;
box-shadow: 0 1px 4px rgba(255, 193, 7, 0.1);
letter-spacing: 0.08em;
vertical-align: middle;
text-shadow: none;
border: 2px solid #ffecb3;
}
.pop-month-num {
font-size: 2.3rem;
font-weight: 900;
color: #ff6f00;
vertical-align: baseline;
letter-spacing: 0.03em;
margin-left: 0.15em;
margin-right: 0.1em;
}
.sew-map-button-container {
text-align: center;
margin: 2rem auto 1rem;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.sew-map-btn {
background: linear-gradient(135deg, #ff6f00 0%, #ff9800 100%);
color: white;
border: none;
padding: 0.8rem 3rem;
font-size: 1.1rem;
font-weight: 700;
border-radius: 30px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(255, 111, 0, 0.3);
font-family: "Fredoka", sans-serif;
}
.sew-map-btn:hover {
background: linear-gradient(135deg, #ff8a00 0%, #ffab00 100%);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(255, 111, 0, 0.4);
}
.sew-map-btn i {
font-size: 1.2rem;
}
.x-hashtag-section {
margin-top: 3rem;
text-align: center;
}
.x-hashtag-title {
font-family: "Fredoka", sans-serif;
font-size: 2rem;
font-weight: 800;
color: #ff3d00;
text-align: center;
position: relative;
margin-bottom: 1.5rem;
}
.x-hashtag-title::after {
content: "";
display: block;
width: 100%;
max-width: 600px;
height: 3px;
margin: 0.3rem auto 0;
background: repeating-linear-gradient(45deg, #ff3d00, #ff3d00 10px, #00bcd4 10px, #00bcd4 20px);
border-radius: 5px;
}
.x-hashtag-links {
display: flex;
gap: 1.5rem;
justify-content: center;
}
.x-hashtag-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #1da1f2;
text-decoration: none;
font-size: 1.3rem;
font-weight: 700;
transition: color 0.2s ease;
}
.x-hashtag-link:hover {
color: #0d7ebf;
text-decoration: underline;
}
.x-hashtag-link i {
font-size: 1.4rem;
}
.sew-map-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
overflow: auto;
}
.sew-map-modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.sew-map-modal.is-closing {
display: flex;
align-items: center;
justify-content: center;
}
.sew-map-modal.active {
animation: modalFadeIn 0.15s ease-out;
}
.sew-map-modal.is-closing {
animation: modalFadeOut 0.15s ease-in;
}
.sew-map-modal.active .sew-map-modal-content {
animation: modalScaleIn 0.15s ease-out;
}
.sew-map-modal.is-closing .sew-map-modal-content {
animation: modalScaleOut 0.15s ease-in;
}
.sew-map-modal-content {
position: relative;
background-color: transparent;
margin: auto;
padding: 0;
border-radius: 0;
max-width: 90%;
max-height: 90vh;
overflow: auto;
box-shadow: none;
}
@media screen and (max-width: 768px) {
.sew-map-modal-content {
max-width: 100%;
max-height: 100vh;
}
.sew-map-button-container {
flex-direction: column;
}
.sew-map-btn {
width: 100%;
max-width: 300px;
}
}
.sew-map-modal-close {
position: fixed;
right: 20px;
top: 20px;
width: 48px;
height: 48px;
background-color: rgba(255, 255, 255, 0.95);
border: 2px solid #ff6f00;
border-radius: 50%;
cursor: pointer;
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #ff6f00;
font-weight: bold;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.sew-map-modal-close:hover {
background-color: #ff6f00;
color: white;
transform: scale(1.05);
}
.sew-map-image {
width: 100%;
height: auto;
display: block;
border-radius: 0;
}
.zone-buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.8rem;
}
.zone-detail-btn,
.zone-video-btn {
width: 100%;
padding: 0.6rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.zone-video-btn {
padding: 0.7rem 1rem;
}
.zone-detail-btn {
background: #ffffff;
color: #ff6f00;
border: 2px solid #ff9800;
}
.zone-detail-btn:hover {
background: #ff9800;
color: white;
text-decoration: none;
transform: translateY(-1px);
border-color: #ff6f00;
box-shadow: none;
}
.zone-video-btn {
background: #cccccc;
color: white;
position: relative;
}
.zone-video-btn:not(.coming-soon) {
background: linear-gradient(135deg, #b87333 0%, #ffb347 50%, #b87333 100%);
color: #fff;
text-shadow:
1px 1px 1px rgba(0, 0, 0, 0.5),
-1px -1px 1px rgba(0, 0, 0, 0.2),
1px -1px 1px rgba(0, 0, 0, 0.2),
-1px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow:
0 2px 8px rgba(184, 134, 11, 0.3),
inset 0 1px 0 rgba(255, 200, 120, 0.4);
position: relative;
overflow: hidden;
}
.zone-video-btn:hover {
background: #cccccc;
color: white;
text-decoration: none;
}
.zone-video-btn:not(.coming-soon):hover {
background: linear-gradient(135deg, #ffd700 0%, #ffa500 50%, #ffd700 100%);
box-shadow:
0 6px 20px rgba(255, 165, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.zone-video-btn i {
font-size: 0.9rem;
}
.zone-video-btn.coming-soon {
position: relative;
overflow: hidden;
background: #cccccc;
cursor: not-allowed;
pointer-events: none;
}
.zone-video-btn.coming-soon:hover {
background: #cccccc;
box-shadow: none;
}
.zone-video-btn.coming-soon::after {
content: "公開予定";
position: absolute;
top: 5px;
right: -25px;
background: #ffd600;
color: #333;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 30px;
transform: rotate(45deg);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: auto auto auto auto;
width: 100%;
border-collapse: collapse;
position: relative;
}
.calendar-header {
background: #ff9800;
color: white;
font-family: "Fredoka", sans-serif;
font-size: 1rem;
font-weight: 700;
padding: 1rem 0.5rem;
text-align: center;
border: 1px solid #e0e0e0;
}
.calendar-day {
position: relative;
border: 1px solid #e0e0e0;
background: #ffffff;
padding: 0;
}
.calendar-day.empty {
background: #f8f9fa;
border: 1px solid #e0e0e0;
}
.calendar-day.sunday {
background: #fff5f5;
}
.calendar-day.saturday {
background: #f3f8ff;
}
.calendar-day .date {
position: absolute;
top: 0.5rem;
left: 0.5rem;
font-family: "Fredoka", sans-serif;
font-size: 1.2rem;
font-weight: 700;
color: #333;
z-index: 2;
}
.calendar-day.sunday .date {
color: #ef5350;
}
.calendar-day.saturday .date {
color: #4fc3f7;
}
.calendar-day.empty .date {
display: none;
}
@media screen and (max-width: 768px) {
.calendar-day {
min-height: 130px;
}
.zone-event-overlay {
font-size: 0.65rem;
min-height: 2.2rem;
height: auto;
padding: 0.25rem 0;
top: 2.2rem;
line-height: 1.1;
max-height: 3.5rem;
overflow: hidden;
}
.zone-event-overlay.second {
top: 4.8rem;
}
.last-day-container {
flex-direction: row;
gap: 0.5rem;
margin-top: 0.8rem;
padding: 0.5rem 0.8rem;
border: 2px dashed #ffb3ba;
background: linear-gradient(135deg, #fffafa 0%, #fafff5 50%, #fafaff 100%);
}
.last-day-date .date-number {
font-size: 1.2rem;
}
.last-day-date .date-label {
font-size: 0.75rem;
}
.last-day-zones {
flex-direction: row;
gap: 0.4rem;
}
.last-day-zone {
padding: 0.3rem 0.6rem;
font-size: 0.65rem;
}
}
.sl-overlay {
background: #000000 !important;
opacity: 0.8 !important;
}
.sl-wrapper {
background: transparent !important;
}
.sl-wrapper .sl-close,
.sl-wrapper .sl-navigation button,
.sl-wrapper .sl-counter {
color: #ffffff !important;
}
.sl-wrapper .sl-navigation button:hover {
color: #cccccc !important;
}
.gallery-section {
padding: 2rem 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.gallery-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.gallery-header {
text-align: center;
font-size: 1.5rem;
color: white;
margin-bottom: 1.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.75rem;
padding: 0 1rem;
max-width: 800px;
margin: 0 auto;
justify-content: center;
}
.gallery-grid a {
display: block;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
position: relative;
z-index: 10;
}
.gallery-grid a:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.gallery-thumb {
width: 100%;
height: 100px;
object-fit: cover;
display: block;
}
@media (max-width: 768px) {
.gallery-section {
padding: 1.5rem 0;
}
.gallery-header {
font-size: 1.2rem;
margin-bottom: 1rem;
}
.gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.gallery-thumb {
height: 80px;
}
}
.participation-form-btn {
display: inline-block;
padding: 0.8rem 3.5rem;
background-color: #e53e3e;
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: bold;
font-size: 1rem;
transition: background-color 0.2s;
border: none;
cursor: pointer;
}
.participation-form-btn:hover:not(.disabled) {
background-color: #c53030;
color: white;
}
.participation-form-btn.disabled {
background-color: #a0a0a0;
cursor: not-allowed;
opacity: 0.6;
}
.submission-content .form-closed-message {
margin-top: 1rem;
color: #e53e3e;
font-size: 0.95rem;
font-weight: 600;
}
.submission-gradient-border {
background: linear-gradient(to right, #667eea, #764ba2);
padding: 2px;
margin: 1.5rem 0;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.submission-inner-card {
background: white;
border-radius: 8px;
padding: 0.8rem;
}
.submission-gradient-title {
font-size: 1.15rem;
margin: 0 0 0.7rem 0 !important;
text-align: left;
color: #333;
font-weight: 900;
background: linear-gradient(to right, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-text-stroke: 0.3px rgba(102, 126, 234, 0.5);
}
.submission-checklist {
padding: 0;
}
.submission-checklist-item {
margin: 0.5rem 0;
text-align: left;
color: #333;
font-size: 0.95rem;
}
.submission-check-icon {
color: #48bb78;
margin-right: 0.3rem;
}
.submission-highlight-red {
color: #d32f2f;
font-weight: bold;
}
.submission-highlight-blue {
color: #22863a;
font-weight: bold;
}
.submission-sub-note {
font-size: 0.8rem;
margin-left: 1.4rem;
color: #666;
display: inline-block;
margin-top: 0.1rem;
}
.submission-form-container {
text-align: center;
margin-top: 1rem;
}
.horror-active header {
background: linear-gradient(to bottom, #0f1420 0%, #4d5f85 100%);
}
.horror-active .header-title {
color: #e8e8e8;
}
.horror-active .sew-letter {
color: #f0f0f0;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}
.horror-active .letter {
color: #e8e8e8;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}
.horror-active .header-subtitle {
color: #d0d0d0;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}
.horror-decorations {
display: none;
pointer-events: none;
}
.horror-active .horror-decorations {
display: block;
}
.horror-creature {
position: fixed;
pointer-events: none;
z-index: 3;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
.bat-1 {
top: 15px;
left: 5%;
width: 25px;
opacity: 0.2;
transform: rotate(-15deg);
animation: batWing 3s ease-in-out infinite;
}
.bat-2 {
top: 15px;
left: 27.5%;
width: 20px;
opacity: 0.15;
transform: rotate(10deg);
animation: batWing 3.5s ease-in-out infinite 0.5s;
}
.bat-3 {
top: 15px;
left: 50%;
width: 30px;
opacity: 0.2;
transform: translateX(-50%) rotate(5deg);
animation: batWing 4s ease-in-out infinite 1s;
}
.bat-4 {
top: 15px;
right: 27.5%;
width: 22px;
opacity: 0.18;
transform: rotate(20deg);
animation: batWing 3.8s ease-in-out infinite 0.8s;
}
.bat-5 {
top: 15px;
right: 5%;
width: 24px;
opacity: 0.17;
transform: rotate(-20deg) scaleX(-1);
animation: batWing 4.2s ease-in-out infinite 1.3s;
}
.ghost-1 {
top: 45px;
left: 5%;
width: 40px;
opacity: 0.15;
animation: ghostFloat 5s ease-in-out infinite;
}
.ghost-2 {
top: 50px;
right: 5%;
width: 35px;
opacity: 0.12;
transform: scaleX(-1);
animation: ghostFloat2 5.5s ease-in-out infinite 1.5s;
}
@keyframes batWing {
0%,
100% {
transform: translateY(0) rotate(-15deg) scale(1);
}
50% {
transform: translateY(-5px) rotate(-10deg) scale(1.05);
}
}
@keyframes ghostFloat {
0%,
100% {
transform: translateY(0) translateX(0);
opacity: 0.15;
}
25% {
transform: translateY(-8px) translateX(12px);
opacity: 0.18;
}
50% {
transform: translateY(-5px) translateX(-8px);
opacity: 0.12;
}
75% {
transform: translateY(-10px) translateX(10px);
opacity: 0.16;
}
}
@keyframes ghostFloat2 {
0%,
100% {
transform: translateY(0) translateX(0) scaleX(-1);
opacity: 0.12;
}
25% {
transform: translateY(-8px) translateX(-10px) scaleX(-1);
opacity: 0.15;
}
50% {
transform: translateY(-5px) translateX(12px) scaleX(-1);
opacity: 0.1;
}
75% {
transform: translateY(-10px) translateX(-8px) scaleX(-1);
opacity: 0.14;
}
}
@media (max-width: 768px) {
.bat-1,
.bat-2 {
display: none;
}
.bat-3 {
top: 10px;
left: 50%;
transform: translateX(-50%) rotate(5deg);
width: 18px;
opacity: 0.22;
}
.bat-4 {
top: 10px;
left: 10px;
width: 18px;
opacity: 0.22;
}
.bat-5 {
top: 10px;
right: 10px;
width: 18px;
opacity: 0.22;
}
.ghost-1 {
top: 30px;
left: 30%;
width: 25px;
opacity: 0.2;
}
.ghost-2 {
top: 30px;
right: 30%;
width: 25px;
opacity: 0.2;
}
}
.info-notice {
background: #fff4e6;
padding: 1rem 1.5rem;
margin: 1rem auto;
max-width: 90%;
text-align: center;
box-shadow: 0 2px 4px rgba(255, 140, 66, 0.15);
border-radius: 8px;
}
.info-notice.x-theme {
background: #f7f9fa;
border-left: 2px solid #1d9bf0;
border-right: 2px solid #1d9bf0;
padding: 0.8rem 1.2rem;
box-shadow: none;
border-radius: 0;
}
.info-notice.x-theme p {
color: #14171a;
}
.info-notice:first-of-type {
margin-top: 2rem;
}
.info-notice:last-of-type {
margin-bottom: 1.5rem;
}
.info-notice p {
margin: 0;
font-size: 0.82rem;
color: #d84315;
font-weight: 500;
line-height: 1.5;
}
.info-notice.x-theme p {
font-size: 0.85rem;
}