@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
:root {
    /* font sizes */
    --font-size-title-ll: 32px;
    --font-size-title-l: 18px;
    --font-size-title-m: 16px;
    --font-size-title-s: 15px;
    --font-size-base: 14px;
    --font-size-paragraph: 12px;
    /* colors theme */
    --color-primary90: #FF408E;
    --color-primary70: #FF6078;
    --color-primary50: #F98290;
    --color-primary40: #FFC2BD;
    --color-primary20: #F5AAB6;
    --color-primary10: #FFD3D9;
    /* colors neutral */
    --color-N90: #333333;
    --color-N40: #CCCCCC;
    --color-N30: #EAEAEA;
    --color-N20: #F1F1F1;
    --color-N0: #FFFFFF;
    /* colors fix */
    --color-character1: #D2193A;
    --color-character2: #C37789;
    --color-character3: #00577C;
    --color-character4: #5B697B;
    --color-character5: #AD8ABA;
    --color-character6: #B15D4E;
    --color-datail: #F5A566;
}
.vote_wrapper {
    max-width: 950px;
    margin: 0 auto 48px;
}
section h2 img {
    display: block;
    height: 30px;
    margin: 0 auto 48px auto;
}
.vote_wrapper a {
    transition: .1s;
}
.vote_wrapper a:hover {
    opacity: .6;
}
.link_vote_s,
.link_vote_w {
    display: block;
    width: 280px;
    height: 50px;
    line-height: 48px;
    margin: auto;
    border-radius: 50px;
    border: solid 2px var(--color-N0);
    background: var(--color-character1);
    color: var(--color-N0);
    font-size: var(--font-size-title-m);
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    font-family: 'Noto Sans JP';
}
.main_vote {
    background: var(--color-primary40);
}
.wr_main_vote {
    position: relative;
    max-width: 950px;
    height: 784px;
    margin: auto;
    background-image: url("https://cfs.pokepara.jp/Pokepara/Images/img/Sp/namevote/bg_vote_main_pc.png");
    background-size: cover;
    background-position: center;
}
.wr_main_vote.official {
    height: 720px;
    background-image: url("https://cfs.pokepara.jp/Pokepara/Images/img/Sp/namevote/bg_vote_main_pc_2.png");
}
.main_vote .img_main_1 {
    display: block;
    width: 96%;
    max-width: 480px;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    animation: opening_main .5s ease-in .6s forwards;
    opacity: 0;
}
.main_vote .img_main_2 {
    display: block;
    width: 96%;
    max-width: 480px;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    animation:opening_logo .5s ease-in 1.2s forwards;
    opacity: 0;
}
@keyframes opening_main {
    0% {
        opacity: 0;
        top: -40px;
    }
    30% {
        opacity: 1;
        top: 0px;
    }
    50% {
        opacity: 1;
        top: -10px;
    }
    100% {
        opacity: 1;
        top: 0px;
    }
}
@keyframes opening_logo {
    0% {
        opacity: 0;
        top: -40px;
    }
    30% {
        opacity: 1;
        top: 0px;
    }
    50% {
        opacity: 1;
        top: -10px;
    }
    100% {
        opacity: 1;
        top: 0px;
    }
}
.datail_vote,
.check_vote,
.summary_vote,
.howto_vote {
    padding: 60px 32px;
    background: var(--color-datail);
}
.howto_vote {
    background: url(https://cfs.pokepara.jp/Pokepara/Images/img/Sp/namevote/bg_vote_howto.png) repeat left top;
}
.list_howto {
    max-width: 750px;
    margin: auto;
}
.list_howto li {
    position: relative;
    padding: 20px;
    margin: 0 0 40px 0;
    border-radius: 5px;
    border: solid 2px var(--color-N40);
    box-shadow: 0 4px 0 rgba(0,0,0,.1);
    background: var(--color-N0);
}
.list_howto li p {
    line-height: 1.7;
    margin: 0 0 20px 0;
    color: var(--color-N90);
    font-size: var(--font-size-title-s);
    font-family: 'Noto Sans JP';
}
.list_howto li p:last-child {
    margin: 0;
}
.list_howto li p strong {
    font-weight: bold;
    color: var(--color-primary70);
}
/*tab*/
.tab-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 48px 0 0 0;
}
.tab-label {
    position: relative;
    flex: 1;
    line-height: var(--line-1);
    padding: 10px 0 10px 0;
    border: solid 1px var(--color-N30);
    border-bottom: solid 1px var(--color-N0);
    background: var(--color-N0);
    color: var(--color-N90);
    text-align: center;
    white-space: nowrap;
    order: -1;
    cursor: pointer;
}
.tab-label:not(:last-of-type) {
    margin-right: 8px;
}
.tab-content {
    width: 100%;
    height: 0;
    background: var(--color-N0);
    overflow: hidden;
    opacity: 0;
}
.tab-content p {
    color: var(--color-N90);
}
.tab-content p + .repo_list {
    margin: 24px 0 0;
}
.tab-content p span {
    color: var(--color-primary70);
}
.tab-content a {
    display: block;
}
.tab-content img {
    width: 100%;
    height: auto;
}
/* アクティブなタブ */
.tab-switch:checked + .tab-label {
    background: var(--color-primary50);
    color: var(--color-N0);
    border: solid 1px var(--color-primary50);
}
.tab-switch:checked + .tab-label + .tab-content {
    height: auto;
    overflow: auto;
    padding: 24px;
    border: solid 2px var(--color-primary50);
    opacity: 1;
    transition: .5s opacity;
}
/* ラジオボタン非表示 */
.tab-switch {
    display: none;
}
/* TAB内コンテンツ */
.repo_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 0;
}
.repo_list li {
    display: block;
    position: relative;
    width: 48%;
}
.repo_list li blockquote {
    margin: 0;
}
.repo_list_first iframe{
    width: 100%;
    height: 420px;
}
.repo_list_second iframe{
    width: 100%;
    height: 420px;
}
.repo_list li .repo_name {
    position: absolute;
    top: 12px;
    left: 12px;
    line-height: var(--line-1);
    padding: 4px 12px;
    border-radius: 4px;
    border: solid 2px var(--color-primary50);
    background: var(--color-N0);
    color: var(--color-primary50);
    font-weight: bold;
    font-size: var(--font-size-base);
}
.check_vote,
.summary_vote {
    background: url(https://cfs.pokepara.jp/Pokepara/Images/img/Sp/namevote/bg_vote_check_pc.png) repeat center /cover;
 }
.check_vote .bg_slider {
    position: relative;
    width: 420px;
    margin: 0 auto 48px auto;
    background: url(https://cfs.pokepara.jp/Pokepara/Images/img/Sp/namevote/slide_vote_none.png) no-repeat center /contain;
}
.check_vote .bg_slider .img_slider {
    display: block;
    width: 100%;
    border: none;
}
.check_vote .bg_slider .slick-slide {
    position: relative;
    transition: .3s;
}
.check_vote .bg_slider .slick-slide:after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 89%;
    transform: translateX(12px);
    transition: .3s;
}
.check_vote .wr_slider {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
.slick-prev, .slick-next {
    width: 60px;
    height: 64px;
    top: 50%;
    transition: .1s;
}
.slick-prev {
    left: -70px;
    background: url(https://cfs.pokepara.jp/Pokepara/Images/img/Sp/namevote/prev_vote.png) no-repeat center /contain;
}
.slick-next {
    right: -70px;
    background: url(https://cfs.pokepara.jp/Pokepara/Images/img/Sp/namevote/next_vote.png) no-repeat center /contain;
}
.slick-prev:hover, .slick-next:hover {
    opacity: .6;
}
.list_entry {
    padding: 48px 16px;
    background: var(--color-N20);
}
.list_entry select {
    display: block;
    height: 58px;
    width: 400px;
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 5px;
    border: solid 2px var(--color-N40);
    background: var(--color-N0);
    color: var(--color-N90);
    font-size: var(--font-size-title-m);
    font-weight: bold;
    font-family: 'Noto Sans JP';
    cursor: pointer;
    -webkit-appearance: none;
}
.list_entry .select_list_entry {
    position: relative;
    width: 400px;
    margin: 0 auto 40px;
}
.list_entry .select_list_entry::after {
    position: absolute;
    top: 26px;
    right: 20px;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: solid 8px transparent;
    border-right: solid 8px transparent;
    border-bottom: solid 8px transparent;
    border-top: solid 8px var(--color-datail);
    pointer-events: none;
}
.wr_download {
    display: block;
    width: 300px;
    margin: auto;
}
.wr_download img {
    width: 100%;
}
.list_character {
    width: 750px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 32px auto 0;
}
.list_character li {
    position: relative;
    margin: 2%;
}
.list_character li a {
    display: block;
    width: 200px;
    height: 240px;
    border-radius: 5px;
    box-shadow: 0 4px 0 rgba(0,0,0,.1);
    transition: .2s;
}
.list_character li:nth-child(1) a {
    border: solid 3px var(--color-character6);
    background: url(https://cfs.pokepara.jp/Pokepara/Images/img/Sp/namevote/list_charecter_1.png) repeat center /cover;
}
.list_character li:nth-child(1) a p {
    color: var(--color-character6);
}
.list_character li:nth-child(2) a {
    border: solid 3px var(--color-character2);
    background: url(https://cfs.pokepara.jp/Pokepara/Images/img/Sp/namevote/list_charecter_2.png) repeat center /cover;
}
.list_character li:nth-child(2) a p {
    color: var(--color-character2);
}
.list_character li:nth-child(3) a {
    border: solid 3px var(--color-character3);
    background: url(https://cfs.pokepara.jp/Pokepara/Images/img/Sp/namevote/list_charecter_3.png) repeat center /cover;
}
.list_character li:nth-child(3) a p {
    color: var(--color-character3);
}
.list_character li:nth-child(4) a {
    border: solid 3px var(--color-character4);
    background: url(https://cfs.pokepara.jp/Pokepara/Images/img/Sp/namevote/list_charecter_4.png) repeat center /cover;
}
.list_character li:nth-child(4) a p {
    color: var(--color-character4);
}
.list_character li:nth-child(5) a {
    border: solid 3px var(--color-character5);
    background: url(https://cfs.pokepara.jp/Pokepara/Images/img/Sp/namevote/list_charecter_5.png) repeat center /cover;
}
.list_character li:nth-child(5) a p {
    color: var(--color-character5);
}
.list_character li a:hover {
    transform: scale(108%) rotate(3deg);
    opacity: 1;
}
.list_character li p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(61px);
    line-height: 1;
    width: 200px;
    padding: 12px 8px;
    border-radius: 0 0 4px 4px;
    box-sizing: border-box;
    background: rgba(255,255,255,.95);
    font-size: var(--font-size-title-m);
    font-weight: bold;
    text-align: center;
}
.list_character li p span {
    display: inline-block;
    margin: 8px 0 0 0;
    font-size: var(--font-size-paragraph);
}
#pagetop a:hover {
    background: rgba(0, 0, 0, .6);
}
#modal_character {
    position: relative;
}
#modal_character .wr_slider {
    position: relative;
}
#modal_character .bg_slider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 750px;
    max-width: none;
    background: none;
}
#modal_character .bg_slider img {
    width: 244px;
    margin: auto;
    display: block;
}
#modal_character .bg_slider .wr_slider {
    margin: 0 0 28px 0;
}
#modal_character .bg_top,
#modal_character .bg_bottom {
    position: absolute;
    width: 100vw;
    height: 60%;
    background: var(--color-primary10);
    z-index: -1;
}
#modal_character .bg_top {
     top: -24%;
     left: 50%;
     transform: skewY(10deg) translateX(-50%);
     transform-origin: left top;
}
#modal_character .bg_bottom {
    bottom: -24%;
    left: 50%;
    transform: skewY(10deg) translateX(-50%);
    transform-origin: left bottom;
}
.close-modal_character {
    position: absolute;
    right: 16px;
    top: 16px;
    display: block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    background: var(--color-N0);
    border-radius: 96px;
    color: var(--color-N90);
    font-size: var(--font-size-title-ll);
    font-weight: bold;
    text-align: center;
    z-index: 3;
    cursor: pointer;
    transition: .2s;
}
.close-modal_character:hover {
    opacity: .8;
    transform: scale(120%) rotate(10deg);
}
#modal_character .bg_slider .slick-slide {
    background: none;
}
#modal_character .bg_slider .slick-slide:after {
    background: none;
}
#modal_character .slick-prev, #modal_character .slick-next {
    z-index: 2;
    top: 54%;
}
#modal_character .slick-prev {
    left: 5%;
}
#modal_character .slick-next {
    right: 5%;
}