@charset "UTF-8";

/* スタイルシート */
:root{
	--mb:12px;
}

html,body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,li,figure,picture,input,textarea{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html{
	background-color:#f9f6ee;
	background-image:url('img/bg.png');
}
body{
	font-family:'Noto Sans JP','メイリオ','helvetica';
	color:#333;
	line-height:1;
	word-wrap:break-word;
}
a{
	text-decoration: none;
	color:#00f;
}
a:hover{
	color:#08f;
}
img{
	border:0;
	vertical-align:bottom;
}
li{
	list-style-type:none;
}

/* layout */
body > section{
	margin:6px;
}
#contents{
	display:block;
}
#contents > div{
	display:flex;
	flex-direction:column;
	gap:20px;
}
@media screen and (min-width:600px){
	body > section{
		width:1240px;
		margin:12px auto;
	}
	#contents{
		display:grid;
		grid-template-columns:300px 600px 300px;
		grid-template-areas:"side main sub";
		gap:20px;
	}
	#main{
		grid-area:main;
	}
	#sub{
		grid-area:sub;
	}
	#side{
		grid-area:side;
	}
}

/* common */
.clearafter:after,.contents:after{
	content:"";
	display:block;
	clear:both;
}
.box{
	background-color:#fff;
}
.box > h1{
	font-size:120%;
	padding:10px;
	border-bottom:1px solid rgba(0,0,0,0.1);
	line-height:1.5;
	font-family:'M PLUS 1';
}
@media screen and (min-width:600px){
	.box > h1{
		padding:15px 20px;
	}
}
h2{
	font-size:100%;
	padding:6px;
	background-color:rgba(255,128,0,0.5);
	font-family:'M PLUS 1';
}
h2 span{
	display:inline-block;
	font-size:70%;
	margin-left:1em;
}
p{
	line-height:1.5;
}
.fs90{
	font-size:90%;
}
.fs80{
	font-size:80%;
}
.fs70{
	font-size:70%;
}
.linkbtn{
	text-align:right;
	border-top:1px solid rgba(0,0,0,0.1);
	padding:12px;
}
.linkbtn a{
	font-size:90%;
	display:inline-block;
}
figure img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.popup{
	cursor:pointer;
}

/* head */
#head{
	width:100%;
	height:60px;
	position:relative;
	z-index:1000;
	overflow:hidden;
}
#head article{
	width:100%;
	height:60px;
	position:absolute;
	right:0;
	left:6px;
	margin:0 auto;
	max-width:1240px;
	display:flex;
	align-items:center;
	gap:10px;
}
#head #sitename img{
	height:100%;
	max-height:40px;
}
@media screen and (min-width:600px){
	#head article{
		left:0;
	}
}

#headbg{
	opacity:0;
	transition:all 0.5s;
}
#headbg1,
#headbg2{
	position:absolute;
	top:-1250px;
	left:calc(50% - 1250px);
	width:2500px;
	height:2500px;
	background-repeat:repeat;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes rotation{
	0% {transform: rotate(0);}
	100%{transform: rotate(360deg);}
}
@keyframes scroll_up{
	0% {background-position:0 500px;}
	100%{background-position:0 0;}
}
@keyframes scroll_down{
	0% {background-position:0 0;}
	100%{background-position:0 500px;}
}
@keyframes scroll_right_up{
	0% {background-position:0 500px;}
	100%{background-position:500px 0;}
}
@keyframes scroll_rain1{
	0% {background-position:0 -600px;}
	100%{background-position:300px 0;}
}
@keyframes scroll_rain2{
	0% {background-position:-300px 0;}
	100%{background-position:0 600px;}
}
@keyframes scroll_water1{
	0% {background-position:0 0; filter:blur(2px); }
	50%{background-position:150px 150px; filter:blur(2px); }
	100%{background-position:300px 300px; filter:blur(2px); }
}
@keyframes scroll_water2{
	0% {background-position:300px 300px; opacity:0.7; transform:scale(1,-1); filter:blur(2px); }
	50%{background-position:150px 150px; opacity:0.5; transform:scale(1,-1); filter:blur(3px); }
	100%{background-position:0 0; opacity:0.7; transform:scale(1,-1); filter:blur(2px); }
}
@keyframes scroll_wave{
	0% {background-position:0 0;}
	100%{background-position:500px 0;}
}
@keyframes scroll_wave2{
	0% {background-position:0 0;}
	100%{background-position:500px 0;}
}
@keyframes contrast{
	0% {filter:contrast(0.5);}
	50%{filter:contrast(1);}
	100%{filter:contrast(0.5);}
}

/* description */

/* navi toggle */
#navi_toggle{
	position:fixed;
	z-index:2000;
	top:0;
	right:0;
	margin:0;
	padding:5px;
	background-color:#651;
	height:50px;
	width:50px;
	cursor:pointer;
	opacity:0.9;
}
#navi_toggle span{
	display:inline-block;
	transition:all .4s;
	box-sizing:border-box;
	position:absolute;
	left:15px;
	width:30px;
	height:4px;
	border-radius:4px;
	background-color: #fff;
}
#navi_toggle span:nth-of-type(1){
	top:20px;
}
#navi_toggle span:nth-of-type(2){
	top:28px;
}
#navi_toggle span:nth-of-type(3){
	top:36px;
}
#navi_toggle.active span:nth-of-type(1) {
	-webkit-transform: translateY(8px) rotate(-45deg);
	transform: translateY(8px) rotate(-45deg);
}
#navi_toggle.active span:nth-of-type(2) {
	opacity: 0;
}
#navi_toggle.active span:nth-of-type(3) {
	-webkit-transform: translateY(-20px) rotate(45deg);
	transform: translateY(-8px) rotate(45deg);
}

#navi{
	display:flex;
	flex-direction:column;
	width:100%;
	position:fixed;
	z-index:3000;
	top:60px;
	background-color:#651;
	opacity:0.9;
	transition:0.3s;
	transform:translateX(100%);
	font-family:'M PLUS 1';
}
#navi.active{
	transform:translateX(0);
}
#navi a{
	display:block;
	padding:18px 12px;
	color:#fff;
	border-top:1px solid rgba(0,0,0,0.5);
}
@media screen and (min-width:600px){
	#navi_toggle{
		display:none;
	}
	#navi{
		width:1240px;
		margin:10px auto;
		flex-direction:row;
		position:static;
		transform:translateX(0);
	}
	#navi a{
		border:none;
	}
}

/* list entry */
#entry > li > a{
	border-bottom:1px solid rgba(0,0,0,0.1);
	padding:10px;
  background-image:linear-gradient(180deg,#f9f9f9,#fff 10%);
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
#entry > li > a:hover{
  background-image:linear-gradient(180deg,#f6f6f6,#f9f9f9 10%);
}
@media screen and (min-width:600px){
	#entry > li > a{
		padding:20px;
	}
}
#entry > li > a.ranking{
	display:block;
	padding:10px 30px;
	font-size:80%;
	text-align:center;
	letter-spacing:0.2em;
	color:#f30;
  background-image:linear-gradient(0,#fff,#fff);
}
#entry > li > a.ranking:before,#entry > li > a.ranking:after{
	content:"★";
	color:#f80;
}
#entry > li > a h2{
	color:#468;
	padding:0;
	font-size:110%;
	background-color:transparent;
	line-height:1.5;
	text-shadow:0 0 5px rgba(0,0,0,0.1);
	flex:1 0 100%;
}
#entry > li figure{
	flex:1;
	width:100%;
	aspect-ratio:16/10;
	border:1px solid #fff;
	box-shadow:0 0 6px rgba(0,0,0,0.1);
}
#entry > li article{
	flex:1;
	display:flex;
	flex-direction:column;
	gap:10px;
	font-size:80%;
}
#entry > li ul{
	display:flex;
	gap:3px;
	flex-wrap:wrap;
}
#entry > li ul li{
	color:#987;
	padding:6px;
	background-color:rgba(240,230,220,1);
	border-radius:3px;
}
#entry > li article time{
	color:#969;
}
#entry > li cite{
	color:#987;
	line-height:1.3;
}

/* newPost OK */
#newPost h2{
	background-color:#ccc;
	margin-bottom:1em;
}
#newPost ul{
	display:flex;
	flex-direction:column;
	row-gap:10px;
}
#newPost li{
	flex:1;
}
#newPost a{
	display:flex;
	flex-direction:row;
	gap:10px;
}
#newPost figure{
	flex:1 0 100px;
	aspect-ratio:1/1;
}
#newPost p{
	font-size:90%;
}
@media screen and (min-width:600px){
	#newPost p{
		font-size:80%;
	}
}

/* post */
main > div{
	padding:10px;
}
@media screen and (min-width:600px){
	main > div{
		padding:20px;
	}
}

#post{
	display:flex;
	flex-direction:column;
	gap:10px;
}
#post > h1{
	font-size:120%;
	line-height:1.3;
}
#post > h2{
	line-height:1.3;
}
#post > h3{
	font-size:100%;
	color:#f80;
	padding-top:1em;
	border-top:1px solid rgba(0,0,0,0.1);
	font-family:'M PLUS 1';
}
#post > h3:before{
	content:'';
	display:inline-block;
	width:0.8em;
	height:0.8em;
	margin-right:0.4em;
	background-color:#f90;
}
#post ul.html{
	display:flex;
	flex-wrap:wrap;
	gap:1em;
}
#post ul.html li{
	color:#ccc;
	padding:0.5em 0;
}
#post ul.html li:before{
	content:'▲';
	display:inline-block;
	margin-right:0.3em;
	transform:rotate(90deg);
	font-size:70%;
}
#post p.small{
	color:#f00;
}
#post figure{
	line-height:1.5;
	text-align:center;
}
#post #dvd{
	display:flex;
	justify-content:space-between;
}
#post #dvd img{
	width:100%;
}
#post #dvd_text{
	color:#666;
}
#sampleMovie{
	width:560px;
	height:360px;
}

#relative_game h3{
	font-size:100%;
	color:#f33;
	margin-bottom:1em;
}
#relative_game ul{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:24px 16px;
}
@media screen and (min-width:600px){
	#relative_game ul{
		grid-template-columns:repeat(4,1fr);
	}
}
#relative_game a{
	display:flex;
	flex-direction:column;
	gap:3px;
}
#relative_game figure{
	width:100%;
	aspect-ratio:3/4;
	box-shadow:0 0 5px rgba(0,0,0,0.1);
}
#relative_game p{
	font-size:70%;
}

#page_navi dt{
	font-size:80%;
	width:3em;
	float:left;
	line-height:1.5;
}
#page_navi dd{
	padding:0 0 1em 3.5em;
	font-size:80%;
	line-height:1.5;
}

/* text_link */
.text_link{

}
.text_link dd a{
	display:block;
	padding:1em 0;
	font-size:100%;
	line-height:1.4;
}
.text_link dd a:hover{
	background-color:rgba(0,0,0,0.03);
}
@media screen and (min-width:600px){
	.text_link dd a{
		font-size:90%;
		padding:0.2em 0.6em;
	}
}

/* category_list */
#category_list ul{
	display:grid;
	grid-template-columns:50% 50%;
	gap:1px;
	background-color:#eee;
}
#category_list li a{
	display:block;
	height:1em;
	padding:1em 0.5em;
	white-space:nowrap;
	overflow:hidden;
	background-color:#fff;
}
@media screen and (min-width:600px){
	#category_list li a{
		padding:0.5em;
	}
}
#category_list a:hover{
	background-color:transparent;
}
#category_list a::before{
	content:"";
	display:inline-block;
	width:1em;
	height:1em;
	border-radius:50%;
	background-color:rgba(200,140,40,0.25);
}
#category_list li a span{
	display:inline-block;
	position:relative;
	font-size:80%;
	top:-0.3em;
	left:-0.8em;
}
#category_list li a span::before{
	content:"";
	display:inline-block;
	width:0;
	height:0;
	border-top:4px solid rgba(0,0,0,0);
	border-right:8px solid rgba(0,0,0,0);
	border-bottom:4px solid rgba(0,0,0,0);
	border-left:6px solid rgba(255,255,255,1);
}

/* pagelink */
.pagelink{
	clear:both;
	padding:9px 0;
	text-align:center;
	font-size:70%;
}
.pagelink p{
	display:none;
}
.pagelink a,.pagelink span{
	display:inline-block;
	padding:10px 5px;
	margin-right:2px;
	margin-bottom:5px;
	text-align:center;
}
.pagelink span{
	color:#ccc;
	background-color:#e9e9e9;
}
.pagelink a{
	color:#fff;
	background-color:#a7a7a7;
}
.pagelink a:hover{
	color:#a7a7a7;
	background-color:#e9e9e9;
}

/* ranking */
.ranking h1{
	font-size:100%;
	padding:10px;
	line-height:1.3;
}
.ranking li{
	display:block;
	border-bottom:1px solid rgba(0,0,0,0.1);
	padding:10px;
}
.ranking li:hover{
	background-color:rgba(0,0,0,0.02);
}
@media screen and (min-width:600px){
	.ranking li{
		display:block;
		padding:15px 30px;
	}
	.ranking h1{
		padding:15px 30px;
	}
}
.ranking p.image{
	width:100px;
	margin-right:10px;
	float:left;
}
.ranking p.image img{
	width:100px;
}
.ranking p.title{
	color:#468;
	font-size:100%;
	line-height:1.5;
	font-weight:bold;
}
.ranking p.info{
	color:#333;
	font-size:90%;
	line-height:1.5;
}
.ranking p.is_sample{
	font-size:75%;
	color:#fff;
	display:inline-block;
	padding:6px;
	margin:0 3px 3px 0;
	background-color:rgba(180,120,60,1);
	border-radius:3px;
}
.ranking p.sample_caution{
	color:rgba(180,120,60,1);
	font-size:90%;
	padding:9px 0;
	text-align:center;
	border-bottom:1px solid rgba(0,0,0,0.1);
}

/* sample */
.sample{
	padding:10px;
}
.sample .movie{
	margin:12px 0;
}
.sample .images li{
	width:33.3%;
	float:left;
}
.sample .images img{
	width:100%;
}
@media screen and (min-width:600px){
	.sample{
		padding:15px 20px;
	}
	.sample .images li{
		width:20%;
	}
}
.sample .more{
	margin:12px 0;
}
.sample .more a{
	display:inline-block;
	padding:10px;
	background-color:#f00;
	color:#ff0;
	border-radius:5px;
	font-weight:bold;
}
.sample .back{
	border-top:1px solid rgba(0,0,0,0.1);
	padding:12px 0;
}

/* rsslinkImage ok */
.rsslinkImage ul{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:15px;
}
@media screen and (min-width:600px){
	.rsslinkImage ul{
		grid-template-columns:1fr 1fr 1fr;
	}
}
.rsslinkImage li a{
	display:flex;
	flex-direction:column;
	gap:5px;
}
.rsslinkImage figure{
	aspect-ratio:3/2;
}
.rsslinkImage p{
	font-size:80%;
	line-height:1.3;
	height:3.9em;
	overflow:hidden;
	font-weight:bold;
}

/* schedule OK */
#schedule li{
	font-size:80%;
	border-bottom:1px dashed rgba(0,0,0,0.1);
}
#schedule li a{
	display:block;
	padding:1em 0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
@media screen and (min-width:600px){
	#schedule li a{
		padding:0.5em 0;
	}
}
#schedule li a:hover{
	background-color:#eee;
}
#schedule li .day{
	display:inline-block;
	padding:0 0.5em;
	color:#333;
}
#schedule .more{
	font-size:80%;
	padding:1em;
	text-align:right;
	background-color:#9fc;
}

/*  */

/* thumb_list (series.php) */
.thumb_list h3{
	padding:6px 16px;
	font-size:100%;
	background-color:#fc0;
}
.thumb_list ul{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
	padding:16px;
	margin-bottom:20px;
}
.thumb_list li a{
	display:flex;
	flex-direction:column;
	gap:5px;
}
.thumb_list figure{
	aspect-ratio:140/200;
}
.thumb_list p{
	font-size:70%;
}
@media screen and (min-width:600px){
	.thumb_list ul{
		grid-template-columns:repeat(4,1fr);
	}
}

#gyo{
	display:flex;
	gap:2px;
	padding:6px;
	justify-content:space-between;
}
#gyo li{
	flex:1;
}
#gyo li a{
	display:block;
	padding:10px 0;
	text-align:center;
	background-color:rgba(0,0,0,0.05);
}

/* banners */
#banners{
	display:flex;
	flex-direction:column;
	gap:5px;
	margin-bottom:10px;
}

/* series_tab OK */
#series_tab{
	display:flex;
	gap:1px;
	justify-content:space-between;
}
#series_tab li{
	flex:1;
}
#series_tab li span{
	display:block;
	padding:9px 0;
	text-align:center;
	cursor:pointer;
  background-image:linear-gradient(0,#ccc 0%,#ddd 20%);
	line-height:0.7;
}
#series_tab li span.tab_select{
	background-color:#cff;
	background-image:none;
}
#series_tab li small{
	font-size:50%;
}
#series_list .hide{
	display:none;
}
#series_list dt{
	padding:0.8em 0.6em;
	font-size:100%;
	font-weight:bold;
	background-color:#cff;
}
#series_list dd a{
	display:block;
	padding:1em 0;
	font-size:100%;
	line-height:1.5;
	border-bottom:1px dashed rgba(0,0,0,0.1);
}
#series_list dd a:hover{
	background-color:#eee;
}
@media screen and (min-width:600px){
	#series_list dd a{
		font-size:80%;
		padding:0.2em 0.5em;
	}
}

/* gifLink OK */
#gifLink{
	display:flex;
	flex-direction:column;
	gap:10px;
}
#gifLink a{
	display:block flex;
	gap:5px;
}
#gifLink picture{
	position:relative;
	flex:1 0 160px;
	width:160px;
	height:90px;
}
#gifLink picture img{
	position:absolute;
	width:100%;
	transition:opacity .3s;
}
#gifLink picture img:last-child:hover{
	opacity:0;
}
#gifLink p{
	display:flex;
	flex-direction:column;
	gap:0.3em;
	font-size:90%;
}
#gifLink p span{
	color:#678;
	line-height:1.3;
}

/* result */
.result{
	font-size:70%;
}

/* access_ranking */
#access_ranking{
	border:1px solid #ccc;
	border-collapse:collapse;
	width:100%;
}
#access_ranking td{
	border:1px solid #ccc;
	font-size:75%;
	padding:1em 0.5em;
	text-shadow:0 0 3px #eee;
}
#access_ranking a{
	display:block;
}
@media screen and (min-width:600px){
	#access_ranking td{
		padding:0.5em;
	}
}

/* inquiry */
#inquiry p{
	padding:10px;
	color:#f00;
}
#inquiry form{
	padding:10px;
	display:flex;
	flex-direction:column;
}
#inquiry form dl dt{
	font-weight:bold;
	margin-bottom:5px;
}
#inquiry form dl dd{
	margin-bottom:30px;
}
#inquiry form input[type='text']{
	width:100%;
	max-width:25em;
}
#inquiry form textarea{
	width:100%;
	max-width:30em;
	height:6em;
}
@media screen and (min-width:600px){
	#inquiry p{
		padding:15px 30px;
	}
	#inquiry form{
		padding:15px 30px;
	}
}

/* foot */
footer{
	clear:both;
	text-align:center;
	padding:30px 0;
	margin-top:10px;
	background-color:rgba(0,0,0,0.1);
}
footer .sitename{
	margin:10px;
	font-size:100%;
}
footer .description{
	margin:10px;
	font-size:70%;
}
footer .fanza{
	margin:1em auto;
	font-size:80%;
	color:#f66;
}