@charset "utf-8";
/*
使用フォント:
    チェックポイントフォント : http://marusexijaxs.web.fc2.com/quizfont.html
    ちはやフォント+ : https://welina.xyz/font/tegaki/nchif/
    851手書き雑フォント : https://pm85122.onamae.jp/851fontpage.html
    モッチーポップ : https://fontdasu.com/1750
*/

#loader-bg {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1;
}
#loader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    text-align: center;
    color: #fff;
    z-index: 2;
}

@keyframes rotation{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg); }
}

#loader spawn {
    animation:3s ease-in-out infinite alternate rotation;
    display: block;
    width: 100%;
    height: 153px;
    margin-left: 0;
    margin-right: 0;
    background-image: url('https://info.ponstream24.com/image/pon-loading.png');
    background-repeat: no-repeat;
    background-size: 200px auto;
    background-position-x: 50%;
    background-position-y: 50%;
    margin-bottom: -25px;
}

@keyframes gradient {
    0% {
    background-position: 0% 50%
    }
    50% {
    background-position: 100% 50%
    }
    100% {
    background-position: 0% 50%
    }
}
    
.gradation {
    background: linear-gradient(-45deg, #a852ee80, #bf3ce780, #23d53280, #d5a52380);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    display: block;
    line-height: 110px;
    width: 110px;
    text-align: center;
    color: #fff;
}


/* now loading */
span.loading {
    display: inline-block;
    white-space: nowrap;
    color: rgb(255, 255, 255);
    text-shadow:
    1px 0 0 rgb(0, 0, 0),
    0 1px 0 rgb(0, 0, 0),
    -1px 0 0 rgb(0, 0, 0),
    0 -1px 0 rgb(0, 0, 0);
    font-size: 2em;
    
}
    span.loading span {
        display: inline-block;
        vertical-align: middle;
    }
    span.loading span:nth-of-type(1) {
        -webkit-animation: animation 2s ease 0s infinite;
        animation: animation 2s ease 0s infinite;
    }
    span.loading span:nth-of-type(2) {
        -webkit-animation: animation 2s ease 0.1s infinite;
        animation: animation 2s ease 0.1s infinite;
    }
    span.loading span:nth-of-type(3) {
        -webkit-animation: animation 2s ease 0.2s infinite;
        animation: animation 2s ease 0.2s infinite;
    }
    span.loading span:nth-of-type(4) {
        -webkit-animation: animation 2s ease 0.3s infinite;
        animation: animation 2s ease 0.3s infinite;
    }
    span.loading span:nth-of-type(5) {
        -webkit-animation: animation 2s ease 0.4s infinite;
        animation: animation 2s ease 0.4s infinite;
    }
    span.loading span:nth-of-type(6) {
        -webkit-animation: animation 2s ease 0.5s infinite;
        animation: animation 2s ease 0.5s infinite;
    }
    span.loading span:nth-of-type(7) {
        -webkit-animation: animation 2s ease 0.6s infinite;
        animation: animation 2s ease 0.6s infinite;
    }
    span.loading span:nth-of-type(8) {
        -webkit-animation: animation 2s ease 0.7s infinite;
        animation: animation 2s ease 0.7s infinite;
    }
    span.loading span:nth-of-type(9) {
        -webkit-animation: animation 2s ease 0.8s infinite;
        animation: animation 2s ease 0.8s infinite;
    }
    span.loading span:nth-of-type(10) {
        -webkit-animation: animation 2s ease 0.9s infinite;
        animation: animation 2s ease 0.9s infinite;
    }

@-webkit-keyframes animation {
    0% {
        margin-top: 0;
    }
    5% {
        margin-top: -1em;
    }
    10% {
        margin-top: 0;
    }
    13% {
        margin-top: -0.5em;
    }
    16% {
        margin-top: 0;
    }
    18% {
        margin-top: -0.2em;
    }
    20% {
        margin-top: 0;
    }
}

@keyframes animation {
    0% {
        margin-top: 0;
    }
    5% {
        margin-top: -1em;
    }
    10% {
        margin-top: 0;
    }
    13% {
        margin-top: -0.5em;
    }
    16% {
        margin-top: 0;
    }
    18% {
        margin-top: -0.2em;
    }
    20% {
        margin-top: 0;
    }
}

/*緊急表示用*/
/*
@font-face {
	font-family: 'checkpoint';
	src:url('https://info.ponstream24.com/font/CP_Font.otf') format('opentype'),
        url('https://info.ponstream24.com/font/CP_Font.woff') format('woff'),
        url('https://info.ponstream24.com/font/CP_Font.ttf') format('truetype');
}
@font-face {
	font-family: 'Nchihaya+';
	src:url('https://info.ponstream24.com/font/Nchihaya+.ttf') format('truetype'),
        url('https://info.ponstream24.com/font/Nchihaya+.woff') format('woff'),
        url('https://info.ponstream24.com/font/Nchihaya+.otf') format('opentype');
}
@font-face {
	font-family: '851selffont';
	src:url('https://info.ponstream24.com/font/851tegaki_zatsu_normal_0883.ttf') format('truetype');
}
@font-face {
	font-family: 'MochiyPop-E-P';
	src:url('https://info.ponstream24.com/font/MochiyPop-E-P.ttf') format('truetype'),
        url('https://info.ponstream24.com/font/MochiyPop-E-P.otf') format('opentype'),
        url('https://info.ponstream24.com/font/MochiyPop-E-P.woff') format('woff');
}
*/
/*緊急表示用*/


/*常時表示ページ用*/

@font-face {
	font-family: 'checkpoint';
	src:url('../font/CP_Font.otf') format('opentype'),
        url('../font/CP_Font.woff') format('woff'),
        url('../font/CP_Font.ttf') format('truetype');
}
@font-face {
	font-family: 'Nchihaya+';
	src:url('../font/Nchihaya+.ttf') format('truetype'),
        url('../font/Nchihaya+.woff') format('woff'),
        url('../font/Nchihaya+.otf') format('opentype');
}
@font-face {
	font-family: '851selffont';
	src:url('../font/851tegaki_zatsu_normal_0883.ttf') format('truetype');
}
@font-face {
	font-family: 'MochiyPop-E-P';
	src:url('../font/MochiyPop-E-P.ttf') format('truetype'),
        url('../font/MochiyPop-E-P.otf') format('opentype'),
        url('../font/MochiyPop-E-P.woff') format('woff');
}
/*常時表示ページ用*/

body{
    background-image: url("https://info.ponstream24.com/image/congruent_pentagon.png");
    background-repeat: repeat;
    font-size: 87.5%;
    line-height: 1.5;
}

header {
	position: relative;
	width: 100%;
	}
header:before {
	content:"";
	display: block;
	padding-top: 41.6%; /* x:y (x÷y)×100 = Z% */
	}
#head_spawn {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
    width: 100%;
    background-image: url("https://info.ponstream24.com/image/header.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
	}

h3#title_1 {
    font-family: 'checkpoint';
    text-align: center;
    color: black;
    font-size: 2em;
    text-shadow:
    1px 0 0 rgb(255, 255, 255),
    0 1px 0 rgb(255, 255, 255),
    -1px 0 0 rgb(255, 255, 255),
    0 -1px 0 rgb(255, 255, 255);
    
    padding: 1rem 3rem;
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
    background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
    background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}

/* ポンについて */

#info {
    border: 5px dashed var(--unnamed-color-707070);
    border: 5px dashed #707070;
    opacity: 1;
    font-family: 'Nchihaya+';
    font-size: 3em;
    background-color: whitesmoke;
}


#pon_info {
    float:left;
    font-size: 2em;
    height: 16em;
}

#pon_info img{
    height: 100%;
}

#ponname {
    left: 30%;
    right: 20em;
    border: 1px solid var(--unnamed-color-707070);
    background-color: white;
    border: 1px solid #707070;
    opacity: 1;
    height: 100%;
    overflow:hidden;
    margin-left: 10ex;
    margin-right: 10ex;
}

#ponname_contents {
    margin-top: 1em;
    margin-right: 1em;
    margin-bottom: 0.5em;
    float: right;
    font-family: '851selffont';
    font-size: 2.5em;
}

#ponname_contents li{
    list-style: none;
    border-bottom: solid;
    border-width: 1px;
    border-color: #707070;
}


h3#title_2 {
    font-family: 'checkpoint';
    text-align: center;
    color: black;
    font-size: 2em;
    text-shadow:
    1px 0 0 rgb(255, 255, 255),
    0 1px 0 rgb(255, 255, 255),
    -1px 0 0 rgb(255, 255, 255),
    0 -1px 0 rgb(255, 255, 255);
    
    padding: 1rem 3rem;
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    background-image: -webkit-gradient(linear, left top, right top, from(#ff2020), to(#e0ba68));
    background-image: -webkit-linear-gradient(left, #ff2020 0%, #e0ba68 100%);
    background-image: linear-gradient(to right, #ff2020 0%, #e0ba68 100%);
}

h3#title_3 {
    font-family: 'checkpoint';
    text-align: center;
    color: black;
    font-size: 2em;
    text-shadow:
    1px 0 0 rgb(255, 255, 255),
    0 1px 0 rgb(255, 255, 255),
    -1px 0 0 rgb(255, 255, 255),
    0 -1px 0 rgb(255, 255, 255);

    padding: 1rem 3rem;
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    background-image: -webkit-gradient(linear, left top, right top, from(#45ff20), to(#6870e0));
    background-image: -webkit-linear-gradient(left, #45ff20 0%, #6870e0 100%);
    background-image: linear-gradient(to right, #45ff20 0%, #6870e0 100%);
}


h3#title_4 {
    font-family: 'checkpoint';
    text-align: center;
    color: black;
    font-size: 2em;
    text-shadow:
    1px 0 0 rgb(255, 255, 255),
    0 1px 0 rgb(255, 255, 255),
    -1px 0 0 rgb(255, 255, 255),
    0 -1px 0 rgb(255, 255, 255);

    padding: 1rem 3rem;
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    background-image: -webkit-gradient(linear, left top, right top, from(#e9ff20), to(#e0ac68));
    background-image: -webkit-linear-gradient(left, #e9ff20 0%, #e0ac68 100%);
    background-image: linear-gradient(to right, #e9ff20 0%, #e0ac68 100%);
}


p#center {
    text-align: center;
    left: 50%;
}

table {
    margin: auto;
    width: 85%;
    border-collapse: collapse;
}

td,th {
    height: 2.5em;
    border: 1px solid #333;
    border-collapse: collapse;
    font-family: '851selffont';
    color:#ffffff;
    font-size: 2em;
    text-shadow:
    1px 0 0 rgb(0, 0, 0),
    0 1px 0 rgb(0, 0, 0),
    -1px 0 0 rgb(0, 0, 0),
    0 -1px 0 rgb(0, 0, 0);
}

td a{
    background-color:rgba(172, 224, 51, 0.521);
    position: relative;
    display: inline-block;
    transition: .3s;
    text-decoration: none;
    color: rgb(255, 255, 255);
    text-shadow:
    1px 0 0 rgb(0, 0, 0),
    0 1px 0 rgb(0, 0, 0),
    -1px 0 0 rgb(0, 0, 0),
    0 -1px 0 rgb(0, 0, 0);
}

/* table アニメーション */

a.btn-border {
    border-radius: 0;
}

a.btn-border:before,
a.btn-border:after {
    position: absolute;

    width: 100%;
    height: 2px;

    content: '';
    -webkit-transition: all .3s;
    transition: all .3s;

    background: rgb(13, 27, 224);
}

a.btn-border:before {
    top: 0;
    left: 0;
}

a.btn-border:after {
    right: 0;
    bottom: 0;
}

a.btn-border:hover:before,
a.btn-border:hover:after {
    width: 0;
}


#bg tbody {
    /*background: linear-gradient(135deg, #72e478, #ddc96f);*/
    background-image: url('https://ponstream24.com/wp-content/uploads/2020/12/image-1.png');
    background-size: 100%;
    background-color:rgba(99, 192, 104, 0.733);
    background-repeat: repeat;
    background-blend-mode:lighten;
}

#white tbody {
    background-size: 100%;
    background-color:rgba(255, 255, 255, 0.37);
    background-repeat: repeat;
}

#white td,#white th {
    height: 2.5em;
    border: 1px solid #333;
    border-collapse: collapse;
    font-family: '851selffont';
    color:#000000;
    font-size: 2em;
    text-shadow:
    1px 0 0 rgb(255, 255, 255),
    0 1px 0 rgb(255, 255, 255),
    -1px 0 0 rgb(255, 255, 255),
    0 -1px 0 rgb(255, 255, 255);
}



/* table */
#youtube {
    background-image: url('https://info.ponstream24.com/image/youtube.png');
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: left;
    padding-left: 1em;
}

#twitter {
    background-image: url('https://info.ponstream24.com/image/twitter.png');
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: left;
    padding-left: 1em;
}

#discord {
    background-image: url('https://info.ponstream24.com/image/discord.png');
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: left;
    padding-left: 1em;
}

#link {
    background-image: url('https://info.ponstream24.com/image/link.png');
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: left;
    padding-left: 1em;
}

#pon_stream24 {
    background-color: rgba(57, 226, 57, 0.541);
    text-align: center;
}

#anbu {
    background-color: rgba(158, 57, 226, 0.541);
    text-align: center;
}

#ryugi {
    background-color: rgba(68, 57, 226, 0.541);
    text-align: center;
}

#join {
    background-color: #7289DA;
    text-shadow:
    0 0 0 rgb(0, 0, 0),
    0 0 0 rgb(0, 0, 0),
    0 0 0 rgb(0, 0, 0),
    0 0 0 rgb(0, 0, 0);
}


#blank {
    height: 1em;
    background-color: #00000000;
    text-shadow:
    0 0 0 rgb(0, 0, 0),
    0 0 0 rgb(0, 0, 0),
    0 0 0 rgb(0, 0, 0),
    0 0 0 rgb(0, 0, 0);

    border: 0px solid #333;
}

#double {
    height: 1px;
}

#sns {
    overflow:hidden;
    margin-bottom: 0;
}


#sns_left {
    float: left;
    padding-bottom: 5%;
    width: 50%;
    height: 550px;
    background-image: url('https://info.ponstream24.com/image/youtube_logo.png');
    background-repeat: no-repeat;
    background-size: 10%;
    background-position-x: center;
    background-position-y: 4%;
    background-color: #212121;
}

#sns_left iframe {
    padding-top: 0;
    margin: 0;
    width: 100%;
    height: 400px;
}

#sns_left p {
    padding-top: 6%;
    color: #ffffff;
    text-shadow:
    -1px 0 0 rgb(33, 33, 33),
    0 -1px 0 rgb(33, 33, 33),
    1px 0 0 rgb(33, 33, 33),
    0 1px 0 rgb(33, 33, 33);
    font-size: 2em;
    text-align: center;
}

.twitter-timeline {
    margin-left: auto;
    margin-right: auto;
}

#sns_rigth {
    padding-top: 5%;
    float: left;
    width: 50%;
    height: 550px;
    background-image: url('https://info.ponstream24.com/image/twitter_pon.png');
    background-repeat: no-repeat;
    background-size: 50%;
    background-position-x: center;
    background-position-y: 1%;
    background-color: #FFFFFF;
}

#sns_discord {
    margin-top: 0;
    background-image: url('https://info.ponstream24.com/image/discord_logo.png');
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 5%;
    background-size: 30%;
    background-color: #7289DA;
    overflow:hidden;
    height: 350px;
}

#sns_discord p {
    margin-top: 10%;
    font-family: 'MochiyPop-E-P';
    font-size: 2em;
    text-align: center;
    color: #FFFFFF;
    text-shadow:
    -1px 0 0 rgb(33, 33, 33),
    0 -1px 0 rgb(33, 33, 33),
    1px 0 0 rgb(33, 33, 33),
    0 1px 0 rgb(33, 33, 33);
}

#sns_discord a {

    font-family: 'MochiyPop-E-P';
    font-size: 2em;
    text-align: center;
    display: block;
    width: 8em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    color: #FFFFFF;
    text-shadow:
    -1px 0 0 rgb(33, 33, 33),
    0 -1px 0 rgb(33, 33, 33),
    1px 0 0 rgb(33, 33, 33),
    0 1px 0 rgb(33, 33, 33);
}

/*Discord参加*/
.btn-cross {
    display: inline-block;
    position: relative;
    padding: 0.25em 1em;
    border-top: solid 2px rgb(255, 255, 255);
    border-bottom: solid 2px rgb(255, 255, 255);
    text-decoration: none;
    font-weight: bold;
    color: #03A9F4;
}
.btn-cross:before, .btn-cross:after {
    content: '';
    position: absolute;
    top: -7px;
    width: 2px;
    height: -webkit-calc(100% + 14px);
    height: calc(100% + 14px);
    background-color: rgb(255, 255, 255);
    transition: .3s;
}
.btn-cross:before {
    left: 7px;
}
.btn-cross:after {
    right: 7px;
}
.btn-cross:hover:before {
    top: 0px;
    left:0;
    height: 100%;
}
.btn-cross:hover:after {
    top: 0px;
    right: 0;
    height: 100%;
}

/*footer*/
#footer {
    margin: 0;
    padding: 0;
    height: 4m;
    background-color:rgba(0, 0, 0, 0.733);
    top: 0;
    left: 0;
    overflow:hidden;
    color: rgba(255, 255, 255, 0.74);
}

#footer_left {
    float: left;
    margin-left: 1em;
}

#footer_sns {
    float:right;
    margin-right: 2em;
}

#footer_twitter {
    background-image: url('https://info.ponstream24.com/image/twitter.ico');
    background-size: 2em;
    background-repeat: no-repeat;
    width: 2em;
    height: 2em;
}

#footer_youtube {
    background-image: url('https://info.ponstream24.com/image/youtube.ico');
    background-size: 2em;
    background-repeat: no-repeat;
    width: 2em;
    height: 2em;
}

#footer_sns li {
    list-style: none;
}