@charset "utf-8";
/* CSS Document */

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

body,
html {
	width: 100%;
	margin: 0;
}

html {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-weight: 500;
	font-size: 1.2rem;
	background-color: #000;
	color: #ddd;

}


header {
	max-width: 800px;
	margin: 0 auto;
}

.container {
	display: flex;
	flex-direction: row;
	height: auto;
	justify-content: center;
}



.news-list {
	display: flex;
	align-items: center;
	flex-direction: row;
	height: auto;
	justify-content: left;

	margin: 10px auto;
	border: 1px solid #ddd;
}

.example li{
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}

.left-column {
	background: transparent;
}

.center-column {
	background: transparent;
}

.right-column {
	background: transparent;
}


.bg-img-st {
	position: relative;
	min-height: 100%;
	height: 100%;
	/*--スクロールをさせるため 高さ指定--*/
	background-size: cover;
	/*--背景画像のサイズ--*/
	background-attachment: fixed;
	/*--背景画像の固定--*/
	background-repeat: no-repeat;
	/*--背景画像の繰り返し--*/
	background-position: center center;
	/*--背景画像の位置--*/
	z-index: 2;
	padding: 2.5em 0;
}


.bg-img {

	background-image: url(../img/12.png);

}

main {
	max-width: 800px;
	margin: 10px auto;
	border: 1px solid #ddd;
	padding: 10px;
	background-color: #222;
	/*overflow-x: hidden;*/
}

.adsense {
	max-width: 800px;
	margin: 10px auto;

}

section {
	background-color: #222;
	padding: 20px 0;
	padding-top: 10px;
	margin: 10px 0;
}

.news {
	padding: 10px;

}


accsess {
	padding: 20px 0;
}

footer {
	display: block;
	height: auto;
	margin: 50px 0;
	color: #ddd;
	text-align: center;
}

.infomation-wrap {
	background-color: #ddd;
	padding: 50px 0;
}


.display_width {
	max-width: 700px;
	margin: 0 auto;
}




p {
	text-align: left;
	letter-spacing: 0.05rem;
	padding: 10px 30px;
	padding-bottom: 30px;
	font-weight: 500;
}

nav {
	max-width: 800px;
	margin: 10px auto;
	border: 1px solid #ddd;
	padding: 10px;
	background-color: #222;
	overflow-x: hidden;

}

nav p {
	padding: 2px 5px;
	font-weight: 600;
}

nav p::before {
	content: "";
	height: 1.5rem;
	width: 3px;
	padding: 3px 5px;
	background-color: hotpink;
	margin-right: 3px;
}


a {
	text-decoration: none;
	display: block;
	color: hotpink;
	position: relative;
	padding: 3px 5px;
	margin-left: 10px;
	font-weight: 600;
}




h1 {
	font-size: 2.0rem;
	padding: 30px 20px;
	--interval: 1s;
	display: block;
	text-shadow:
		0 0 .2rem #ddd,
		0 0 1.0rem #ddd,
		0 0 0.8rem #ddd,
		0 0 2.8rem #ddd;
	animation: flicker3 1.5s infinite alternate;
	color: #fff;
	background-color: #222;
}

h2 {
	position: relative;
	display: block;
	font-size: 1.5rem;
	padding: 20px;
	border: 1px solid #ddd;
	border: none;
	z-index: 10;
	color: #eee;
	animation: flicker2 2.5s infinite alternate;
}

h2::before {
	position: absolute;
	display: block;
	z-index: 9;
	left: 0;
	top: 0px;
	content: "";
	height: calc(1.5rem + 44px);
	padding: 0px 5px;
	background-color: hotpink;
	margin-right: 3px;
	animation: flicker2 2.5s infinite alternate;

}


h3 {
	display: block;
	font-size: 1.2rem;
	padding: 15px 10px;
	margin: 20px 10px;
	background-image: url(../img/imgphoto1.png);
	background-color: #555;
	color: #ddd;
	animation: flicker 2.5s infinite alternate;

}

h3::before {
	content: "■";
	font-size: 1.2rem;
	padding: 15px 10px;
	margin: 20px 10px;
	animation: flicker3 2.5s infinite alternate;
	margin-bottom: 25px;

}

h4 {
	display: block;
	font-size: 1.0em;
	padding: 10px;
	border-bottom: 1px solid #ddd;
	margin: 0 20px;
	margin-top: 20px;

}



.maximg {
	display: block;
	width: 100%;
	height: auto;
}

.img {
	display: block;
	width: 100%;
	height: auto;
	padding: 10px;
}



a:hover {
	opacity: 0.8;

}

a::before {
	position: absolute;
	left: -10px;
	display: block;
	content: "";
	height: 1.5rem;
	width: 3px;
	padding: 3px 5px;
	background-color: transparent;
	opacity: 0;
}

nav a:hover::before {
	content: "";
	height: 1.2rem;
	width: 3px;
	padding: 0px 5px;
	background-color: hotpink;
	opacity: 1;
}


a:visited {
	text-decoration: underline;
	opacity: 0.8;
}


#tictok,
#twitter {
	background-color: transparent;

}


.none {
	display: none;
	opacity: 0;
}


ul {
	list-style-type: none;
	padding: 5px 30px;
}




.danger {
	background-color: yellow;
	color: #111;
	font-weight: 600;
	border: 1px solid yellow;
}

.rank {
	padding: 10px 30px;
	color: hotpink;
}

.coment {
	color: #ddd;
}


.secret p {
	color: #ddd;
}





.coverimg {
	display: block;
	max-width: 100vh;
	height: 60vh;
	object-fit: cover;
	margin: 20px auto;
	padding: 0 10px;
	width: 95%;
}

.coverimg__4 {
	height: 50vh;
	max-width: 100vh;
	width: 100%;
	margin: 0 auto;
}

.neontext {
	animation: flicker 1.5s infinite alternate;
	color: #ddd;
	/* border: 5px solid #ddd; */
	border-radius: 0;
	padding: 0.4em;
	/*box-shadow: 0 0 .2rem #ddd,
		0 0 .2rem pink,
		0 0 1.0rem #ddd,
		0 0 0.8rem #ddd,
		0 0 2.8rem #ddd,
		inset 0 0 1.0rem #f0e68c;*/
	max-width: 700px;
	margin: 30px auto;

}


@keyframes flicker {

	18%,
	22%,
	25%,
	53%,
	57%,
	100% {
		text-shadow:
			0 0 1px #ddd,
			0 0 2px #ddd;
	}

	0% {
		text-shadow:
			0 0 1px #ddd,
			0 0 0px #ddd;
	}
}


@keyframes flicker3 {

	18%,
	22%,
	25%,
	53%,
	57%,
	100% {
		text-shadow:
			0 0 3px #ddd,
			0 0 10px #ddd,
			0 0 6px #ddd,
			0 0 9px #ddd;
	}

	0% {
		text-shadow:
			0 0 1px #ddd,
			0 0 15px #ddd,
			0 0 0px #ddd;
	}
}

@keyframes flicker2 {

	3%,
	21%,
	16%,
	35%,
	63%,
	100% {
		box-shadow:

			0 0 3px hotpink,
			0 0 8px hotpink,
			0 0 4px hotpink;
	}

	0% {
		box-shadow:
			0 0 13px hotpink,
			0 0 1px hotpink,
			0 0 0px hotpink;
	}
}





.x-sign {
	font-size: 2rem;
	--interval: 1s;
	display: block;
	text-shadow:
		0 0 10px var(--color1),
		0 0 20px var(--color2),
		0 0 40px var(--color3),
		0 0 80px var(--color4);
	will-change: filter, color;
	filter: saturate(60%);
	animation: x-sign steps(100) var(--interval) 1s infinite;
	padding: 10px;
	text-align: left;
}

.x-sign__a {
	color: yellow;
	--color1: goldenrod;
	--color2: orangered;
	--color3: mediumblue;
	--color4: purple;
}

.x-sign__b {
	color: lightyellow;
	--color1: yellow;
	--color2: gold;
	--color3: orange;
	--color4: darkred;
	font-size: 1.4rem;
	font-family: 'DotGothic16', sans-serif;
	margin: 0 auto;
	text-align: center;
}

.x-sign__c {
	color: lightyellow;
	--color1: yellow;
	--color2: lime;
	--color3: green;
	--color4: mediumblue;
	font-family: 'Train One', cursive;
}

.x-sign__d {
	color: lightyellow;
	--color1: gold;
	--color2: firebrick;
	--color3: pink;
	--color4: red;
	font-family: 'DotGothic16', sans-serif;
}


.x-sign__e {
	color: azure;
	--color1: azure;
	--color2: aqua;
	--color3: dodgerblue;
	--color4: blue;
	font-family: 'DotGothic16', sans-serif;
}

.x-sign__f {
	color: tomato;
	--color1: orangered;
	--color2: firebrick;
	--color3: maroon;
	--color4: darkred;
	font-family: 'Train One', cursive;
}

.x-sign__g {
	color: lightyellow;
	--color1: yellow;
	--color2: orange;
	--color3: brown;
	--color4: purple;
	font-family: 'DotGothic16', sans-serif;
}

.x-sign__h {
	color: yellow;
	--color1: yellow;
	--color2: lime;
	--color3: green;
	--color4: darkgreen;
	font-family: 'DotGothic16', sans-serif;

}

.x-sign__i {
	color: lightyellow;
	--color1: yellow;
	--color2: gold;
	--color3: orange;
	--color4: darkred;
	font-size: 1.4rem;
}


@keyframes x-sign {

	50% {
		color: white;
		filter: saturate(200%) hue-rotate(20deg);
	}

}




#slide li {
	position: relative;
	text-align: left;
	padding: 0;
	font-weight: 700;
	margin: 0;
	width: 50%;
	max-height: 75vh;
	object-fit: cover;
}

#slide li::before {
	display: none;

}

.ninki-wrap {
	border: 1px solid #eee;
	display: block;
	padding: 0.3rem 1.5rem;
	width: 100%;
	
}



.infomation {
	display: block;
	padding: 1.5rem;
	margin: 1.5rem auto;
	border: 1px solid #eee;
	max-width: 500px;
	text-align: center;
	background-color: #222;
}

/* PC版のみ適用 */
@media screen and (min-width: 767px) {
	.pcnone {
		display: none;
	}

	.coverimg {
		margin: 0px auto;
	}

	h2 {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}



/*モバイルディスプレイ対応*/
@media screen and (max-width: 767px) {
	html {
		font-size: 100%;
	}

	main {

		padding: 3px;
		border: none;
	}

	nav {
		padding: 3px;
	}

	h1 {
		font-size: 1.8rem;
		padding: 20px;
		--interval: 1s;
		display: block;
		text-shadow: 0 0 0.2rem #ddd, 0 0 1rem #ddd, 0 0 0.8rem #ddd, 0 0 2.8rem #ddd;
		animation: flicker3 1.5s infinite alternate;
		margin-top: 0px;
		text-align: center;
		color: #fff;
	}

	h2 {
		margin-bottom: 20px;
		padding-right: 0px;

	}

	h2::before {
		position: absolute;
		display: block;
		z-index: 9;
		left: 0;
		top: 0px;
		content: "";
		height: calc(1.5rem + 42px);
		padding: 0px 5px;
		background-color: hotpink;
		margin-right: 3px;
	}


	h3 {
		margin: 0px 0px;
		border: 1px solid #ddd;
		margin-bottom: 20px;
		font-weight: bold;

	}

	h4 {
		display: block;
		font-size: 1.0em;
		padding: 10px 0px;
		border-bottom: 1px solid #ddd;
		margin: 20px 10px;
		margin-top: 20px;
		font-weight: bold;
	}

	p {
		text-align: left;
		letter-spacing: 0.05rem;
		line-height: 1.5rem;
		padding: 0px 15px;
		padding-bottom: 30px;
		font-weight: 500;
	}

	.rank {
		padding: 10px 20px;
		color: hotpink;
	}



	#display_contents__m ul {
		padding: 15px 30px;
		padding-bottom: 30px;
	}


	.coverimg {
		display: block;
		height: 40vh;
		object-fit: cover;
		padding: 10px;
		width: 100%;
		overflow-x: hidden;
	}





	.ninki-wrap {
		border: 1px solid #eee;
		display: block;
		padding: 0.3rem 1.5rem;
		width: 100%;

	}

	.bg-img-st {
		position: relative;
		min-height: 100%;
		height: 100%;
		/*--スクロールをさせるため 高さ指定--*/
		background-size: cover;
		/*--背景画像のサイズ--*/
		background-attachment: fixed;
		/*--背景画像の固定--*/
		background-repeat: no-repeat;
		/*--背景画像の繰り返し--*/
		background-position: center center;
		/*--背景画像の位置--*/
		z-index: 2;
		padding: 0;
	}



	.bg-img {

		background-image: none;

	}

	a {
		text-decoration: none;
		display: block;
		color: hotpink;
		position: relative;
		padding: 3px 0px;
		margin-left: 0px;
		font-weight: 600;
	}

	ul {
		padding-right: 0px;
	}


	#twitter {
		max-width: 95%;
		margin: 0 auto;
	}

	.infomation {
		display: block;
		padding: 1.5rem;
		margin: 1.5rem 20px;
		border: 1px solid #eee;
		width: auto;
		max-width: 500px;
		text-align: center;
	}

	/*.news {
		width: 100%;
	}*/
	.news-list {
		display: flex;
		align-items: center;
		flex-direction: row;
		height: auto;
		justify-content: left;
		width: 100%;
		margin: 10px auto;
		border: 1px solid #ddd;
		padding: 0;
	}
	a.news-link {
		margin-left: 1.5rem;
	
	}

	
.adsense {
	max-width: 500px;
	margin: 10px auto;

}

	.flex-content {
		display: block;
		max-width: 300px;
		margin: 0 auto;	
	}
	
}

.line {
	display: inline;
	background: linear-gradient(transparent 90%, hotpink 0%);
}

.pink {
	color: hotpink;
	font-weight: 600;
}

.ninki {
	font-weight: 600;
	animation: flicker 2.5s infinite alternate;
}



#display_contents__l ul li,
#display_contents__d ul li {
	display: block;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}


#display_contents__n a {
	color: #eee;
}

#display_contents__n a::before {
	display: none;
}

/* スクロールCSS */
.fade-in {
	opacity: 0;
	transition-duration: 500ms;
	transition-property: opacity, transform;
}

.fade-in-up {
	transform: translate(0, 50px);
}

.fade-in-down {
	transform: translate(0, -50px);
}

.fade-in-left {
	transform: translate(-50px, 0);
}

.fade-in-right {
	transform: translate(50px, 0);
	overflow: hidden;
}

.scroll-in {
	opacity: 1;
	transform: translate(0, 0);
}

.kyujinimg {
	display: block;
	height: auto;
	object-fit: contain;
	padding: 10px;
	width: 100%;
	overflow-x: hidden;
	max-width: 100vh;
	margin: 0 auto;

}

.kyujin {

	border: 1px solid hotpink;
	padding: 10px;
	margin: 10px auto;
}

.kyujin li {
	width: inherit;
	margin: 0 auto;
}


li.block {
	display: block;
	padding: 3px 5px;

}


.morelink a{
	margin: 0 auto;
}

.morelink .infomation{
	display: block;
    padding: 0.5rem;
    margin: 0.5rem auto;
    border: 1px solid #eee;
    width: auto;
    max-width: 250px;
    text-align: center;
	color: #fff;

}

blockquote p {
	color: #aaa;
}

cite {
	color: #aaa;
}

blockquote a{
	color: #aaa;
}