/*common*/
body {
    width: 100%;
}

.black_bordered {
    border: 5px solid black;
    background: var(--white);
    border-bottom-width: 10px;
}

.black_bg_button {
    display: flex;
    position: relative;
    align-items: center;

    width: fit-content;

    margin: auto;
    margin-top: 32px;
    padding: 16px 64px;

    color: var(--white);
    background: var(--black);
}

.black_bg_button::after {
    content: "";
    display: inline-block;

    width: 0.5rem;
    height: 1rem;
    margin: auto;
    margin-left: 0.5rem;

    background-color: var(--white);
    clip-path: polygon(0 0, 100% 50%, 0 100%, 0 75%, 50% 50%, 0 25%);
}

/***********************************************************************************
************ Heroes_about ***********************************************************
***********************************************************************************/

#Heroes_about {
    position: relative;
    padding-bottom: 180px;
    background-color: var(--yellow);
    background-repeat: repeat;
    background-image:
        radial-gradient(#FF330011 25%, transparent 25%),
        radial-gradient(#FF330011 25%, transparent 25%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;

    border-bottom: 5px solid black;
}

#Heroes_about .bg::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    --border-color: #ffFF88;
    /* ランダムな太さの先を重ねる */
    background-image:
        repeating-conic-gradient(transparent 0,
            transparent 6.5deg,
            var(--border-color) 6.5deg,
            var(--border-color) 8deg),
        repeating-conic-gradient(transparent 0,
            transparent 10deg,
            var(--border-color) 10deg,
            var(--border-color) 10deg),
        repeating-conic-gradient(transparent 0,
            transparent 2.5deg,
            var(--border-color) 2.5deg,
            var(--border-color) 4deg),
        repeating-conic-gradient(transparent 0,
            transparent 1deg,
            var(--border-color) 1deg,
            var(--border-color) 1.5deg);
    mask-image: radial-gradient(transparent 0%,
            transparent 50%,
            white 70%,
            white);
    -webkit-mask-image: radial-gradient(transparent 0%,
            transparent 50%,
            white 70%,
            white);
    z-index: 0;
}

#Heroes_about .container {
    padding-top: 40px;
    position: relative;
    z-index: 2;
    max-width: unset;
}

@media(max-width:992px) {
    #Heroes_about .container {
        margin: 0;
        padding: 40px 2% 0;
    }
}

@media(max-width:768px) {
    #Heroes_about {
        padding-bottom: 32px;
    }
}

/***********title***********/

#Heroes_about .content.title {
    position: relative;
    max-width: 1000px;
    margin: auto;
    width: 100%;
    padding: 9px;
    border: 5px solid black;
    border-bottom-width: 10px;
    background-color: var(--white);
    z-index: 2;
}

#Heroes_about .content.title::before,
#Heroes_about .content.title::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: contain;
}

#Heroes_about .content.title::before {
    background-image: url(../../assets/images/warpLeft.png);
    background-position: left;
}

#Heroes_about .content.title::after {
    background-image: url(../../assets/images/warpRight.png);
    background-position: right;
}

#Heroes_about h2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

#Heroes_about h2 img {
    height: 64px;
    width: auto;
}

#Heroes_about h2::after {
    display: inline-block;
    content: attr(data);
    font-size: 12px;
    color: var(--black);
    margin: auto 6px;
}

@media (max-width:992px) {
    #Heroes_about h2 {
        display: block;
        margin: auto;
    }

    #Heroes_about h2 img {
        margin: auto;
        height: auto;
        max-height: 40px;
    }

    #Heroes_about h2::after {
        display: block;
        font-size: 12px;
        margin: auto;
    }
}

/***********description***********/

#Heroes_about .wrapper.description {
    max-width: 1000px;
    margin: auto;
    padding-top: 32px;
}

#Heroes_about .wrapper.description h1 {
    font-size: 32px;
    width: 50%;
    text-align: left;
}

#Heroes_about .wrapper.description p {
    width: 50%;
    text-align: left;
}

/***********slider***********/

#Heroes_about .slick_character_slider {
    height: 500px;
}

#Heroes_about .slick-track {
    display: flex;
    height: 500px;
    align-items: baseline;
}

#Heroes_about .slick-arrow {
    position: absolute;
    font-size: 0;

    width: 70px;
    height: 70px;

    margin: auto;
    background-position-y: center;
    background-size: contain;
    z-index: 3;
}

#Heroes_about .slick-arrow:hover:not(.slick-disabled) {
    border: 2px solid var(--yellow);
}

#Heroes_about .slick-arrow::after {
    content: "";
    position: absolute;

    width: 30px;
    height: 30px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background: white;
}

#Heroes_about .slick-arrow.slick-disabled::after {
    background: var(--gray);
}

#Heroes_about .slick-arrow:hover:after {
    background: var(--yellow);
}

#Heroes_about .slick-arrow.slick-disabled:hover:after {
    background: var(--gray);
}

#Heroes_about .slick-arrow:active::after {
    background: red;
}

#Heroes_about .slick-arrow.slick-prev {
    background: black;
    left: 2%;
    top: 50%;
    transform: translateY(-50%);
}


#Heroes_about .slick-arrow.slick-prev::after {
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

#Heroes_about .slick-arrow.slick-next {
    background: black;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
}

#Heroes_about .slick-arrow.slick-next::after {
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/***********slider item***********/

#Heroes_about .character_item img {
    max-height: 500px;
    margin: auto;
    padding: 32px 16px;
    filter: drop-shadow(0 0 8px white) drop-shadow(0 0 8px white) drop-shadow(0 0 8px white) drop-shadow(0 0 8px white);
}

#Heroes_about .character_item .character_name {
    display: block;
    transform: translateY(-32px);
}

#Heroes_about .character_item .character_name::before {
    content: "";
    display: inline-block;

    width: 32px;
    height: auto;
    aspect-ratio: 1/1;

    background-image: url(../assets/images/icon_star.svg);
}

@media (max-width:992px) {
    #Heroes_about .wrapper.description {
        padding-top: 3%;
    }

    #Heroes_about .wrapper.description h1 {
        width: 100%;
    }

    #Heroes_about .wrapper.description p {
        width: 100%;
    }
}

/***********************************************************************************
************ Introduction_flow *****************************************************
***********************************************************************************/

#Introduction_flow {
    /* position: absolute; */
    z-index: 5;

    transform: translate(0, -50%);

    width: 95%;
    height: auto;

    margin: auto;
}

#Introduction_flow .container {
    padding: 32px;
}

#Youtube_movie #Introduction_flow .wrapper {
    display: flex;
    text-align: left;
    gap: 32px;
    margin: 0;
}

@media (max-width:992px) {
    #Introduction_flow {
        right: 3%;
        width: 94%;
    }

    #Introduction_flow .container {
        padding: 3%;
    }

    #Youtube_movie #Introduction_flow .wrapper {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        font-size: 14px;
    }
}

@media (max-width:768px) {
    #Introduction_flow {
        transform: translate(0, -32px);
        width: 100%;
        right: 0;
    }
}

/***********************************************************************************
************ Youtube_movie *********************************************************
***********************************************************************************/

#Youtube_movie {
    /* padding-top: 200px; */
    padding-bottom: 64px;
    background-image: url(../assets/images/about/bg.png);
    background-size: cover;
    border-bottom: 5px solid black;
}

#Youtube_movie iframe {
    width: 50%;

    height: auto;
    aspect-ratio: 16/9;
}

#Youtube_movie .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: left;
    margin-top: 32px;
}

#Youtube_movie .wrapper .contents .name {
    font-size: 1.5rem;
}

#Youtube_movie .wrapper .contents {
    display: flex;
}

#Youtube_movie .wrapper .contents span.spike {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;

    height: 64px;
    aspect-ratio: 1/1;

    font-size: 1rem;
    background-image: url(../assets/images/about/needle_bg.png);
    background-size: contain;
}

#Youtube_movie .wrapper .content {
    padding-top: 16px;
}

#Youtube_movie .wrapper .content small {
    font-size: 10px;
}

@media (max-width:992px) {
    #Youtube_movie iframe {
        width: 90%;
    }
}
@media (max-width:768px) {
    #Youtube_movie .wrapper {
        grid-template-columns: 1fr;
        text-align: left;
    }
}

/***********************************************************************************
************ About_Episode *********************************************************
***********************************************************************************/

#About_Episode {
    --balloon: polygon(49% 3%, 56% 15%, 66% 3%, 66% 18%, 82% 6%, 75% 18%, 92% 13%, 79% 30%, 95% 32%, 82% 43%, 95% 48%, 76% 55%, 94% 70%, 75% 70%, 79% 86%, 65% 75%, 60% 87%, 49% 74%, 34% 95%, 36% 68%, 18% 75%, 24% 60%, 4% 63%, 19% 49%, 8% 44%, 21% 38%, 7% 26%, 24% 29%, 13% 11%, 33% 21%, 29% 5%, 41% 16%);

    position: relative;

    padding: 32px;
    padding-top: 32px;
    padding-bottom: 64px;

    background-color: var(--white);
    background-repeat: repeat;
    background-image:
        radial-gradient(#00333311 25%, transparent 25%),
        radial-gradient(#00333311 25%, transparent 25%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
}

#About_Episode h1 {
    font-size: 32px;
    padding: 32px;
}

#About_Episode .container {
    position: relative;
    z-index: 1;
}

#About_Episode .wrapper {
    gap: 1rem;
}

#About_Episode .bg_balloons {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

#About_Episode .bg_balloons .balloon {
    position: absolute;
    clip-path: var(--balloon);
    background-color: #000000;
}

#About_Episode .bg_balloons .balloon::after {
    content: "";
    position: absolute;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 85%;
    height: 85%;

    clip-path: var(--balloon);
    background-color: var(--white);

    background-repeat: repeat;
    background-image:
        radial-gradient(#000 15%, transparent 15%),
        radial-gradient(#000 15%, transparent 15%);

    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
}

#About_Episode .bg_balloons .balloon.balloon1 {
    width: 400px;
    height: 400px;
    left: calc(40vw - 800px);
    top: -150px;
}

#About_Episode .bg_balloons .balloon.balloon2 {
    width: 250px;
    height: 250px;
    right: calc(50vw - 800px);
    top: -100px;
}

#About_Episode .bg_balloons .balloon.balloon3 {
    width: 500px;
    height: 500px;
    right: -200px;
    bottom: -200px;
}

#About_Episode .black_bordered {
    position: relative;
    margin-top: 32px;
}

#About_Episode .black_bordered .content {
    text-align: left;
    padding: 32px 0;
}

#About_Episode .black_bordered .content .description {
    margin-top: 16px;
}

#About_Episode .black_bordered .content .title {
    font-size: 1.2rem;
}

#About_Episode .black_bordered img {
    height: 100%;
    width: auto;
    aspect-ratio: 3/2;
}

#About_Episode .black_bordered .content.image {
    width: fit-content;
    height: 200px;
}

@media (max-width:992px) {
    #About_Episode {
        padding: 0;
        padding-bottom: 64px;
    }

    #About_Episode .wrapper {
        display: flex;
        flex-direction: column;
        padding: 0 2%;
    }

    #About_Episode .black_bordered .content {
        padding: 8px 0;
    }

    #About_Episode .black_bordered .content.image {
        width: 80%;
        height: fit-content;
        padding: 0 0 32px 0;
        margin: auto;
    }

    #About_Episode .black_bordered img {
        height: auto;
        max-height: 70vh;
        max-width: 100%;
        aspect-ratio: 3/2;
        margin: auto;
    }

}