/*  reset
--------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*  common
--------------------------------*/
#fp-contents *,
#fp-contents *::before,
#fp-contents *::after {
  box-sizing: border-box;
}
#fp-contents {
    font-family: "BIZ UDPMincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size: min(20px, 2vw);
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0.1em;
    color: #fff;
    position: relative;
}
#fp-contents::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
    width: 100vw;
    height: 100vh;
    background: url(../img/bg_pc.jpg) no-repeat center;
    background-size: cover;
}
#fp-contents img {
    width: 100%;
    vertical-align: bottom;
}
#fp-contents a {
    text-decoration: unset;
}
.sp {
    display: none;
}

@keyframes scroll_in {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
.scroll_in {
    opacity: 0;
}
.scroll_fade_in {
    animation: scroll_in 0.6s ease-out 0.3s forwards;
}

.area_inner {
    width: min(1000px, 95%);
    margin: 0 auto;
}

/* ------- square_area -------*/
.square_area {
    background: url(../img/line_area_top.png) repeat-x top left, url(../img/line_area_bottom.png) repeat-x bottom left, url(../img/line_area_left.png) repeat-y top left, url(../img/line_area_right.png) repeat-y top right, rgba(32, 22, 93, 0.8);
    background-size: 100% min(16px, 1vw), 100% min(16px, 1vw), min(16px, 1vw) 100%, min(16px, 1vw) 100%;
    padding-bottom: 114px;
    position: relative;
}
.square_area .ttl_area {
    height: min(182px, 15vw);
    background: url(../img/square_ashirai_top.png) no-repeat center bottom;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: min(60px, 3.9vw);
    animation: bg_size 5s ease 0.3s infinite;
}
.square_area h2 {
    height: 50px;
    margin-top: min(70px, 4.6vw);
}
#fp-contents .square_area h2 img {
    width: unset;
    height: 100%;
}

@keyframes shake {
    0% {
        rotate: 0deg;
    }
    5% {
        rotate: -4deg;
    }
    10% {
        rotate: 0deg;
    }
    15% {
        rotate: -4deg;
    }
    20% {
        rotate: 0deg;
    }
    100%{
        rotate: 0deg;
    }
}
.square_area::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: min(254px, 16.7vw);
    height: min(167px, 11vw);
    background: url(../img/square_kingyo.png) no-repeat bottom right;
    background-size: contain;
    filter: drop-shadow(0px 3px 10px rgba(255, 255, 255, 0.4));
    animation: shake 3s ease 0.6s infinite;
}
@keyframes bg_size_bottom {
    0% {
        background-position-y: top 0;
    }
    50%{
        background-position-y: top 20px;
    }
    100%{
        background-position-y: top 0;
    }
}
.square_area::after {
    content: '';
    display: block;
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    background: url(../img/square_ashirai_bottom.png) no-repeat center;
    background-size: contain;
    animation: bg_size_bottom 5s ease 0.3s infinite;
}
.square_area .txt_area {
    width: 85%;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* ------- noren_area -------*/
.noren_area {
    position: relative;
    margin-top: 130px;
}
.noren_area::before {
    content: '';
    display: block;
    width: 100%;
    height: 15px;
    background: url(../img/line_red.jpg) repeat-x center;
    background-size: contain;
    animation: red_line 80s linear 0.3s infinite;
}
.noren_area::after {
    content: '';
    display: block;
    width: 100%;
    height: 15px;
    background: url(../img/line_red.jpg) repeat-x center;
    background-size: contain;
    animation: red_line 80s linear 0.3s infinite;
}

.noren_area .area_wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(32, 22, 93, 0.6);
    z-index: -2;
}

@keyframes bg_size {
    0% {
        background-position-y: top 0;
    }
    50%{
        background-position-y: top -20px;
    }
    100%{
        background-position-y: top 0;
    }
}
.noren_area .area_wrapper {
    background: url(../img/area_ashirai.png) repeat-y top center;
    background-size: 100%;
    padding-bottom: 130px;
    /* margin-bottom: 130px; */
    animation: bg_size 5s ease 0.3s infinite;
}
.noren_area .ttl_area {
    min-height: 238px;
    position: relative;
    background: url(../img/ttl_noren_bottom.png) repeat-x left bottom;
    background-size: 1376px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.noren_area .ttl_area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background: url(../img/ttl_noren_top.png) repeat top left;
    background-size: 1376px;
    z-index: -1;
}
.noren_area .ttl_area h2 {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}
@keyframes rotate {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}
.noren_area .ttl_area h2::before {
    content: '';
    display: block;
    position: absolute;
    top: 45%;
    left: min(121px, 12.1vw);
    width: min(121px, 12.1vw);
    height: 140px;
    background: url(../img/noren_kingyo.png) no-repeat center;
    background-size: contain;
    animation: rotate 8s linear infinite;
}
@keyframes shake02 {
    0% {
        rotate: 23deg;
    }
    5% {
        rotate: 20deg;
    }
    10% {
        rotate: 23deg;
    }
    15% {
        rotate: 20deg;
    }
    20% {
        rotate: 23deg;
    }
    100%{
        rotate: 23deg;
    }
}
.noren_area .ttl_area h2::after {
    content: '';
    display: block;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    right: min(180px, 18vw);
    width: min(121px, 12.1vw);
    height: 140px;
    background: url(../img/noren_uchiwa.png) no-repeat center;
    background-size: contain;
    animation: shake02 3s ease 0.3s infinite;
}
.noren_area .area_inner {
    padding-top: 100px;
}

.menu_area li:nth-of-type(2) a, .contents_btn figure:nth-of-type(2) {
    animation-delay: 0.3s;
}
.menu_area li:nth-of-type(3) a, .contents_btn figure:nth-of-type(3) {
    animation-delay: 0.4s;
}
.menu_area li:nth-of-type(4) a {
    animation-delay: 0.6s;
}

/*  mv_area
--------------------------------*/
.mv_area {
    width: 100%;
    max-width: 1512px;
    margin: 0 auto;
    position: relative;
}
.mv_area .area_inner {
    width: min(1000px, 73vw);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.mv_logo_area {
    width: 100%;
    display: flex;
    margin-top: min(104px, 6.8vw);
}

/*  アニメーション
--------------------------------*/
@keyframes mv_fade_in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes mv_scale {
    0% {
        scale: 1;
    }
    100% {
        scale: 1.05;
    }
}
.mv_logo_area {
    animation: mv_scale 5s ease-out 2.2s forwards;
}
.mv_logo_area h1 {
    width: 27.7%;
    animation: mv_fade_in 0.8s ease-out 0.3s forwards;
    opacity: 0;
}
.mv_place {
    width: 12%;
    margin: min(303px, 20vw) 3.4% 0 20.8%;
    animation: mv_fade_in 0.8s ease-out 1.2s forwards;
    opacity: 0;
}
.mv_catch {
    width: 15%;
    margin: min(160px, 10.5vw) 8% 0 13.1%;
    animation: mv_fade_in 0.8s ease-out 0.9s forwards;
    opacity: 0;
}
.mv_date {
    width: 100%;
    margin-top: min(144px, 9.5vw);
}

.mv_area .mv_bg {
    width: 100%;
}




/*  menu_area
--------------------------------*/
.menu_area {
    margin-top: 60px;
    margin-bottom: 100px;
}
.menu_area::before {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: #000;
}
.menu_area ul {
    display: flex;
    justify-content: center;
    gap: min(70px, 4.6vw);
}
@keyframes shake_menu {
    0% {
        rotate: 0deg;
    }
    5% {
        rotate: 2deg;
    }
    10% {
        rotate: -2deg;
    }
    15% {
        rotate: 2deg;
    }
    20% {
        rotate: 0deg;
    }
    100%{
        rotate: 0deg;
    }
}
.menu_area li {
    width: min(185px, 15.2vw);
    filter: drop-shadow(0px 0px 14px rgba(255, 149, 139, 0.8));
    transform-origin: top center;
    animation: shake_menu 4s ease 0.3s infinite;
}
.menu_area li:nth-of-type(2n) {
    animation: shake_menu 4s ease 2.3s infinite;
}
.menu_area li:nth-of-type(2n) {
    filter: drop-shadow(0px 0px 14px rgba(255, 234, 208, 0.8));
}
.menu_area li a {
    display: block;
    transition-duration: 0.3s;
}
.menu_area li a:hover {
    scale: 0.95;
    translate: 0 -3%;
    transition: scale 0.2s, translate 0.2s;
}
.menu_area li a img {
    width: 100%;
}

/*  event_area
--------------------------------*/
.event_area .txt_area p {
    margin-bottom: min(40px, 2.8vw);
}
.event_area p span {
    font-size: 130%;
}
.event_link {
    display: block;
    width: 60%;
    color: #000;
    padding: 10px 20px;
    background: url(../img/ttl_noren_top.png) repeat center;
    background-size: 100%;
    margin: 0 auto min(60px, 3.9vw);
    border-radius: 50px;
    transition-duration: 0.3s;
}
.event_link:hover {
    opacity: 0.8;
    scale: 0.95;
}

/*  event_detail_list */
.event_detail_list {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: min(20px, 1.6vw);
}

.event_detail_list__row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.event_detail_list__label {
    padding: 2px 4px;
    flex-shrink: 0;
    font-size: min(22px, 2vw);
    width: min(123px, 11.7vw);
    border: 2px solid #F39800;
    color: #F39800;
    letter-spacing: 0.3em; 
    line-height: 1.8;
}
.area_supporter .event_detail_list__label {
    font-size: min(18px, 1.6vw);
    letter-spacing: normal;
    width: min(160px, 13.7vw);
}

.event_detail_list__content {
    font-size: min(24px, 2.2vw);
    font-weight: 700;
    line-height: 1.8;
    text-align: left;
}

/* 補足テキスト（小さめ・やや薄め） */
.event_detail_list__note {
    font-size: 75%;
    opacity: 0.85;
    margin-left: 0.4em;
}

/*  contents_area
--------------------------------*/

.contents_area .contents_btn {
    display: flex;
    justify-content: space-between;
    align-items: end;
}
.contents_area .contents_btn figure {
    width: calc(100% / 3);
}
.contents_block_area {
    margin-top: min(140px, 10vw);
}
.contents_block:not(:last-of-type) {
    margin-bottom: 80px;
}

.contents_block h3 {
    color: #F39800;
    font-size: min(36px, 3vw);
    text-align: center;
    margin-bottom: min(40px, 2.85vw);
}
.contents_box {
    display: flex;
    gap: 24px;
}
.contents_block:nth-of-type(2n) .contents_box {
    flex-direction: row-reverse;
}
.contents_box figure {
    width: 37.8%;
    min-width: 200px;
    flex-shrink: 0;
}
.contents_box p {
    flex: 1;
}

/*  map_area
--------------------------------*/
.map_area figure, .map_area p {
    width: 65.2%;
    min-width: 560px;
    margin: 0 auto;
}
.map_area figure {
    margin-bottom: 30px;
}
.map_area .area_wrapper {
    margin-bottom: unset;
    padding-bottom: 130px;
}
.map_area.noren_area::after {
    content: unset;
}

@keyframes shake_furin {
    0% {
        rotate: 0deg;
    }
    5% {
        rotate: 10deg;
    }
    15% {
        rotate: 0deg;
    }
    20% {
        rotate: 5deg;
    }
    30% {
        rotate: 0deg;
    }
    100%{
        rotate: 0deg;
    }
}
.map_area .ttl_area h2::before {
    top: calc(45% - 70px);
    left: min(180px, 18vw);
    width: min(121px, 12.1vw);
    height: 140px;
    background: url(../img/noren_furin.png) no-repeat center;
    background-size: contain;
    animation: shake_furin 4s ease-in-out infinite;
    transform-origin: top center;
}
.map_area .ttl_area h2::after {
    right: min(180px, 18vw);
    width: min(121px, 12.1vw);
    height: 120px;
    background: url(../img/noren_yoyo.png) no-repeat center;
    background-size: contain;
    animation: shake 4s ease 1.2s infinite;
}

/*  footer_area
--------------------------------*/
.footer_area {
    background: url(../img/ttl_noren_top.png) repeat top center;
    background-size: 100%;
}
@keyframes red_line {
    0% {
        background-position-x: left 0%;
    }
    100%{
        background-position-x: left 100%;
    }
}
.footer_area::before {
    content: '';
    display: block;
    width: 100%;
    height: 15px;
    background: url(../img/line_red.jpg) repeat-x center;
    background-size: contain;
    animation: red_line 80s linear 0.3s infinite;
}

/*  contact_area
--------------------------------*/
.contact_area .ttl_area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 76px;
}
.contact_area h2 {
    height: 40px;
}
#fp-contents .contact_area h2 img {
    width: auto;
    height: 100%;
}
.contact_area .area_inner {
    padding-bottom: 76px;
}
.contact_area .area_inner p {
    text-align: center;
    color: #000;
    padding: 30px;
    border: 3px solid #000;
    margin: 20px auto 0;
    width: 74.5%;
}
.contact_area .area_inner p span {
    color: #B91212;
    overflow-wrap: anywhere;
}

/*  footer
--------------------------------*/
.footer p {
    font-size: 12px;
    color: #000;
    padding: 28px 0;
    font-weight: 500;
    text-align: center;
}

/*  top_btn
--------------------------------*/
.top_btn {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 88px;
    z-index: 100;
    opacity: 0;
}
.top_btn a {
    display: block;
    transition-duration: 0.3s;
    filter: drop-shadow(0px 3px 10px rgba(255, 255, 255, 0.6));
}
.top_btn a:hover {
    opacity: 0.8;
    scale: 0.95;
}


/* レスポンシブ (max-width: 768px) 
--------------------------------*/
@media screen and (max-width: 768px) {

    /*  common
    --------------------------------*/
    #fp-contents {
        font-size: min(14px, 3.5vw);
    }
    #fp-contents::before {
        height: 100vh;
        height: 100dvh;
        background: url(../img/bg_sp.jpg) no-repeat center;
        background-size: cover;
    }
    #fp-contents::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -101;
        width: 100%;
        height: 100%;
        background-color: #322966;
    }
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
    .area_inner {
        width: 95%;
        max-width: 600px;
    }

    /* ------- square_area -------*/
    .square_area {
        background-size: 100% min(7px, 1.79vw), 100% min(7px, 1.79vw), min(7px, 1.79vw) 100%, min(7px, 1.79vw) 100%;
        padding-bottom: 80px;
    }
    .square_area .ttl_area {
        height: max(112px, 28.7vw);
        background: url(../img/square_ashirai_top_sp.png) no-repeat center bottom;
        background-size: 100%;
        margin-bottom: 30px;
    }
    .square_area h2 {
        height: 28px;
        margin-top: max(52px, 13.3vw);
    }

    .square_area::before {
        width: min(120px, 30.7vw);
        height: min(83px, 21.2vw);
    }
    @keyframes bg_size_bottom {
        0% {
            background-position-y: top 0;
        }
        50%{
            background-position-y: top 10px;
        }
        100%{
            background-position-y: top 0;
        }
    }
    .square_area::after {
        height: 60px;
        bottom: 20px;
        background: url(../img/square_ashirai_bottom_sp.png) no-repeat center;
        background-size: contain;
        animation: bg_size_bottom 5s ease 0.3s infinite;
    }
    .square_area .txt_area {
        width: 90%;
    }

    /* ------- noren_area -------*/
    .noren_area {
        margin-top: 80px;
    }
    .noren_area::before {
        height: 8px;
        animation: red_line 60s linear 0.3s infinite;
    }
    .noren_area::after {
        height: 8px;
        animation: red_line 60s linear 0.3s infinite;
    }

    @keyframes bg_size {
        0% {
            background-position-y: bottom 0;
        }
        50%{
            background-position-y: bottom 10px;
        }
        100%{
            background-position-y: bottom 0;
        }
    }
    .noren_area .area_wrapper {
        padding-bottom: 0;
        margin-bottom: 60px;
        background: url(../img/area_ashirai_sp.png) repeat-y top center;
        background-size: 100%;
    }
    .noren_area .ttl_area {
        min-height: 119px;
        background-size: 688px;
        overflow: hidden;
    }
    .noren_area .ttl_area::before {
        height: 86%;
        background-size: 688px;
    }
    .noren_area .ttl_area h2 {
        max-width: 650px;
        min-width: 330px;
    }
    .noren_area .ttl_area h2::before {
        top: 45%;
        left: min(33px, 84.6vw);
        width: max(48px, 12.3vw);
        height: 100px;
    }
    .noren_area .ttl_area h2::after {
        right: max(50px, 10.7vw);
        width: max(45px, 11.5vw);
        height: 90px;
        background: url(../img/noren_uchiwa.png) no-repeat center;
        background-size: contain;
        animation: shake02 3s ease 0.3s infinite;
    }
    .noren_area .area_inner {
        padding-top: 50px;
    }

    /*  mv_area
    --------------------------------*/
    .mv_area .area_inner {
        width: 100vw;
        overflow: hidden;
        max-width: unset;
    }
    .mv_logo_area {
        margin-top: clamp(50px, 15.3vw, 140px);
    }
    .mv_logo_area h1 {
        width: 33%;
    }
    .mv_place {
        width: 16.4%;
        margin: clamp(90px, 26.6vw, 200px) 0 0 17.6%;
    }
    .mv_catch {
        width: 19.2%;
        margin: clamp(58px, 14.8vw, 70px) 9.7% 0 3.5%;
    }
    .mv_date {
        margin-top: clamp(30px, 9.4vw, 80px);
        opacity: 1;
        animation: unset;
    }

    /*  menu_area
    --------------------------------*/
    .menu_area {
        margin-top: 20px;
        margin-bottom: 50px;
    }
    .menu_area::before {
        height: 2px;
    }
    .menu_area ul {
        width: 93%;
        max-width: 500px;
        margin: 0 auto;
        gap: min(10px, 2.56vw);
    }
    .menu_area li {
        width: 100%;
    }

    /*  event_area
    --------------------------------*/
    .event_area .txt_area p {
        margin-bottom: 20px;
        font-size: min(14px, 3.58vw);
    }
    .event_link {
        width: 90%;
        padding: 10px 20px;
        background-size: 150%;
        margin: 0 auto 40px;
    }

    .event_detail_list {
        gap: 10px;
    }

    .event_detail_list__row {
        gap: min(13px, 3.33vw);
        align-items: start;
    }

    .event_detail_list__label {
        padding: 2px 6px;
        font-size: min(13px, 3.3vw);
        width: min(80px, 20vw);
        border: 1px solid #F39800;
        letter-spacing: 0.2em;
    }

    .event_detail_list__content {
        margin-top: 2px;
        font-size: min(14px, 3.5vw);
    }
    .area_supporter .event_detail_list__label {
        font-size: min(12px, 3.3vw);
        width: min(80px, 20vw);
        line-height: 1.2;
    }

    /*  contents_area
    --------------------------------*/
    .contents_block_area {
        margin-top: 60px;
    }
    .contents_block:not(:last-of-type) {
        margin-bottom: 60px;
    }

    .contents_block h3 {
        font-size: min(22px, 5.6vw);
        margin-bottom: 16px;
    }
    .contents_box {
        display: block;
    }
    .contents_box figure {
        width: 100%;
        min-width: unset;
        margin-bottom: 16px;
    }
    .contents_box p {
        font-size: min(14px, 3.58vw);
    }
    

    /*  map_area
    --------------------------------*/
    .map_area figure, .map_area p {
        width: 100%;
        min-width: unset;
    }
    .map_area figure, .map_area p {
        font-size: min(14px, 3.58vw);
    }
    .map_area figure {
        width: 95%;
        margin-bottom: 40px;
    }
    .map_area .area_wrapper {
        padding-bottom: 60px;
        margin-bottom: 0;
    }
    .map_area.noren_area::after {
        content: unset;
    }
    .map_area .ttl_area h2::before {
        top: calc(45% - 70px);
        left: min(40px, 10.2vw);
        width: min(121px, 12.1vw);
        height: 140px;
        animation: shake_furin 4s ease-in-out infinite;
        transform-origin: top center;
    }
    .map_area .ttl_area h2::after {
        right: min(50px, 12.8vw);
        width: max(50px, 12.8vw);
        height: 100px;
        background: url(../img/noren_yoyo.png) no-repeat center;
        background-size: contain;
        animation: shake 4s ease 1.2s infinite;
    }

    /*  footer_area
    --------------------------------*/
    .footer_area {
        background: url(../img/ttl_noren_top.png) repeat top center;
        background-size: 160%;
    }
    .footer_area::before {
        height: 8px;
        animation: red_line 60s linear 0.3s infinite;
    }
    .footer_area::after {
        height: 8px;
        animation: red_line 60s linear 0.3s infinite;
    }

    /*  contact_area
    --------------------------------*/
    .contact_area .ttl_area {
        padding-top: 60px;
    }
    .contact_area h2 {
        height: min(30px, 7.6vw);
    }
    .contact_area .area_inner {
        padding-bottom: 60px;
    }
    .contact_area .area_inner p {
        font-size: min(15px, 4vw);
        padding: 40px 10px;
        border: 2px solid #000;
        margin: 13px auto 0;
        width: 95%;
    }

    /*  sponsor_area
    --------------------------------*/
    .sponsor_area {
        margin: 80px auto;
    }
    .sponsor_logo {
        gap: 12px;
        margin-bottom: 22px;
    }
    .sponsor_logo figure {
        width: calc(88% / 3);
    }
    .sponsor_area {
        font-size: min(14px, 3.58vw);
    }
    .sponsor_big {
        margin-bottom: 22px;
    }

    /*  footer
    --------------------------------*/
    .footer {
        background-size: 160%;
    }
    .footer::before {
        height: 8px;
        animation: red_line 60s linear 0.3s infinite;
    }
    .footer p {
        font-size: 10px;
        padding: 20px 0;
    }

    /*  top_btn
    --------------------------------*/
    .top_btn {
        right: 8px;
        bottom: 8px;
        width: min(60px , 15.3vw);
    }
}