@charset "UTF-8";

:root {
    /* Typography Scale Bootstrap5 にぶつける*/
    --font-size-sm: clamp(0.8rem, 0.16vw + 0.76rem, 0.89rem);
    --font-size-base: clamp(1rem, 0.33vw + 0.93rem, 1.19rem);
    --font-size-md: clamp(1.25rem, 0.58vw + 1.12rem, 1.58rem);
    --font-size-lg: clamp(1.56rem, 0.95vw + 1.35rem, 2.11rem);
    --font-size-xl: clamp(1.95rem, 1.49vw + 1.62rem, 2.81rem);
    --font-size-xxl: clamp(2.44rem, 2.27vw + 1.93rem, 3.75rem);
    --font-size-xxxl: clamp(3.05rem, 3.38vw + 2.29rem, 5rem);
    --letter-spacing-sm: -0.05em;

    /* Event Color Palette */
    --event-color-primary: #FF4713;
    --event-color-primary-light: #ff6439;
    --event-color-secondary: #00425C;
    --event-color-accent: #FFF9DF;
    --event-color-text-primary: #1b3778;
    --event-color-facebook: #1877f2;
    --event-color-twitter: #1d1d1d;
    --event-color-line: #00c300;
}

#Gremlins_stripe {
    background-image: repeating-linear-gradient(315deg, var(--event-color-primary) 0, var(--event-color-primary) 45px, var(--event-color-primary-light) 45px, var(--event-color-primary-light) 92px);
    background-attachment: fixed;
    height: 100%;
}

body {
    font-family: 'Noto Sans JP';
    min-width: 375px;
}

.font-dela-gothic-one {
    font-family: 'Dela Gothic One', sans-serif !important;
    font-weight: 400;
    font-style: normal;
}

.bg-event {
    background-color: var(--event-color-primary);
}

.bg-event01 {
    background-color: var(--event-color-secondary);
}

.text-event01 {
    color: var(--event-color-secondary);
}

.border-event01 {
    border-color: var(--event-color-secondary);
}

.bg-member {
    background-color: var(--event-color-accent);
}

.bg-table {
    background-color: var(--event-color-primary);
}

.border-table {
    border-color: var(--event-color-primary);
}

.sns-facebook {
    color: var(--event-color-facebook);
    transition: 0.5s;
}

.sns-twitter {
    color: var(--event-color-twitter);
    transition: 0.5s;
}

.sns-line {
    color: var(--event-color-line);
    transition: 0.5s;
}

a:hover {
    opacity: 0.5;
    transition: 0.8s;
}

.text-truncate_x {
    --line: 2;
    display: -webkit-box;
    -webkit-line-clamp: var(--line);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.title_h1 {
    font-size: var(--event-font-size-xxl);
    letter-spacing: var(--event-letter-spacing-sm);
    font-family: 'Rammetto One', cursive;
    color: var(--event-color-text-primary);
}

.toast-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 1050;
    /* Toast positioning for front display */
}