:root {
    --color-red: #E6002D;
	--color-beige: #FBF7EF;
	--color-white: #fff;
	--color-brown: #663C23;
    --color-green: #9EBC18;
    --color-lightgreen: #E6EEC3;
    --color-pink:#FACED6;

    --font-family-en: "Chewy", system-ui;
	--font-family-num: "Oswald", sans-serif;

    --radius-inner: clamp(60px, 8cqw, 100px);
    --inner-max-width: 840px;
}

.color-white { color:var(--color-white) !important; }
.color-red   { color:var(--color-red) !important; }
.color-green { color:var(--color-lightgreen) !important; }
.bg-white { background:var(--color-white) !important; }
.bg-red   { background:var(--color-red) !important; }
.bg-green { background:var(--color-lightgreen) !important; }

main {
    em ,
    address {
        font-style:normal;
    }

    .en {
        font-size: 0.6em;
        font-family: var(--font-family-en);
        line-height: 1;
        letter-spacing: 0.11em;
        font-weight: 400;
    }
    .en:not(:has(+ span)) {
        font-size:0.9em;
    }
    .num {
        font-family: var(--font-family-num);
        font-weight: 600;
        letter-spacing: 0.1em;
    }
    .little-gap {
        gap:5px;
    }

    :is(h1, h2, h3, h4){
        > em {
            font-family: var(--font-family-en);
        }

        small {
            display:block;
        }
    }

    h1 + h2 ,
    h2 + h3 {
        margin-top:20px;
    }

    p {
        margin-top:20px;
    }

    figure {
        border-radius:20px;
    }

    .width-limiter .width-limiter {
        max-width:var(--inner-max-width);
        padding-inline:0;
    }

    .title-type-1 {
        text-align: center;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:10px;

        span *{
            font-weight: 700;
        }
    }
    .title-type-2 {
        letter-spacing: 0.1em;
        font-size:1.8em;
        padding:5px 0.5em;
        width:fit-content;
        margin-left: auto;
        margin-right: auto;

        &::after {
            content: '';
            display: block;
            width: calc(100% + 1em);
            margin-left: -0.5em;
            margin-top:10px;
            height: 2px;
            background-image: linear-gradient(to right, var(--color-white) 4px, transparent 4px);
            background-size: 6px 2px;
            background-repeat: repeat-x;
            background-position: left bottom;
        }
    }
    .title-type-3 {
        letter-spacing: 0.1em;
        font-size:1.8em;
        padding:5px 0;
        text-align:left;

        &::after {
            content: '';
            display: block;
            width: 100%;
            margin-left: 0;
            margin-top:20px;
            height: 2px;
            background-image: linear-gradient(to right, var(--color-red) 4px, transparent 4px);
            background-size: 6px 2px;
            background-repeat: repeat-x;
            background-position: left bottom;
        }
    }
    .title-type-4 {
        font-size:1.6em;
        border-radius: 20px;
        padding:10px;
        text-align: center;
        margin-top:30px;
        margin-bottom:30px;
    }

    section :has(> div:has(.red-box)) {
        padding-top:0;
    }

    .red-box {
        background:var(--color-red);
        color:var(--color-white);
        text-align:center;

        > :is(div, article):not(.width-limiter) {
            max-width:var(--inner-max-width);
            margin-left: auto;
            margin-right: auto;
        }
    }

    section > .red-box {
        max-width:calc(100% - (var(--ts-space) * 2));
        margin-left:auto;
        margin-right:auto;
        border-radius:var(--radius-inner);
    }

    .pink-border-box {
        margin-top:40px;
        margin-left: auto;
        margin-right: auto;
        max-width:1020px;
        background: var(--color-white);
        color:var(--color-brown);
        padding: 50px 8cqw;
        border: 10px solid var(--color-pink);
    }

    .red-border-box {
        margin-top:40px;
        margin-left: auto;
        margin-right: auto;
        max-width:1000px;
        background: var(--color-white);
        color:var(--color-brown);
        padding: 20px;
        border: 2px solid var(--color-red);
        border-radius:var(--radius-inner);
    }

    .entry-button {
    	display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 400px;
        max-width:100%;
        margin-inline: auto;
        padding: 20px;
        background: var(--color-white);
        color: var(--color-red);
        font-weight: 700;
        font-size: 20px;
        letter-spacing: 0.2em;
        white-space: nowrap;
        border: solid 2px var(--color-white);
        border-radius: 100px;
        box-shadow: 0 6px 0 var(--color-pink);
        transition:0.1s;
        margin-bottom:6px;

        &:hover {
            box-shadow:none;
            margin-top:6px;
            margin-bottom:0;
        }
    }

    .cards {
        max-width:calc(100% - (var(--ts-space) * 2));
        margin-left:auto;
        margin-right:auto;

        .ts-grid {
            gap:10px;
        }

        article {
            padding:20px;
            border:solid 8px var(--color-red);
            background:var(--color-white);
            border-radius:30px;

            h3 {
                font-size:1.2em;
                border-radius:10px;
                margin-bottom:0;
            }
            h4 {
                text-align:center;
                margin-top:20px;
                font-size:8cqw;
            }
            p {
                text-align:center;
                margin-top:10px;
            }
        }
    }

    @media (width <= 720px) {
        .width-limiter:has(> .red-box) {
            padding-inline:0;
        }
        section > .red-box {
            max-width:100%;
        }
    }
    @media (width <= 520px) {
        .title-type-3 {
            text-align: center;
        }
        .title-type-4 {
            font-size:1.2em;
            border-radius:10px;
        }

        .red-box {
            padding-top:60px;
            padding-bottom:40px;
        }
        .pink-border-box {
            border-radius: 60px;
            padding: 40px 20px;
        }
    }
}


#loadingOverlay {
    position: fixed;
    top:0; left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    visibility:hidden;
}
.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px; height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin { 100% { transform: rotate(360deg); } }