@charset "UTF-8";

/* #region all */
@media (min-width: 1440px) {
	html {
		font-size: calc(1440 / 1440 * 1px);
	}
}
@media (min-width: 1201px) and (max-width: 1440px) {
	html {
        font-size: calc(100/1440*1vw);
	}
}
@media (max-width: 1200px) {
	html {
		font-size: calc(1200 / 1440 * 1px);
	}
}
html > * {
	font-size: 16px;
}
.wrap {
    min-width: 1200px;
    overflow: clip;
    position:relative;
    margin-top: -8px;
    background: #FFE100;
    font-family: "Noto Sans Japanese", sans-serif;
    .font_righteous {
        font-family: "Righteous", "Noto Sans Japanese", sans-serif;
    }
    .frame {
        position:absolute;
        z-index:10;
        top:0;
        left:0;
        width:100%;
        height:100%;
        border: 24rem solid #FFE100;
        border-bottom: none;
        box-sizing: border-box;
        pointer-events: none;
    }
}
#footer {
    z-index: 10;
    margin-top: -7px;
}
/* #endregion all */
/* #region mv */
.mv {
    position: relative;
    overflow: hidden;
    clip-path: inset(1px);
    height: 1197rem;
    background: #e70014;
    backface-visibility: hidden;
    transform: translateZ(0);
    &::after {
        content: "";
        position: absolute;
        bottom: 0%;
        left: 50%;
        display: block;
        width: calc(110% - 24rem * 2);
        padding-top: 100%;
        border-radius: 50%;
        transform: translate(-50%, 57.5%) scale(1, 0.4);
        background: #FFE100;
    }
    .mv_ttl_wrap {
        position: relative;
        margin-top: 180rem;
        margin-inline: auto;
        width: 1100rem;
        .mv_ttl {
            width: 768rem;
            height:auto;
        }
        .mv_pop {
            position: absolute;
            top: -238rem;
            right: 90rem;
            width: 546rem;
            height: auto;
        }
        .mv_hoshio {
            position: absolute;
            top: 91rem;
            right: -42rem;
            width: 331rem;
            height: auto;
        }
    }
    .mv_dec_1 {
        position: absolute;
        top: 63rem;
        left: calc(50% - 635rem);
        width: 132rem;
        height: auto;
    }
    .mv_dec_2 {
        position: absolute;
        top: 88rem;
        right: calc(50% - 630rem);
        width: 198rem;
        height: auto;
    }
    .mv_dec_3 {
        position: absolute;
        bottom: 298rem;
        left: calc(50% - 660rem);
        width: 187rem;
        height: auto;
    }
    .mv_dec_4 {
        position: absolute;
        bottom: 308rem;
        right: calc(50% - 654rem);
        width: 196rem;
        height: auto;
    }
}
/* #endregion mv */
/* #region contents */
.about {
    position: relative;
    margin-top: -372rem;
    .about_box {
        box-sizing: border-box;
        position: relative;
        width: 980rem;
        margin-inline: auto;
        background:#fff;
        border-radius: 46rem;
        border: 16rem solid #e70014;
        padding: 85rem 64rem 64rem;
        &::before {
            content: "";
            position: absolute;
            top: 10rem;
            right: 8rem;
            bottom: 10rem;
            left: 8rem;
            border: 4rem solid #e70014;
            border-radius: 20rem;
            pointer-events: none;
        }
        .about_box_ttl {
            position: relative;
            text-align: center;
            margin-top: -148rem;
            .about_ttl {
                width:672rem;
                height:auto;
            }
        }
        .about_box_txt {
            margin-top: 60rem;
            font-size: 20rem;
            font-weight: 700;
            line-height:1.7;
            .marker {
                background: linear-gradient(transparent 60%,#FFE100 60%)
            }
        }
    }
}
.activity {
    position: relative;
    padding-bottom: 137rem;
    .activity_box {
        position: relative;
        margin-top: 118rem;
        width: 1100rem;
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr 562rem;
        grid-template-rows: 127rem 1fr;
        grid-template-areas:
        "ttl list" 
        "links list";
        .activity_box_ttl {
            grid-area: ttl;
            .activity_box_ttl_en {
                display: block;
                margin-top: 2rem;
                color: #E50012;
                font-size: 72rem;
                font-weight: 400;
                line-height: 1;
                letter-spacing: calc(7.2/72*1em);
            }
            .activity_box_ttl_jp {
                display: block;
                color: #000;
                font-size: 24rem;
                font-weight: 700;
                line-height: 1;
                margin-top: 16rem;
            }
        }
        .activity_box_contents {
            grid-area: list;
            margin-top: 6rem;
            .activity_box_contents_list {
                & > li + li {
                    margin-top: 29rem;
                }
                & > li {
    
                    &:nth-child(odd) {
                        --color: #E60013;
                    }
                    &:nth-child(even) {
                        --color: #9CC93A;
                    }
                    & > dl {
                        & > dt {
                            position: relative;
                            background: #fff;
                            border-radius: 9999px;
                            height: var(--item-size);
                            display: flex;
                            align-items: center;
                            --item-size: 55rem;
                            --circle-size: 64rem;
                            .activity_box_contents_item_num {
                                position: absolute;
                                left: 0rem;
                                top: calc((var(--item-size) - var(--circle-size)) / 2);
                                border-radius: 50%;
                                width: var(--circle-size);
                                height: var(--circle-size);
                                background: var(--color);
                                color:#fff;
                                font-size: 32rem;
                                font-weight: 700;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                            .activity_box_contents_item_txt {
                                padding-left: 82rem;
                                font-size: 20rem;
                                font-weight: 700;
                                line-height: 1.7;                       
                            }
                        }
                        & > dd {
                            .activity_box_contents_item_detail {
                                font-size: 18rem;
                                font-weight: 700;
                                line-height: 1.7;
                                margin-left: 80rem;
                                margin-top: 22rem;
                            }
                        }
                    }
                }
            }
        }
        .activity_box_links {
            grid-area: links;
            .activity_box_links_list {
                margin-top: 68rem;
                font-size: 20rem;
                font-weight: 700;
                line-height: 1.7;
                & > li + li {
                    margin-top: 10rem;
                }
                & > li {
                    a {
                        position:relative;
                        color: inherit;
                        text-decoration: none;
                        padding-block:  17rem;
                        padding-right: 35rem;
                        background: linear-gradient(#E50012 0 0) left bottom / 100% 4rem no-repeat;
                        &::after {
                            content: "";
                            display: block;
                            margin-block: auto;
                            position: absolute;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            width: 13rem;
                            height: 22rem;
                            background: #E50012;
                            clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
                        }
                        @media (hover: hover) {
                            transition: background-size 0.2s ease;
                            &::after {
                                transition: transform 0.2s;
                            }
                            &:hover {
                                background-position: right bottom;
                                background-size: 0 4rem;
                                transition: background-size 0.2s ease;
                                &::after {
                                    transform: translateX(50%);
                                }
                            }
                        }
                    }
                }

            }
        }
    
    }
    .activity_chara {
        position: absolute;
        bottom: 15rem;
        left: calc(50% - 550rem);
        width: 197rem;
        height: auto;
    }
}
/* #endregion contents */