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

/*-全体サイズ--------*/
html,body{
	margin:0;
	overflow-x: hidden;
	scroll-behavior: smooth;
	color:white;
}

body{
	width:100%;
	height:100%;
	marign:auto;
	background:url("../image/bg-img/bg-main.png") fixed;
	overflow-y: hidden;
		
	}

/*-ヘッダー-----------------------------------------------------------*/
header{
	width:100%;
	height:100;
	margin:0;
	background-color:#000000;
}
video{
	margin-top:60px;
}
.menu{
	width:100%;
	height:60px;
	position:fixed;
	z-index:99;
	display:flex;
}
.title{
	margin-top:10px;
	margin-left:10px;
}
.title > img{
	width:200px;
	height:85px;
}
.menu-list{
	dispay:block;
	width:100%;
	color:white;
	margin-top:25px;
	margin-right:40px;
	text-align:right;
	text-decoration: none;
}

.menu-list a{
	margin-right:10px;
	width:120px;
	height:50px;

}.menu-list img{
	width:120px;
	height:50px;
}
.listjp::after{
	content:url("../image/icon/list1.png");
	width:120px;
	height:50px;
	transition :content .5s;
}
.listjp:hover::after{
	content:url("../image/icon/list2.png");
	
}
.scrolljp::after{
	content:url("../image/icon/height1.png");
}
.scrolljp:hover::after{
	content:url("../image/icon/height2.png");
}
/*-ページトップショートカット--------------------------------------------------*/
.pageskip{
	cursor: pointer;
	display: block;
	width:70px;
	height:70px;
	right:30px;
	bottom:50px;
	position:fixed;
	text-align: center;
	z-index:10;
	transition: all 0.5s ;
}

.pageskip:hover {
  transform: translateY(-7px);
}
 


/*-絞り込み検索キャラショートカット欄-----------------------------------------------------------*/

.search-box_title{
	font-weight: bold;
	text-align: center;
}
.search-box label {
	cursor: pointer;
	display: inline-block;
	margin-right: 10px;
	margin-top:20px;
	margin-bottom:10px;
	line-height: 16px;
}

.cat_image_all {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1300px;
	margin:0 auto;
}
.cat_image {
	width:100px;
	height:277.34px;
	margin: 0 2px 2em;
	transition: all 0.1s ;

}
.cat_image.is-hide {
	display: none;
}
.cat_image a {
	display: block;
	color: #444;
}
.cat_image:hover {
  transform: translateY(-7px);

}
.list-titile{
	text-align: center;
	height:30px;
	display:block;
	margin-top:20px;
}
.kensaku{
	display:grid;
	width:1280px;
	height:auto;
	text-align: center;	
	line-height: 1.7;
    grid-template-areas:"lg lg ln ln"
						"lh lh lj lj";
	margin:auto;
	background-color:rgba(255,255,255,0.40);
	border-radius: 10px;
	padding:10px;

}

.label {
  display: flex;
  justify-content:space-between;
  align-items: center;
  cursor: pointer;
}
.kensaku input[type=checkbox] {
    display:none;
  } 
.search-box input[type=radio] {
    display:none;
  }
.search-height{
	width:500px;
	margin:auto;
	display: flex;
	flex-wrap: wrap;

}
.search-job{
	width:800px;
	margin:auto;
	display: flex;
	flex-wrap: wrap;
}
.search-height div{
	margin:0;
	
}

.search-job div{
	margin:10px;
	width:228px;
	height:60px;
}
.search-gender{
	width:180px;
	text-align: center;
	margin:auto;
	display: flex;
	flex-wrap: wrap;

}
.search-gender div{
	margin:5px;
	width:47px;
	height:48px;
}
.search-name{
	text-align: center;
	margin:auto;
	display: flex;
	flex-wrap: wrap;

}
.search-name div{
	margin:5px;
	width:193px;
	height:48px;
}

.list-gender{
	grid-area:lg;
	margin:auto;
}
.list-name{
	grid-area:ln;
	margin:auto;
}
.list-height{
	grid-area:lh;
	display:block;
	margin-top:40px;
}
.list-job{
	grid-area:lj;
	display:block;
	margin-top:40px;
	margin-left:30px;

}


/*以下画像切り替え用*/

#toggle1 + .label::after {
	content:url("../image/list-icon/list1.png");
}

#toggle1:checked + .label::after {
    content:url("../image/list-icon/list2.png");
}
#toggle1:hover + .label::after {
    content:url("../image/list-icon/list2.png");
}
/*--------------------------------------------------------------*/
#toggle2 + .label::after {
  content:url("../image/list-icon/list3.png");
}

#toggle2:checked + .label::after {
  content:url("../image/list-icon/list4.png");
}
#toggle2:hover + .label::after {
  content:url("../image/list-icon/list4.png");
}
/*--------------------------------------------------------------*/
#toggle3 + .label::after {
  content:url("../image/list-icon/list5.png");
  color: blue;
}

#toggle3:checked + .label::after {
  content:url("../image/list-icon/list6.png");
}
#toggle3:hover + .label::after {
  content:url("../image/list-icon/list6.png");
}
/*--------------------------------------------------------------*/
#toggle4 + .label::after {
  content:url("../image/list-icon/list7.png");
}

#toggle4:checked + .label::after {
  content:url("../image/list-icon/list8.png");
}
#toggle4:hover + .label::after {
  content:url("../image/list-icon/list8.png");
}
/*--------------------------------------------------------------*/
#toggle5 + .label::after {
  content:url("../image/list-icon/list9.png");
}

#toggle5:checked + .label::after {
  content:url("../image/list-icon/list10.png");
}
#toggle5:hover + .label::after {
  content:url("../image/list-icon/list10.png");
}
/*--------------------------------------------------------------*/
#toggle6 + .label::after {
  content:url("../image/list-icon/list11.png");
}

#toggle6:checked + .label::after {
  content:url("../image/list-icon/list12.png");
}
#toggle6:hover + .label::after {
  content:url("../image/list-icon/list12.png");
}
/*--------------------------------------------------------------*/
#toggle7 + .label::after {
  content:url("../image/list-icon/list13.png");

}

#toggle7:checked + .label::after {
  content:url("../image/list-icon/list14.png");
}
#toggle7:hover + .label::after {
  content:url("../image/list-icon/list14.png");
}
/*--------------------------------------------------------------*/
#toggle8 + .label::after {
  content:url("../image/list-icon/list15.png");

}

#toggle8:checked + .label::after {
  content:url("../image/list-icon/list16.png");
}
#toggle8:hover + .label::after {
  content:url("../image/list-icon/list16.png");
}
/*--------------------------------------------------------------*/
#toggle9 + .label::after {
  content:url("../image/list-icon/list17.png");

}

#toggle9:checked + .label::after {
  content:url("../image/list-icon/list18.png");
}
#toggle9:hover + .label::after {
  content:url("../image/list-icon/list18.png");
}
/*--------------------------------------------------------------*/
#toggle10 + .label::after {
  content:url("../image/list-icon/list19.png");

}

#toggle10:checked + .label::after {
  content:url("../image/list-icon/list20.png");
}
#toggle10:hover + .label::after {
  content:url("../image/list-icon/list20.png");
}
/*--------------------------------------------------------------*/
#toggle11 + .label::after {
  content:url("../image/list-icon/list21.png");

}

#toggle11:checked + .label::after {
  content:url("../image/list-icon/list22.png");
}
#toggle11:hover + .label::after {
  content:url("../image/list-icon/list22.png");
}
/*--------------------------------------------------------------*/
#toggle12 + .label::after {
  content:url("../image/list-icon/list23.png");

}

#toggle12:checked + .label::after {
  content:url("../image/list-icon/list24.png");
}
#toggle12:hover + .label::after {
  content:url("../image/list-icon/list24.png");
}
/*--------------------------------------------------------------*/
#toggle13 + .label::after {
  content:url("../image/list-icon/list25.png");

}

#toggle13:checked + .label::after {
  content:url("../image/list-icon/list26.png");
}
#toggle13:hover + .label::after {
  content:url("../image/list-icon/list26.png");
}
/*--------------------------------------------------------------*/
#toggle14 + .label::after {
  content:url("../image/list-icon/list27.png");

}

#toggle14:checked + .label::after {
  content:url("../image/list-icon/list28.png");
}
#toggle14:hover + .label::after {
  content:url("../image/list-icon/list28.png");
}
/*--------------------------------------------------------------*/
#toggle15 + .label::after {
  content:url("../image/list-icon/all1.png");

}

#toggle15:checked + .label::after {
  content:url("../image/list-icon/all2.png");
}
#toggle15:hover + .label::after {
  content:url("../image/list-icon/all2.png");
}
/*--------------------------------------------------------------*/
#toggle16 + .label::after {
  content:url("../image/list-icon/man1.png");

}

#toggle16:checked + .label::after {
  content:url("../image/list-icon/man2.png");
}
#toggle16:hover + .label::after {
  content:url("../image/list-icon/man2.png");
}
/*--------------------------------------------------------------*/
#toggle17 + .label::after {
  content:url("../image/list-icon/woman1.png");

}

#toggle17:checked + .label::after {
  content:url("../image/list-icon/woman2.png");
}

#toggle17:hover + .label::after {
  content:url("../image/list-icon/woman2.png");
}
/*--------------------------------------------------------------*/
#toggle18 + .label::after {
  content:url("../image/list-icon/all3.png");

}

#toggle18:checked + .label::after {
  content:url("../image/list-icon/all4.png");
}

#toggle18:hover + .label::after {
  content:url("../image/list-icon/all4.png");
}
/*--------------------------------------------------------------*/
#toggle19 + .label::after {
  content:url("../image/list-icon/japan1.png");

}

#toggle19:checked + .label::after {
  content:url("../image/list-icon/japan2.png");
}

#toggle19:hover + .label::after {
  content:url("../image/list-icon/japan2.png");
}
/*--------------------------------------------------------------*/
#toggle20 + .label::after {
  content:url("../image/list-icon/other1.png");

}

#toggle20:checked + .label::after {
  content:url("../image/list-icon/other2.png");
}

#toggle20:hover + .label::after {
  content:url("../image/list-icon/other2.png");
}
/*--------------------------------------------------------------*/

/*--身長順-------------------------------------------------*/
.siz{
	width:1280px;
	height:700px;
	background:url("../image/bg-img/bg-sizlist.png") no-repeat round;
	overflow-x: scroll;
	overflow-y: hidden;
	position:relative;
	
}
.lastlist img{
	width:320px;
	height:auto;
}
.lastlist{
	width:1280px;
	list-style:none;
	display:flex;
	flex-flow: row nowrap;
	margin:0;
	padding:0;
}
#scroll{
	display: block;
	height:700px;}
.scrollbar {
	
	margin:auto;
	padding: 2em;

}
.scrollbar::-webkit-scrollbar {
    height: 25px;
    width: 25px;
}
.scrollbar::-webkit-scrollbar-thumb {
    background-color: #F47017;
    border-radius: 10px;
} 
.scrollbar::-webkit-scrollbar-track {
    background-color: #ccc;
    border-radius: 10px;
}



/*--サイト内の動き-------------------------------------------------*/
@keyframes anime{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}
@keyframes anime2{
	0%{
		transform:rotate(360deg);
	}
	100%{
		transform:rotate(0deg);
	}
}

.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}
 
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(70px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*-フッター------------------------------------------------------*/

footer{
	text-align:center;
	width:100vw;
	color:#fff;
	background-color:#000;
	height:450px;
	padding-top:50px;
	position:relative;
	top:60px;
}
.footer{
	width:1280px;
	margin-left:160px;
	display:grid;
    grid-template-areas:"fr fr fc fc fc"
						"fr fr fc fc fc"
						"fl fl . fp .";
}
.chara-list{
	width:1000px;
	height:auto;
	display: flex;
	flex-wrap: wrap;
	margin-left:10px;

}
.chara-list a {
	text-decoration: none;
	color:inherit;
}
.footer-rogo{
	grid-area:fr;

}
.footer-link{
	grid-area:fl;
	margin-top:-64px;

}
.footer-chara{
	display:block;
	grid-area:fc;
	text-align: left;
	margin-left:100px;
}
.footer-chara p{
	text-align:center;
	width:150px;
	margin-left:10px;
}
.footer-chara h2{
margin-bottom:0;

}
.footer-copy{
	grid-area:fp;
	dispay:block;
	bottom:0;
	height:26px;
}



/*-メインコンテンツ-----------------------------------------------------*/


mein{
	display:block;
}

article{
	margin:auto;
	width:100%;
	max-width:1000px;
	height:700px;
	position:relative;
	background-color:rgba(5,255,255,0.70);
}
.contents{
	margin-top:100px;
}
/*キャラ背景*/
.yukito{
	margin-top:50px;
	background-image:url("../image/bg-img/yukito.jpg");

	}

.ray{
	margin-top:50px;
	background-image:url("../image/bg-img/ray.jpg");
}

.chizuru{
	margin-top:50px;
	background-image:url("../image/bg-img/chizuru.jpg");
}
.isaiah{
	margin-top:50px;
	background-image:url("../image/bg-img/isaiah.jpg");

}
.nozomu{
	margin-top:50px;
	background-image:url("../image/bg-img/nozomu.jpg");
}
.estrella{
	margin-top:50px;
	background-image:url("../image/bg-img/estrella.jpg");
}
.vinter{
	margin-top:50px;
	background-image:url("../image/bg-img/vinter.jpg");

}
.ruka{
	margin-top:50px;
	background-image:url("../image/bg-img/ruka.jpg");
}
.sophia{
	margin-top:50px;
	background-image:url("../image/bg-img/sophia.jpg");

}
.aoi{
	margin-top:50px;
	background-image:url("../image/bg-img/aoi.jpg");


}
.mio{
	margin-top:50px;
	background-image:url("../image/bg-img/mio.jpg");


}
.kotono{
	margin-top:50px;
	background-image:url("../image/bg-img/kotono.jpg");
}
.sechs{
	margin-top:50px;
	background-image:url("../image/bg-img/sechs.jpg");
}
.leonardo{
	margin-top:50px;
	background-image:url("../image/bg-img/leonardo.jpg");

}
.shigure{
	margin-top:50px;
	background-image:url("../image/bg-img/shigure.jpg");
}
.ai{
	margin-top:50px;
	background-image:url("../image/bg-img/ai.jpg");

}
.kuroto{
	margin-top:50px;
	background-image:url("../image/bg-img/kuroto.jpg");
}
.karma{
	margin-top:50px;
	background-image:url("../image/bg-img/karma.jpg");
}
.shion{
	margin-top:50px;
	background-image:url("../image/bg-img/shion.jpg");
}
.noah{
	margin-top:50px;
	background-image:url("../image/bg-img/noah.jpg");
}
.elden{
	margin-top:50px;
	background-image:url("../image/bg-img/elden.jpg");
}
.yamato{
	margin-top:50px;
	background-image:url("../image/bg-img/yamato.jpg");

}
.miyabi{
	margin-top:50px;
	background-image:url("../image/bg-img/miyabi.jpg");

}
.key{
	margin-top:50px;
	margin-bottom:80px;
	background-image:url("../image/bg-img/key.jpg");
}

/*---キャラ絵左-----------*/


	
.name{
	width:400px;
	height:150px;
	top:70px;
	right:100px;
	position:absolute;
}

.name img{
	width:400px;
	height:150px;

}

.chara-img{
	position:absolute;
	height:600px;
	left:130px;	
	bottom:30px;
	z-index: 3;

}
#elden >.chara-img{
	position:absolute;
	height:600px;
	left:150px;	
	bottom:30px;
	z-index: 3;

}
#shion >.chara-img{
	position:absolute;
	height:600px;
	left:150px;	
	bottom:30px;
	z-index: 3;

}
.chara-img  img{
	height:600px;
	padding:0;
}

.chara-profile{
	width:400px;
	height:220px;
	top:230px;
	left:500px;
	position:absolute;

}
.chara-profile img{
	width:400px;
	height:230px;

}

.chara-status{
	width:230px;
	height:190px;
	bottom:50px;
	right:100px;
	position:absolute;
}
.chara-status img{
	width:230px;
	height:190px;

}
.chara-serif{
	top:50px;
	height:500px;
	left:60px;
	position:absolute;
 	z-index: 4;

}
.stamp{
	width:240px;
	height:240px;
	bottom:10px;
	left:400px;
	position:absolute;
	z-index: 4;

}

.stamp img{
	width:200px;
	height:200px;

}
/*-キャラ絵右-------------------*/



.name2{
	width:400px;
	height:150px;
	top:70px;
	left:100px;
	position:absolute;
}

.name2 img{
	width:400px;
	height:150px;

}

.chara-img2{
	position:absolute;
	height:600px;
	right:130px;	
	bottom:30px;
	z-index: 3;

}
#isaiah >.chara-img2{
	position:absolute;
	height:600px;
	right:110px;	
	bottom:30px;
	z-index: 3;
}
#rey >.chara-img2{
	position:absolute;
	height:600px;
	right:140px;	
	bottom:30px;
	z-index: 3;

}
#kotono >.chara-img2{
	position:absolute;
	height:600px;
	right:120px;	
	bottom:30px;
	z-index: 3;

}
#karma >.chara-img2{
	position:absolute;
	height:600px;
	right:120px;	
	bottom:30px;
	z-index: 3;

}
#key >.chara-img2{
	position:absolute;
	height:600px;
	right:130px;	
	bottom:30px;
	z-index: 3;

}
#aoi >.chara-img2{
	position:absolute;
	height:600px;
	right:70px;	
	bottom:30px;
	z-index: 3;

}
.chara-img2  img{
	height:600px;
	padding:0;
}

.chara-profile2{
	width:400px;
	height:220px;
	top:230px;
	right:500px;
	position:absolute;

}
.chara-profile2 img{
	width:400px;
	height:230px;

}

.chara-status2{
	width:230px;
	height:190px;
	bottom:50px;
	left:100px;
	position:absolute;
}
.chara-status2 img{
	width:230px;
	height:190px;

}
.chara-serif2{
	top:50px;
	height:500px;
	right:50px;
	position:absolute;
 	z-index: 4;

}

.stamp2{
	width:240px;
	height:240px;
	bottom:10px;
	right:390px;
	position:absolute;
	z-index: 4;
}

.stamp2 img{
	width:200px;
	height:200px;

}