@charset "utf-8";
/*定数*/
:root{
	--overview_width:40%;
	--blank_space_top_display:none;
	--characterbtn_text:30px;
	--characterbtn_potision_top:105px;
	--common_margin:20px 20px 20px 20px;
	--top_background-size:auto 100%;
	--top_background-position:75% center;
}
/* CSS Document */
@media screen and (max-width:870px) {
	:root{
		--overview_width:100%;
		--blank_space_top_display:block;
		--characterbtn_text:20px;
		--characterbtn_potision_top:80px;
		--common_margin:20px 5px 20px 5px;
		--top_background-size:auto 80%;
		--top_background-position:80% 20%;
	}
}
@font-face {
	font-family: "myfont";
	src: url("//rukaruko.nekonikoban.org/character/manager/font/uzura.ttf") format("truetype");
}
*{
	margin: 0;
	padding:0;
	list-style: none;
}
html{
	scroll-behavior: smooth;
}
body{
	background-color:#000000;
	font-size: 12pt;
	font-family: "myfont","Kosugi", serif;
	font-weight: 400;
	font-style: normal;
	min-height: auto;
	background-image:linear-gradient(45deg, rgba(10, 168, 253, 1), rgba(3, 122, 237, 1) 50%, rgba(2, 39, 151, 0.94));
}
/*スクロールバー*/
html,body{
	scrollbar-color: #ffffff #0C215C;
}
/*旧Ver Chrome向けスクロールバープロパティ*/
::-webkit-scrollbar {
	background: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 30px;
  border:3px solid #0C215C;
  background: #ffffff;
}
::-webkit-scrollbar-track {
	background-color: transparent;
}

	 
#load_data{
	position: absolute;
	width:5px;
	height:5px;
	background-image:url(../img/character_omote.png),url(../img/character_ura.png),url(../img/character_omote_huku.png),url(../img/character_ura_huku.png);
}
#top{
	width:100% ;
	min-height:100vh;
	box-sizing: border-box;
	transition: all 100ms 0s ease;
}
#background-image{
	width:100%;
	height: 100vh;
	position: fixed;
	display: var(blank_space_top_display);
	background-repeat: no-repeat;
	background-size:var(--top_background-size);
	background-position:var(--top_background-position);
	z-index: 1;
	overflow: hidden; /* slideの範囲外を隠すため */
}
#clothes-layer {
  position: absolute;
  top: -100%; /* 最初は画面外 */
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: var(--top_background-size);
  background-position: var(--top_background-position);
  z-index: 2;
  transition: top 0.5s ease; /* スライドアニメーション */
}
#clothes-layer.visible {
  top: 0; /* 服をスライドイン */
}
.blank_space_top{
	width:100%;
	height:80vh;
	display:var(--blank_space_top_display);
	transition: all 200ms 0s ease;
}
#characterbtn{
	background-color:rgba(0, 0, 0, 0.40);
	color: #ffffff;
	position:fixed;
	top:0px;
	right:0px;
	display: block;
	font-size: var(--characterbtn_text);
	text-align: center;
	padding:10px;
	margin:10px;
	border-radius: 20px;
	cursor:pointer;
	transition: all 200ms 0s ease;
	z-index: 8000;
}
#characterbtn:hover{
	background-color:rgba(0, 0, 0, 1);
	transition: all 200ms 0s ease;
}
#c_mark.active {
	animation: rotation 0.2s ease-in-out;
}
#characterbtn_huku{
	background-color:rgba(0, 0, 0, 0.40);
	color: #ffffff;
	position:fixed;
	top:var(--characterbtn_potision_top);
	right:0px;
	display: block;
	font-size: var(--characterbtn_text);
	text-align: center;
	padding:10px;
	margin:10px;
	border-radius: 20px;
	cursor:pointer;
	transition: all 200ms 0s ease;
	z-index: 8000;
}
#characterbtn_huku:hover{
	background-color:rgba(0, 0, 0, 1);
	transition: all 200ms 0s ease;
}
#c_mark_huku.active {
	animation: rotation 0.2s ease-in-out;
}
@keyframes rotation{
  from { transform:rotate(0);}
  to { transform:rotate(180deg); }
}
.bgimgomote{
	background-image: url(../img/character_omote.png);
}
.bgimgura{
	background-image: url(../img/character_ura.png);
}
.bgimgomote_huku{
	background-image: url(../img/character_omote_huku.png);
}
.bgimgura_huku{
	background-image: url(../img/character_ura_huku.png);
}
#overview{
	position: relative;
	width:var(--overview_width);
	height:100%;
	overflow: hidden;
	background-color:rgba(0, 0, 0, 0.40);
	box-sizing: border-box;
	display: block;
	z-index: 7999;
	transition: all 200ms 0s ease;
}
.context{
	font-size: 25px;
	box-sizing: border-box;
	padding:0 0 0 30px;
}
.contextsub{
	font-size: 14px;
	box-sizing: border-box;
	padding:0 0 0 30px;
}
#overview hr{
	background-color:#ffffff;
	height: 1px;
	border:none;
}
#overview ul{
	width:100%;
	height:100%;
	box-sizing: border-box;
	display: block;
	color:#ffffff;
}
#overview ul li{
	box-sizing: border-box;
	margin:var(--common_margin);
}
#overview hr{
	margin: 5px 5px;
}
.ovtitle{
	font-size: 40px;
	margin:0 0 0 5px;
	padding:5px;
}
.ovtitle::first-letter {
	font-size: 50px;
}
#overview summary{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 25px;
	box-sizing: border-box;
	width: 100%;
	color:#ffffff;
	padding: 16px;
	list-style: none;
	cursor: pointer;
	outline: none;
	transition: all 0.3s ease;
}
#overview details summary::-webkit-details-marker {
	display: none;
}
#overview details[open] summary::after {
	transform: translateY(-50%) rotate(90deg);
}
#overview details summary span {
	position: relative;
	transform: rotate(0deg);
	transform-origin: -8px 0;
	transition: all 0.3s ease;
}
#overview details summary span:before,
#overview details summary span:after {
	position: absolute;
	content: "";
	background: #fff;
	width: 12px;
	height: 2px;
	top: 50%;
}
#overview details summary span:before {
	right: 8px;
	transform: rotate(45deg);
}
#overview details summary span:after {
	right: 0;
	transform: rotate(-45deg);
}
/* open時のanimation */
#overview details[open] summary {
	border-bottom:none;
}
  
#overview  details[open] summary span {
	transform: rotate(180deg);
}
  
#overview  details[open] ul {
	opacity: 1;
	transform: translateY(0);
}
#overview details{
	border:solid 1px #ffffff;
}
#overview details ul li {
	padding: 5px;
	margin:5px 15px;
}
#overview details ul li:not(:last-child) {
	border-bottom: 1px dashed #ffffff;
}
.overview_link{
	color: #ffffff;
}
.overview_link:hover{
	opacity: 80%;
}
.toy_list_ul{
	display: flex!important;
	flex-direction:row!important;
	justify-content:space-around!important;
}
.costume_btn_list{
	display: flex!important;
	flex-direction:row!important;
}
.costume_btn{
	width:80px;
	text-align: center;
	margin: 0!important;
	padding:5px 0 5px 0 ;
	box-sizing: border-box;
	border-top:1px solid #ffffff;
	border-right:1px solid #ffffff;
	border-left:1px solid #ffffff;
	cursor: pointer;
}
.costume_btn:first-child{
	border-right:none;
}
.costume_btn:hover{
	background-color:rgb(255, 255, 255,0.5);
}
#costume_display{
	box-sizing: border-box;
	border:1px solid #ffffff;
	background-color: #ffffff;
	aspect-ratio: 1 / 1;
	background-size: 100%;
	background-repeat: no-repeat;
}
.costume_btn_active{
	background-color:#ffffff;
	color:rgba(3, 122, 237, 1);
	cursor: default;
}
.costume_btn_active:hover{
	background-color:rgb(255, 255, 255,1);
}
.c_bunny{
	background-image: url(../img/costume/bunny.png);
}
.c_shihuku{
	background-image: url(../img/costume/shihuku.png);
}
.toy_list_li{
	border: none !important;
}
.toy_list_li dt{
	text-align: center;
}
.toy_list_li dt img{
	width:100px;
	height:100px;
}
.toy_list_li dd{
	text-align: center;
}
#commission{
	position: relative;
	width:var(--overview_width);
	height:100%;
	overflow: hidden;
	background-color:rgb(0 0 0 / 0.40);
	box-sizing: border-box;
	display: block;
	z-index: 7997;
	transition: all 200ms 0s ease;
}
#commission ul{
	width:100%;
	height:100%;
	box-sizing: border-box;
	display: block;
	color:#ffffff;
}
#commission ul li{
	box-sizing: border-box;
	margin:var(--common_margin);
}
#commission_list a{
	text-decoration: none;
	color:#ffffff;
	transition: all 0.3s ease;
}
#commission_list a:hover{
	background-color: rgb(0 0 0 / 0.5);
}
#commission_list dl{
 width:100%;
 height:auto;
 margin:10px 10px;
 box-sizing: border-box;
 display: flex;
}
#commission summary{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 25px;
	box-sizing: border-box;
	width: 100%;
	color:#ffffff;
	padding: 16px;
	list-style: none;
	cursor: pointer;
	outline: none;
	transition: all 0.3s ease;
}
#commission details summary::-webkit-details-marker {
	display: none;
}
#commission details[open] summary::after {
	transform: translateY(-50%) rotate(90deg);
}
#commission details summary span {
	position: relative;
	transform: rotate(0deg);
	transform-origin: -8px 0;
	transition: all 0.3s ease;
}
#commission details summary span:before,
#commission details summary span:after {
	position: absolute;
	content: "";
	background: #fff;
	width: 12px;
	height: 2px;
	top: 50%;
}
#commission details summary span:before {
	right: 8px;
	transform: rotate(45deg);
}
#commission details summary span:after {
	right: 0;
	transform: rotate(-45deg);
}
/* open時のanimation */
#commission details[open] summary {
	border-bottom:none;
}
  
#commission details[open] summary span {
	transform: rotate(180deg);
}
  
#commission details[open] ul {
	opacity: 1;
	transform: translateY(0);
}
#commission details{
	border:solid 1px #ffffff;
	color:#ffffff;
	margin: 0  0 20px 0;
}
#commission details summary span:before {
	right: 8px;
	transform: rotate(45deg);
}
#commission details summary span:after {
	right: 0;
	transform: rotate(-45deg);
}
#commission_list{
	display: flex;
	flex-direction:column;
	box-sizing: border-box;
	padding:0 0;
}
#commission_list dl dt img{
	width:100%;
}
#commission_list dt{
	box-sizing: border-box;
	width:25%;
}
#commission_list dd{
	box-sizing: border-box;
	width:75%;
	padding-left: 10px;
}

#relationship dl{
	padding: 10px 0 0 0;
	display: flex;
	flex-direction:row;
}
#relationship dl dt{
	width:25%;
}
#relationship dl dd{
	box-sizing: border-box;
	padding-left: 5px;
	width:75%;
}
#relationship dl dt img{
	width:100%;
	box-sizing: border-box;
	border:solid 1px #ffffff;
}
.relationship_small{
	display: block;
	margin:0 0 5px 0;
	border-bottom: #ffffff 1px solid;
}
.relationship_link{
	color: #ffffff;
}
.relationship_link:hover{
	opacity: 80%;
}
#link{
	width:var(--overview_width);
	transition: all 200ms 0s ease;
}
#linklist{
	position: relative;
	width:100%;
	height:100%;
	overflow: hidden;
	background-color:rgb(0 0 0 / 0.40);
	box-sizing: border-box;
	display: block;
	z-index: 7996;
	transition: all 200ms 0s ease;
}
#linklist ul{
	width:100%;
	height:100%;
	box-sizing: border-box;
	display: block;
	color:#ffffff;
}
#linklist ul li{
	box-sizing: border-box;
	margin:var(--common_margin);
}
.link_link{
	color: #ffffff;
}
.link_link:hover{
	opacity: 80%;
}
#footer{
	position: relative;
	border-top:solid 5px #ffffff;
	width:var(--overview_width);
	height:100%;
	overflow: hidden;
	background-color:rgb(0 0 0 / 0.40);
	box-sizing: border-box;
	display: block;
	z-index: 7998;
}
#footer ul{
	width:100%;
	height:100%;
	box-sizing: border-box;
	display: block;
	color:#ffffff;
}
#footer ul li{
	box-sizing: border-box;
	margin:var(--common_margin);
}
#footer ul li img {
	height:50px;
	display: block;
}
.footer_link {
	color: #ffffff;
}
.footer_link:hover{
	opacity: 80%;
  }

.sfw_tag:before,
.sfw_tag span:after {
	content: "SFW";
	font-size: .75rem;
	padding:  0 4px;
	margin:  0 4px;
	border-radius: 5px;
	background: #3298dc;
}
.nsfw_tag:before,
.nsfw_tag span:after {
	content: "NSFW";
	font-size: .75rem;
	padding:  2px 5px;
	margin:  0 4px;
	border-radius: 5px;
	background: #f81894;
}
.esu_tag:before,
.esu_tag span:after {
	content: "えす";
	font-size: .75rem;
	padding:  2px 5px;
	margin:  0 4x;
	border-radius: 5px;
	background: rgb(51 51 51/ 1.00);
}

/* フィルター */
#filter_a{
	width:100%;
	height:100vh;
	position: absolute;
	mix-blend-mode:screen ;
}
/* クリックイベントのクラス */
.animate {
	animation: fadeSwap 0.5s ease-in-out;
  }
  
  @keyframes fadeSwap {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
  }