/* Saturn Begin. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Orbitron:wght@400..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/volte');

* {
    margin: 0;
    padding: 0;
}

:root {
    --global--admin-bar--height: 0 !important;
	--streaming-red: #cc012a;

	--easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	--easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
}

@view-transition {
	navigation: auto;
}

body{
	font-family: "Noto Sans JP", sans-serif !important;
}

.admin-bar {
    --global--admin-bar--height: 32px !important;

	@media only screen and (max-width: 782px) {
		--global--admin-bar--height: 46px !important;
	}
}

#wpadminbar{
	@media only screen and (max-width: 600px) {
		position: fixed !important;
	}
}

.header-container{
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100vw;
}

.saturn-header{
	display: flex;
	background-color: black;
	align-items: center;
}

.header-link{
	text-decoration: none;
}

.saturn-logo {
	max-height: 6vmax;
}

.separater {
	width: 2.5%;
	height: 6vmax;
	background-color: #c78640;
}

.saturn-site-title{
	color: white;
	font-family: "Orbitron", sans-serif;
	font-weight: 600;
	font-size: 3.5vmax;
	padding-left: 12.5px;
}

.site-main{
	margin-top: 10vmax;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}

.header-navigator{
	background-color: #404040;
	height: 3.25vmax;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.nav-btn{
	flex-grow: 1;
	flex: 1;
	text-align: center;
	height: 3.25vmax;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-btn:not(:last-child){
	border-right: #ffffff 0.15rem solid;
}

.nav-btn > a {
	color: rgb(219, 147, 13) !important;
	text-decoration: none !important;
	font-size: 1.8vmax;
	font-weight: bold;
}

.video-main{
	display: flex;
}

.video-content{
	border-radius: 3px 3px 3px 3px;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
	height: calc(9vmax + 2rem);
	margin-top: 10px;

	position: relative;
}

.video-content:last-of-type{
	margin-bottom: 10px;
}

.video-content:hover{
	transition: 0.25s;
	background-color: #ececec;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.629);
}

.video-content:active{
	transition: 0.25s;
	background-color: #c8c8c8;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.777);
}

.video-content > a {
	position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

.video-title{
	font-weight: 700;
	font-size: 1rem;
	padding-left: 5px;
	padding-top: 5px;
	height: 3rem;

	display: -webkit-box; 
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.video-thumbnail{
	border-radius: 3px 0px 0px 0px;
	width: 16vmax;
	height: 9vmax;
	aspect-ratio: 16/9;
}

.video-properties{
	color: white;
	background-color: #404040;
	border-radius: 0px 0px 3px 3px;
	height: 2rem;
	vertical-align: middle;
}

.video-properties > span {
	margin-left: 10px;
}

h1 {
	color: white;
	background-color: #404040;
	padding: 5px;
	padding-left: 1rem;
	border-left: #bbb 1rem solid;

	font-size: 1.5rem;
}

h2 {
	border-left: #404040 10px solid;
	padding-left: 10px;
}

p {
	font-size: 1rem;
}

.btn {
	color: white;
	font-size: larger;
	background-color: #404040;
	padding: 5px;
	padding-top: 2.5px;
	border-radius: 7px;

	user-select: none;
}

.btn:hover {
	background-color: #303030;
	cursor: pointer
}

.btn:active {
	background-color: #1c1c1c;
}

#non-authorized-message{
	resize: none;
	outline: none;
	border-color: #404040;
	border-radius: 0px;
	border-width: 1.5px;
	margin: 10px;

	width: 40rem;
	max-width: 90vw;
	height: 3rem;
	padding: 5px;
}

/* Saturn End. */

.line-auth-btn-frame{
    position: relative;
    color: white;
    display: inline-block;
}

.line-auth-back-ground{
    border-radius: 0.45rem;
    display: flex;
    background-color: #06C755;
}

.line-auth-back-ground:hover{
    background-color: #05B34C;
}
.line-auth-back-ground:active{
    background-color: #048C3C;
}

.line-login-msg{
    display: flex;
    justify-content: center;
    align-items: center;
}

.line-icon-cover{
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    display: flex;
    align-items: center;
}

.line-icon{
    vertical-align: bottom;
    max-width: 2.4rem;
}

.line-line{
    border-left: solid rgba(0,0,0, .08);
}

.main-msg{
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    padding-left: 2.85rem;
    padding-right: 2.85rem;
    font-family: 'Volte', 'M PLUS 2' ,sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
}

.volte-eng{
    font-size: 1.44rem;
}

.no-deco{
    text-decoration: none;
    color: white;
}

/* Journal Start */
.journal-container{
	border-radius: 5px;
	border-bottom: 1px black solid;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
	margin-top: 10px;
}

.journal-header{
	padding: 5px 0px 0px 5px;
	background-color: #8a8a8a;
	color: white;
}

.journal-body{
	padding: 5px;
}

.journal-footer{
	padding: 5px;
	background-color: #404040;
	color: white;
}

.journal-title{
	margin-left: 10px;
	font-weight: bold;
	font-size: larger;
}

.journal-footer > span{
	margin-right: 10px;
}
/* Journal End */

/* Animation Start */
.loading-upside{
	position: fixed;
	z-index: 20;

	width: 100vw;
	height: 50vh;
	background-color: white;

	top: 0%;

	transition: 0.48s;
	transition-timing-function: var(--easeOutExpo);
}

.loading-upside-clear{
	top: -50%;
}

.loading-downside{
	position: fixed;
	z-index: 20;

	width: 100vw;
	height: 50vh;
	background-color: black;

	top: 50%;

	transition: 0.48s;
	transition-timing-function: var(--easeOutExpo);
}

.loading-downside-clear{
	top: 100%;
}

.circle-upside{
	position: fixed;
	z-index: 21;
	
	width: 50vw;
	height: calc(50vw/2);

	box-sizing: border-box;
	
	border: 15px solid black;
	border-bottom: none;


	border-radius: calc(50vw/2) calc(50vw/2) 0 0;

	top: calc(50% - 50vw / 2);
	left: calc(50% - 50vw / 2);
	
	transition: 0.48s;
	transition-timing-function: var(--easeOutExpo);
}

.circle-upside-clear{
	top: calc(-50vw / 2);
}

.circle-downside{
	position: fixed;
	z-index: 21;

	width: 50vw;
	height: calc(50vw/2);

	border: 15px solid white;
	border-top: none;

	box-sizing: border-box;

	border-radius: 0 0 calc(50vw/2) calc(50vw/2);

	top: calc(50%);
	left: calc(50% - 50vw / 2);

	transition: 0.48s;
	transition-timing-function: var(--easeOutExpo);
}

.circle-downside-clear{
	top: calc(100% + 50vw / 2);
}

.stick-upside{
	width: 15px;
	z-index: 22;

	height: 57.735026918963vh;
    position: fixed;
	background-color: black;

	transform: rotate(30deg) skewY(-30deg);
	transform-origin:50% 100%;

	left: 50%;
	top: -7.7%;

	transition: 0.48s;
	transition-timing-function: var(--easeOutExpo);
}

.stick-upside-clear{
	top: calc(-50% +  -8%);
}

.stick-downside{
	width: 15px;
	z-index: 22;
	
	height: 57.735026918963vh;
    position: fixed;
	background-color: rgb(255, 255, 255);

	transform: rotate(210deg) skewY(-30deg);
	transform-origin:50% 100%;

	left: 50%;
	top: -7.7%;

	transition: 0.48s;
	transition-timing-function: var(--easeOutExpo);
}

.stick-downside-clear{
	top: calc(50% +  -7.7%);
}

.numbered-list{
	display: flex;
	justify-content: center;
}

.numbered-list>div:nth-child(2){
    margin: auto;
}

button {
	background-color: white;
	color: black;
	font-size: 1rem;
	padding: 10px;
	border: #404040 3px solid;
	border-radius: 5px;
	margin-top: 10px;
}