@charset "utf-8";

#visual {
    margin-top:50px;
    margin-right:35px;
}
#visual .banner_img_box .bannerimg.pc_bnn {
    display:block;
}
#visual .banner_img_box .bannerimg.mo_bnn {
    display:none;
}
#visual .banner_img_box .bannerimg img {
    border-radius:50px;
    width:100%;
}
#visual .splide__pagination {
    bottom:45px;
}
#visual .splide__pagination .splide__pagination__page {
    width:13px;
    height:13px;
    border:2px solid #fff;
    background:#fff;
    opacity: 1;
}
#visual .splide__pagination .splide__pagination__page.is-active {
    background:#9C9C9C;
    border:2px solid #fff;
    transform: unset;
    opacity: 1;
}
#notice {
    margin-top:50px;
    padding-top:50px;
    position: relative;
}
#notice::before {
    content:'';
    width:100%;
    min-height:644px;
    height:100%;
    background-color:#F6F4F6;
    border-radius:80px 0 0 80px;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
}
#notice .notice_slide_title_wrap {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
#notice .notice_slide_title_wrap .notice_slide_title {
    font-size: 1.88rem;
    font-weight:400;
    line-height:normal;
}
#notice .notice_slide_title_wrap .notice_slide_title span {
    font-weight:700; 
}
#notice .notice_slide_title_wrap .mir_maintab {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:640px;
}
#notice .notice_slide_title_wrap .mir_maintab .tab_btns {
    display:flex;
    align-items:center;
    gap:20px;
    position: relative;
}
#notice .notice_slide_title_wrap .mir_maintab .tab_btns::after {
    content:'';
    width:130px;
    height:1px;
    background-color:#CACACA;
    position:absolute;
    right:-130px;
    top:50%;
    transform:translateY(-50%);
}
#notice .notice_slide_title_wrap .mir_maintab .tab_btns a {
    display:block;
    width:150px;
    height:50px;
    padding:0 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #CACACA;
    background-color:#F9F9F9;
    border-radius:999px;
    font-size:1.33rem;
    font-weight:400;
    line-height: 166%;
    color:#8E8E8E;
    text-align:center;
}
#notice .notice_slide_title_wrap .mir_maintab .tab_btns a.on {
    border-color:#F9F9F9;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,183,201,1) 100%);
    font-weight:700;
    color:#222;
}

#notice .tab_contents {
    margin-top:30px;
}
#notice .tab_contents .tab_board {
    display:none;
    position: relative;
}
#notice .tab_contents .tab_board.on {
    display:block;
}
#notice .tab_contents .tab_board .splide__arrows {
    display:flex;
    align-items:center;
    gap:20px;
    position:absolute;
    right: 0;
    top:-80px;
}
#notice .tab_contents .tab_board .splide__arrows .splide__arrow {
    position: unset;
    transform: unset;
    opacity: 1;
    width:50px;
    height:50px;
    border:1px solid #CACACA;
    background:#F9F9F9;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:unset;
}
#notice .tab_contents .tab_board .splide__arrows .splide__arrow--prev svg {
    transform: rotate(0deg);
}
#notice .tab_contents .tab_board .tab_more {
    width:50px;
    height:50px;
    border-radius:50%;
    border:1px solid #CACACA;
    background:#F9F9F9;
    display:flex;
    align-items:center;
    justify-content:center;
}
#notice .tab_contents .tab_board .splide__slide {
    display:block;
    background-color:#fff;
    border-radius:30px;
    border:1px solid #CACACA;
}
#notice .tab_contents .tab_board .splide__slide:hover {
    border-color:#9A2C48;
    transition: all .2s;
}
#notice .tab_contents .tab_board .splide__slide .inner {
    display:block;
    padding:30px;
}
#notice .tab_contents .tab_board .splide__slide .inner .slide_txt {
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-bottom:20px;
}
#notice .tab_contents .tab_board .splide__slide .inner .notice_tabname {
    padding:7px 15px;
    border-radius:20px;
    background-color:#FFE6EC;
    font-size:0.88rem;
    font-weight:600;
    color:#9A2C48;
    width:fit-content;
}
#notice .tab_contents .tab_board .splide__slide .inner .notice_subject {
    font-size:1.22rem;
    font-weight:600;
    line-height:normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
    min-height:48px;
}
#notice .tab_contents .tab_board .splide__slide .inner .notice_content {
    font-size:0.88rem;
    font-weight:400;
    line-height:150%;
    color:#8E8E8E;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    min-height:64px;
}
#notice .tab_contents .tab_board .splide__slide .inner .slide_info {
    border-top:1px solid #ddd;
    margin-top:5px;
    padding-top:5px;
}
#notice .tab_contents .tab_board .splide__slide .inner .slide_info .notice_date {
    padding: 15px 5px 5px 5px;
    font-size:0.83rem;
    font-weight:700;
    line-height:normal;
    color:#CACACA;
}

#howtouse .mircenter {
    position: relative;
}
#howtouse .howtouse_wrap {
    margin-top:80px;
    border-radius: 20px;
    border: 1px solid #fff;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 22.41%, rgba(248,238,255,1) 94.84%);
    box-shadow: 0px 10px 20px 0px rgba(112, 96, 126, 0.15);
    height:200px;
    display:flex;
    align-items:center;
    padding-left:100px;
    gap:288px;
    position: relative;
} 
#howtouse .howtouse_wrap .howtouse_box {
    display:flex;
    flex-direction:column;
    gap:10px;
}
#howtouse .howtouse_wrap .howtouse_box .howtouse_title {
    font-size:1.88rem;
    font-weight:200;
    line-height:88.235%;
}
#howtouse .howtouse_wrap .howtouse_box .howtouse_title span {
    font-weight:600;
}
#howtouse .howtouse_wrap .howtouse_box .howtouse_explanation {
    font-size:0.88rem;
    font-weight:400;
    line-height:187.5%;
    color:#8E8E8E;
}
#howtouse .howtouse_wrap .howtouse_btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:142px;
    height: 45px;
    border-radius: 20px 20px 0px 20px;
    background: rgb(210,191,238);
    background: linear-gradient(174deg, rgba(210,191,238,1) -23.81%, rgba(114,72,175,1) 95.87%);
}
#howtouse .howtouse_wrap .howtouse_btn p {
    font-size:1rem;
    font-weight:500;
    color:#fff;
    font-family: "S-Core Dream";
    line-height:normal;
}
#howtouse .howtouse_wrap .howtouse_btn:hover {
    animation-name: wobble-vertical;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}
#howtouse .howtouse_bg {
    position:absolute;
    right:12px;
    bottom:0;
}

#nomination {
    margin-top:80px;
}
#nomination .nomination_title {
    text-align:center;
}
#nomination .nomination_title p {
    font-size:1.88rem;
    font-weight:400;
    line-height:normal;
}
#nomination .nomination_title p span {
    font-weight:700;
}
#nomination .nomination_wrap {
    display:flex;
    align-items:stretch;
    gap: 50px;
    margin-top:30px;
    padding-top: 160px;
}
#nomination .nomination_wrap .nomination_box {
    flex:1;
}
#nomination .nomination_wrap .nomination_box .nomination_gallery {
    text-align:center;
}
#nomination .nomination_wrap .nomination_box .nomination_gallery .inner {
    display:block;
    position: relative;
}
#nomination .nomination_wrap .nomination_box .nomination_gallery .inner img {
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.25);
    z-index: 1;
    position:absolute;
    left:50%;
    top:-160px;
    transform:translateX(-50%);
    width:100%;
    max-width:250px;
    transition:all 0.2s;
}
#nomination .nomination_wrap .nomination_box .nomination_gallery .inner:hover img {
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
    top:-170px;
    transition:all 0.2s;
}
#nomination .nomination_wrap .nomination_box .nomination_gallery .inner .inncontent {
    border-radius: 0px 0px 30px 30px;
    height: 315px;
    background-color:#9A2C48;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: flex-end;
    gap:5px;
    padding:0 15px 44px;
}
#nomination .nomination_wrap .nomination_box .nomination_gallery .inner .inncontent .gallery_site {
    font-size:1.44rem;
    font-weight:500;
    color:#fff;
    font-family: "S-Core Dream";
    line-height: normal;
}
#nomination .nomination_wrap .nomination_box .nomination_gallery .inner .inncontent span {
    font-size:0.83rem;
    font-weight:700;
    color:#fff;
    font-family: "S-Core Dream";
    line-height: normal;
}
#nomination .nomination_wrap .nomination_box .nomination_gallery .inner .inncontent .tit {
    font-size:1rem;
    font-weight:500;
    color:#fff;
    line-height:normal;
}
#nomination .nomination_wrap .nomination_box01 .nomination_gallery .inner .inncontent {
    background-color:#7163AF;
}
#nomination .nomination_wrap .nomination_box02 .nomination_gallery .inner .inncontent {
    background-color:#5B93D7;
}
#nomination .nomination_wrap .nomination_box03 .nomination_gallery .inner .inncontent {
    background-color:#53C0C0;
}

/* ********************************** */
@media(max-width:1600px) {
    #howtouse .howtouse_wrap {
        gap:180px;
    }
}
@media(max-width:1440px) {
    #visual {
        margin-top:40px;
    }
    #visual .banner_img_box .bannerimg img {
        border-radius:30px;
    }
    #visual .splide__pagination {
        bottom:30px;
    }
    #howtouse .howtouse_wrap {
        gap:50px;
    }
    #howtouse .howtouse_bg img {
        width: 370px;
    }

    #nomination .nomination_wrap {
        gap:30px;
    }
}
@media(max-width:1200px) {
 


    #notice {
        margin-top:30px;
        padding-top:20px
    }
    #notice::before {
        left:auto;
        right:0;
        width: calc(100% - 10px);
    }
    #notice .notice_slide_title_wrap .notice_slide_title {
        font-size:1.66rem;
    }
    #notice .notice_slide_title_wrap .mir_maintab {
        width:540px;
    }
    #notice .notice_slide_title_wrap .mir_maintab .tab_btns a {
        font-size:1.22rem;
    }
    #notice .notice_slide_title_wrap .mir_maintab .tab_btns::after {
        display:none;
    }
    #notice .tab_contents .tab_board .splide__slide .inner .notice_subject {
        font-size:1.11rem;
        min-height: 44px;
    }

    
    #howtouse .howtouse_wrap {
        margin-top:50px;
    }
    #howtouse .howtouse_wrap .howtouse_box .howtouse_title {
        font-size:1.66rem;
    }
    #howtouse .howtouse_wrap .howtouse_btn p {
        font-size:0.97rem;
    }
    #nomination {
        margin-top:50px;
    }
    #nomination .nomination_title p {
        font-size:1.66rem;
    }
    #nomination .nomination_wrap .nomination_box .nomination_gallery .inner .inncontent .gallery_site {
        font-size:1.22rem;
    }
    #nomination .nomination_wrap .nomination_box .nomination_gallery .inner .inncontent .tit {
        font-size:0.97rem;
    }
}
@media(max-width:1024px) {
    #visual {
        margin:0 20px;
    }

    #howtouse .howtouse_wrap {
        flex-direction: column;
        gap:10px;
        justify-content: center;
        align-items: flex-start;
        padding: 50px;
        height: auto;
    }

    #nomination .nomination_wrap .nomination_box .nomination_gallery .inner img {
        max-width:220px;
    }
    #nomination .nomination_wrap .nomination_box .nomination_gallery .inner .inncontent {
        height:280px;
    }
}
@media(max-width:991px) {
    #howtouse .howtouse_bg img {
        width: 300px;
    }

    #notice .notice_slide_title_wrap .mir_maintab {
        width:auto;
    }
    
    #notice .notice_slide_title_wrap .mir_maintab .tab_btns::after {
        display:none;
    }
    #notice .notice_slide_title_wrap .mir_maintab .tab_btns a {
        width:130px;
        font-size:1.11rem;
    }
    #notice .tab_contents {
        margin-top:15px;
    }
    #notice .tab_contents .tab_board .splide__arrows {
        margin-bottom:30px;
        justify-content:center;
        position:unset;
    }

    #nomination .nomination_wrap .nomination_box .nomination_gallery .inner img {
        max-width:180px;
    }
    #nomination .nomination_wrap .nomination_box .nomination_gallery .inner .inncontent {
        height: 225px;
    }
}
@media(max-width:768px) {

    #visual .banner_img_box .bannerimg.pc_bnn {
        display:none;
    }
    #visual .banner_img_box .bannerimg.mo_bnn {
        display:block;
    }


    #howtouse .howtouse_wrap {
        padding:30px;
    }
    #howtouse .howtouse_wrap .howtouse_box .howtouse_explanation {
        display:none;
    }
    #howtouse .howtouse_bg img {
        width: 240px;
    }

    #nomination .nomination_wrap {
        flex-direction:column;
        padding-top:0;
    }
    #nomination .nomination_wrap .nomination_box {
        position: relative;
        height:100%;
    }
    #nomination .nomination_wrap .nomination_box .nomination_gallery .inner {
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        height:388px;
    }
    #nomination .nomination_wrap .nomination_box .nomination_gallery .inner img {
        top:0;
    }


}
@media(max-width:640px) {
    #notice .notice_slide_title_wrap .notice_slide_title {
        font-size:1.5rem;
    }
    #howtouse .howtouse_wrap .howtouse_box .howtouse_title {
        font-size:1.5rem;
    }
  
    #howtouse .howtouse_wrap {
        padding:20px;
    }
    #howtouse .howtouse_bg img {
        width: 160px;
    }
    #nomination .nomination_title p {
        font-size:1.5rem;
    }
    #notice .notice_slide_title_wrap {
        flex-direction:column;
        gap:30px;
    }
}
@media(max-width:320px) {}



/* --------------------------------------------- */
/* animation keyframe */
@keyframes wobble-vertical {
    16.65% {
      transform: translateY(8px);
    }
    33.3% {
      transform: translateY(-6px);
    }
    49.95% {
      transform: translateY(4px);
    }
    66.6% {
      transform: translateY(-2px);
    }
    83.25% {
      transform: translateY(1px);
    }
    100% {
      transform: translateY(0);
    }
  }