@charset "shift_jis";
/* tab */
.tabs{width:100%;position:relative;}
.tabs input{display:none;}/*
.tabs input#tab-2{left:calc( 100% / 3 );}
.tabs input#tab-3{left:calc( calc( 100% / 3 ) * 2);}
*/
.tab-area label {
	position: relative;
	color: #fff;
	overflow: hidden;
	background: no-repeat;
	width: 33%;
	height: 60px;
	padding-top: 1.4em;
	font-size: 95%;
	text-align: center;
	cursor: pointer;
	background-color: #000;
	background-size: contain;
	background-position: center top;
}
.tab-area label span {
  display: block;
  font-family: "Fira Sans Condensed", sans-serif;font-weight: 500;font-style: normal;
}
@media screen and (min-width:1000px){
	.tab-area label{
		height: 80px;
		padding-top: 2.2em;
	}
}
.tab-area label:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 0;
    border-width: 0 14px 14px 0;
    border-style: solid;
    border-color: #fff #fff #000 #000;
    background-color: #000;
}
.tab-area label:hover,
#tab1:checked ~ .tab-area .tab1-label,
#tab2:checked ~ .tab-area .tab2-label,
#tab3:checked ~ .tab-area .tab3-label {
    background-color: var(--color-primary);
}
.tab-area label:hover::before,
#tab1:checked ~ .tab-area .tab1-label:before,
#tab2:checked ~ .tab-area .tab2-label:before,
#tab3:checked ~ .tab-area .tab3-label:before {
    background-color: var(--color-primary);
    border-color: #fff #fff var(--color-primary) var(--color-primary);
}
/* ----- top
.tab-area .tab-news {
	background-image: url('/com/temp4/img/tab/latest_news_off.png');
}
.tab-area .tab-news:hover,
#tab1:checked ~ .tab-area .tab-news {
	background-image: url('/com/temp4/img/tab/latest_news_on.png');
}
.tab-area .tab-update {
	background-image: url('/com/temp4/img/tab/update_off.png');
}
.tab-area .tab-update:hover,
#tab2:checked ~ .tab-area .tab-update {
	background-image: url('/com/temp4/img/tab/update_on.png');
}
.tab-area .tab-newface {
	background-image: url('/com/temp4/img/tab/newface_off.png');
}
.tab-area .tab-newface:hover,
#tab3:checked ~ .tab-area .tab-newface {
	background-image: url('/com/temp4/img/tab/newface_on.png');
}
/* ----- profile
.tab-area .tab-profile {
	background-image: url('/com/temp4/img/tab/girls_profile_off.png');
}
.tab-area .tab-profile:hover,
#tab1:checked ~ .tab-area .tab-profile {
	background-image: url('/com/temp4/img/tab/girls_profile_on.png');
}
.tab-area .tab-diary {
	background-image: url('/com/temp4/img/tab/photo_diary_off.png');
}
.tab-area .tab-diary:hover,
#tab2:checked ~ .tab-area .tab-diary {
	background-image: url('/com/temp4/img/tab/photo_diary_on.png');
}
/* ----- costume
.tab-area .tab-costume {
	background-image: url('/com/temp4/img/tab/costume_list_off.png');
}
.tab-area .tab-costume:hover,
#tab1:checked ~ .tab-area .tab-costume {
	background-image: url('/com/temp4/img/tab/costume_list_on.png');
}
.tab-area .tab-costume-ranking {
	background-image: url('/com/temp4/img/tab/costume_ranking_off.png');
}
.tab-area .tab-costume-ranking:hover,
#tab2:checked ~ .tab-area .tab-costume-ranking {
	background-image: url('/com/temp4/img/tab/costume_ranking_on.png');
}
/* ----- system
.tab-area .tab-price {
	background-image: url('/com/temp4/img/tab/price_play_off.png');
}
.tab-area .tab-price:hover,
#tab1:checked ~ .tab-area .tab-price {
	background-image: url('/com/temp4/img/tab/price_play_on.png');
}
.tab-area .tab-option {
	background-image: url('/com/temp4/img/tab/various_option_off.png');
}
.tab-area .tab-option:hover,
#tab2:checked ~ .tab-area .tab-option {
	background-image: url('/com/temp4/img/tab/various_option_on.png');
}
.tab-area .tab-notes {
	background-image: url('/com/temp4/img/tab/other_notes_off.png');
}
.tab-area .tab-notes:hover,
#tab3:checked ~ .tab-area .tab-notes {
	background-image: url('/com/temp4/img/tab/other_notes_on.png');
}
/* ----- play */
.tab-area .tab-play {
	padding-top: 2em;
	font-weight: 700;
}
.tab-area .tab-play span {
	font-size: inherit;
	color: var(--color-primary);
}
.tab-area .tab-play:hover span{
}/*
#tab1:checked ~ .tab-area .tab1-label span,
#tab2:checked ~ .tab-area .tab2-label span,
#tab3:checked ~ .tab-area .tab3-label span {
	color: #000;
}*/
@media screen and (min-width:1000px){
	.tab-area .tab-play {
		font-size: 150%;
		padding-top: 1.6em;
	}
}
@keyframes tabAnim{0%{opacity:0;}100%{opacity:1;}}
.tab-panel{display:none;}
.panel-area{border-top:solid 2px var(--color-primary);padding-top:3vh;}
#tab1:checked ~ .panel-area #panel1{display:block;animation:tabAnim ease .6s forwards;}
#tab2:checked ~ .panel-area #panel2{display:block;animation:tabAnim ease .6s forwards;}
#tab3:checked ~ .panel-area #panel3{display:block;animation:tabAnim ease .6s forwards;}