/*
Theme Name: The Theme of Welcome to the World of VTubers!
Theme URI: https://web-2024-2q.miki-main.com/
Author: Miki Shimose
Author URI: https://miki-main.com/
Description: VTuberの世界へようこそのオリジナルテーマです。
Version: 1.0
License: Miki Shimose All Rights Reserved.
License URI: https://miki-main.com/
Text Domain: vtuber-original-theme
Tags: original
*/

body {
	background-color:#fffff8;
	font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	/*background:linear-gradient(to left, #ccf4ff, #99ddf6);*/
	/*background:linear-gradient(to left, rgba(204, 244, 255, 0.2), rgba(153, 221, 246, 0.2));
	width: 100%;
	height: 100vh;
	position: relative;*/
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index:-10;
}

.circles li {
	position: absolute;
	display: block;
	list-style: none;
	width: 20px;
	height: 20px;
	background: rgba(120, 226, 255, 0.2);
	animation: animate 25s linear infinite;
	bottom: -150px;
}

.circles li:nth-child(1) {
	left: 25%;
	width: 80px;
	height: 80px;
	animation-delay: 0s;
}

.circles li:nth-child(2) {
	left: 10%;
	width: 20px;
	height: 20px;
	animation-delay: 2s;
	animation-duration: 12s;
}

.circles li:nth-child(3) {
	left: 70%;
	width: 20px;
	height: 20px;
	animation-delay: 4s;
}

.circles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	animation-delay: 0s;
	animation-duration: 18s;
}

.circles li:nth-child(5) {
	left: 65%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
}

.circles li:nth-child(6) {
	left: 75%;
	width: 110px;
	height: 110px;
	animation-delay: 3s;
}

.circles li:nth-child(7) {
	left: 35%;
	width: 150px;
	height: 150px;
	animation-delay: 7s;
}

.circles li:nth-child(8) {
	left: 50%;
	width: 25px;
	height: 25px;
	animation-delay: 15s;
	animation-duration: 45s;
}

.circles li:nth-child(9) {
	left: 20%;
	width: 15px;
	height: 15px;
	animation-delay: 2s;
	animation-duration: 35s;
}

.circles li:nth-child(10) {
	left: 85%;
	width: 150px;
	height: 150px;
	animation-delay: 0s;
	animation-duration: 20s;
}

@keyframes animate {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
		border-radius: 0;
	}

	100% {
		transform: translateY(-1400px) rotate(720deg);
		opacity: 0;
		border-radius: 50%;
	}
}

/* header */
header {
	height:60px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	background-color:#fff;
	filter:drop-shadow(1px 1px 3px rgba(0,0,0,0.3));
	padding:0 20px;
}

header .site-title a {
	color:#2b2b2b;
	text-decoration:none;
}

header nav,
header nav div,
header nav ul {
	height:100%;
}

header nav ul {
	display:flex;
}

header nav ul li {
	/*margin-right:12px;*/
}
header nav ul li:last-child {
	margin-right:0;
}

header nav ul li a {
	text-decoration:none;
	padding:14px 30px;
	/*border-bottom:1px solid #ebebeb;*/
	color:#2b2b2b;
	display:flex;
	align-items:center;
	height:100%;
	box-sizing:border-box;
}

header nav ul li a:hover {
	background-color:#ebebeb;
}

.sp-header-menu-icon {
	display:none;
}
#sp-header-menu-area {
	display:none;
}

/* footer */
footer {
	text-align:center;
	background-color:#525252;
	padding:40px 20px;
	color:#fff;
}

@media screen and (max-width: 760px) {
	.sp-header-menu-icon {
		display:block;
	}
	.primary-menu {
		display:none;
	}
	#sp-header-menu-area {
		display:none;
		height:100%;
		width:100%;
		background-color:rgba(0,0,0,0.85);
		color:#fff;
		position: fixed;
		top: 0;
		left: 0;
		overflow-x: hidden;
		z-index: 9;
	}
	.sp-header-icon-area {
		height:60px;
		display:flex;
		justify-content:right;
		align-items:center;
		padding-right:20px;
	}
	.sp-header-menu-icon {
		cursor:pointer;
	}
	.sp-header-menu-icon:hover.sp-header-open i {
		color:#4f4f4f;
	}
	.sp-header-menu-icon:hover.sp-header-close i {
		color:#ababab;
	}
	.sp-header-menu-icon i {
		font-size:30px;
	}
	#sp-header-menu {
		display:flex;
		justify-content:center;
		align-items:center;
	}
	#sp-header-menu ul li {
		list-style:none;	
	}
	#sp-header-menu ul li a {
		color:#fff;
		text-decoration:none;
		display:block;
		padding-top:20px;
		padding-bottom:10px;
		border-bottom:1px solid #ababab;
	}
	#sp-header-menu ul li:not(:first-child) {
		margin-top:30px;
	}
	#sp-header-menu ul li a:hover {
		color:#ababab;
	}
}

@media screen and (max-width: 390px) {
	header {
		height:auto;
		padding:10px 20px;
	}
}