body {
	/* フォント */
	font-family: 'ZCOOL QingKe HuangYou', cursive;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-family: 'Dosis', sans-serif;

	/* 背景 */
	background-color: #e2e3e8;
	background-image:url(../imgs/image_3.jpg);
 	background-repeat:no-repeat;
 	width: 100%;
	height:40%;
	background-size: cover;
 	background-attachment:fixed
	
}

/* 画面文字 */
.main {
	width: 100%;
	height: 100%;
	background-position: center top;
	background-size: cover;
}
.first_title {
	width: 400px;
	height: 250px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -200px;
	border-radius: 8px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.5);
	overflow: hidden;
	z-index: 2;
	padding: 50px;
	box-sizing: border-box;
}
.first_title::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-filter: blur(70px);
	-moz-filter: blur(70px);
	-ms-filter: blur(70px);
	-o-filter: blur(70px);
	filter: blur(70px);
	z-index: -3;
	margin: -30px;
	background-color: rgba(0,0,0,0.2);
	background-image: url(../imgs/image_3.jpg);
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
}
.first_title p {
	text-align: center;
	margin-bottom: 20px;
}

/* live */
.main {
	width: 100%;
	height: 100%;
	background-position: center top;
	background-size: cover;
}
.live_stream {
	width: 850px;
	height: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -250px;
	margin-left: -425px;
	border-radius: 8px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.5);
	overflow: hidden;
	z-index: 2;
	padding: 50px;
	box-sizing: border-box;
}
/* サイズテスト */
.live_stream video {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.live_stream::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-filter: blur(70px);
	-moz-filter: blur(70px);
	-ms-filter: blur(70px);
	-o-filter: blur(70px);
	filter: blur(70px);
	z-index: -3;
	margin: -30px;
	background-color: rgba(0,0,0,0.2);
	background-image: url(../imgs/image_3.jpg);
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
}
.live_stream p {
	text-align: center;
	margin-bottom: 20px;
}

/* ナビ */
*{
/* 初始化 取消页面元素的内外边距 */
margin: 0;
padding: 0;
/* 这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */
box-sizing: border-box;
}
body{
/* 弹性布局 水平、垂直居中 */
display: flex;
justify-content: center;
align-items: top;
/* 100%窗口高度 */
height: 100vh;
/* 相对定位 */
position: relative;
}
.container{
/* 弹性布局 */
display: flex;
/* 允许换行 */
flex-wrap: wrap;
/* 将元素靠边对齐 */
justify-content: space-around;
}
.container .btn{
position: relative;
width: 100px;
height: 30px;
margin: 20px;
}
.container .btn a{
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/* 透明度为0.05的白色背景 */
background: rgba(255,255,255,0.05);
/* 阴影 */
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
/* 上下边框 */
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
/* 圆角 */
border-radius: 15px;
color: #5a648b;
z-index: 1;
font-weight: 400;
/* 字间距 */
letter-spacing: 1px;
/* 去下划线 */
text-decoration: none;
/* 动画过渡 */
transition: 0.5s;
/* 溢出隐藏 */
overflow: hidden;
/* 背景模糊 */
backdrop-filter: blur(30px);
}
.container .btn:hover a{
letter-spacing: 5px;
}
/* 制作扫光效果 */
.container .btn a::before{
content: "";
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
/* 渐变背景 透明到白色 */
background: linear-gradient(to right,transparent,rgba(255,255,255,0.15));
/* 沿X轴倾斜45度，向右平移0像素 */
transform: skewX(45deg) translateX(0);
transition: 0.5s;
}
.container .btn:hover a::before{
/* 沿X轴倾斜45度，向右平移200% */
transform: skewX(45deg) translateX(200%);
}
/* 制作按钮上下两个发光层 */
.container .btn::before,
.container .btn::after{
content: "";
/* 绝对定位，横向居中 */
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 10px;
/* 自定义颜色属性--c, 可通过var函数调用 */
/* --c: gold; */
background: var(--c);
border-radius: 5px;
box-shadow: 
0 0 5px var(--c),
0 0 15px var(--c),
0 0 30px var(--c),
0 0 60px var(--c)
;
transition: 0.5s;
}
.container .btn::before{
bottom: -5px;
}
.container .btn::after{
top: -5px;
}
.container .btn:hover::before,
.container .btn:hover::after{
height: 50%;
width: 80%;
border-radius: 15px;
transition-delay: 0.3s;
}
.container .btn:hover::before{
bottom: 0;
}
.container .btn:hover::after{
top: 0;
}
/* 分别设置自定义颜色属性--c */
.container .btn:nth-child(1)::before,
.container .btn:nth-child(1)::after{
--c: #6a7292;
}
.container .btn:nth-child(2)::before,
.container .btn:nth-child(2)::after{
--c: #6a7292;
}
.container .btn:nth-child(3)::before,
.container .btn:nth-child(3)::after{
--c: #6a7292;
}