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


.tabbox {
 *background-image:url(../images/kinokonomi_g_chara_bg.png);
 background-repeat: no-repeat;
 background-size: contain;
 position:relative;
 width:100%; 
 max-width:1300px; 
 margin: 0px auto;
 text-align: center;
 font-size:0;
 padding: 50px 0 70px 0;
}

.tabbox input{
 display: none;
}

.tabcontent {
 display: none;
 *padding: 0 0 20px 0;
 position: relative;
 z-index: 0;
}

.buttoncontent01,.buttoncontent02,.buttoncontent03,.buttoncontent04{
 text-align: center;
}


#tabcheck1:checked ~ #tabcontent1 { display: block; }
#tabcheck2:checked ~ #tabcontent2 { display: block; }
#tabcheck3:checked ~ #tabcontent3 { display: block; }
#tabcheck4:checked ~ #tabcontent4 { display: block; }
#tabcheck5:checked ~ #tabcontent5 { display: block; }
#tabcheck6:checked ~ #tabcontent6 { display: block; }
#tabcheck7:checked ~ #tabcontent7 { display: block; }
#tabcheck8:checked ~ #tabcontent8 { display: block; }
#tabcheck9:checked ~ #tabcontent9 { display: block; }
#tabcheck10:checked ~ #tabcontent10 { display: block; }
#tabcheck11:checked ~ #tabcontent11 { display: block; }
#tabcheck12:checked ~ #tabcontent12 { display: block; }

.tab01_off, .tab02_off, .tab03_off, .tab04_off, .tab05_off, .tab06_off, .tab07_off, .tab08_off, .tab09_off, .tab10_off, .tab11_off, .tab12_off{
 width: 13%; 
 display: inline-block; 
 margin: 20px 0px 0px 10px;
 *padding:10px 0;
}

 .tab01_on, .tab02_on, .tab03_on, .tab04_on, .tab05_on, .tab06_on, .tab07_on, .tab08_on, .tab09_on, .tab10_on, .tab11_on, .tab12_on {
 width: 13%; 
 display: none; 
 margin: 10px 0px 0px 10px;
 *padding:10px 0;
}


.tab01_off:hover img, .tab02_off:hover img, .tab03_off:hover img, .tab04_off:hover img, .tab05_off:hover img, .tab06_off:hover img, .tab07_off:hover, .tab08_off:hover, .tab09_off:hover, .tab10_off:hover img, .tab11_off:hover img, .tab12_off:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

#tabcheck1:checked ~ .tab01_off { display: none; }
#tabcheck1:checked ~ .tab01_on { display: inline-block; }
#tabcheck2:checked ~ .tab02_off { display: none; }
#tabcheck2:checked ~ .tab02_on { display: inline-block; }
#tabcheck3:checked ~ .tab03_off { display: none; }
#tabcheck3:checked ~ .tab03_on { display: inline-block; }
#tabcheck4:checked ~ .tab04_off { display: none; }
#tabcheck4:checked ~ .tab04_on { display: inline-block; }
#tabcheck5:checked ~ .tab05_off { display: none; }
#tabcheck5:checked ~ .tab05_on { display: inline-block; }
#tabcheck6:checked ~ .tab06_off { display: none; }
#tabcheck6:checked ~ .tab06_on { display: inline-block; }
#tabcheck7:checked ~ .tab07_off { display: none; }
#tabcheck7:checked ~ .tab07_on { display: inline-block; }
#tabcheck8:checked ~ .tab08_off { display: none; }
#tabcheck8:checked ~ .tab08_on { display: inline-block; }
#tabcheck9:checked ~ .tab09_off { display: none; }
#tabcheck9:checked ~ .tab09_on { display: inline-block; }
#tabcheck10:checked ~ .tab10_off { display: none; }
#tabcheck10:checked ~ .tab10_on { display: inline-block; }
#tabcheck11:checked ~ .tab11_off { display: none; }
#tabcheck11:checked ~ .tab11_on { display: inline-block; }
#tabcheck12:checked ~ .tab12_off { display: none; }
#tabcheck12:checked ~ .tab12_on { display: inline-block; }



#buttoncheck01:checked ~ #buttoncontent01_a{ display: none; }
#buttoncheck01:checked ~ #buttoncontent01{ display: block; }
#buttoncheck01_a:checked ~ #buttoncontent01 { display: none;}
#buttoncheck01_a:checked ~ #buttoncontent01_a{ display: block; }

#buttoncheck02:checked ~ #buttoncontent02_a{ display: none; }
#buttoncheck02:checked ~ #buttoncontent02{ display: block; }
#buttoncheck02_a:checked ~ #buttoncontent02 { display: none;}
#buttoncheck02_a:checked ~ #buttoncontent02_a{ display: block; }

#buttoncheck03:checked ~ #buttoncontent03_a{ display: none; }
#buttoncheck03:checked ~ #buttoncontent03{ display: block; }
#buttoncheck03_a:checked ~ #buttoncontent03 { display: none;}
#buttoncheck03_a:checked ~ #buttoncontent03_a{ display: block; }

#buttoncheck04:checked ~ #buttoncontent04_a{ display: none; }
#buttoncheck04:checked ~ #buttoncontent04{ display: block; }
#buttoncheck04_a:checked ~ #buttoncontent04 { display: none;}
#buttoncheck04_a:checked ~ #buttoncontent04_a{ display: block; }

#buttoncheck05:checked ~ #buttoncontent05_a{ display: none; }
#buttoncheck05:checked ~ #buttoncontent05{ display: block; }
#buttoncheck05_a:checked ~ #buttoncontent05 { display: none;}
#buttoncheck05_a:checked ~ #buttoncontent05_a{ display: block; }

#buttoncheck06:checked ~ #buttoncontent06_a{ display: none; }
#buttoncheck06:checked ~ #buttoncontent06{ display: block; }
#buttoncheck06_a:checked ~ #buttoncontent06 { display: none;}
#buttoncheck06_a:checked ~ #buttoncontent06_a{ display: block; }

#buttoncheck07:checked ~ #buttoncontent07_a{ display: none; }
#buttoncheck07:checked ~ #buttoncontent07{ display: block; }
#buttoncheck07_a:checked ~ #buttoncontent07 { display: none;}
#buttoncheck07_a:checked ~ #buttoncontent07_a{ display: block; }

#buttoncheck08:checked ~ #buttoncontent08_a{ display: none; }
#buttoncheck08:checked ~ #buttoncontent08{ display: block; }
#buttoncheck08_a:checked ~ #buttoncontent08 { display: none;}
#buttoncheck08_a:checked ~ #buttoncontent08_a{ display: block; }

#buttoncheck09:checked ~ #buttoncontent09_a{ display: none; }
#buttoncheck09:checked ~ #buttoncontent09{ display: block; }
#buttoncheck09_a:checked ~ #buttoncontent09 { display: none;}
#buttoncheck09_a:checked ~ #buttoncontent09_a{ display: block; }

#buttoncheck10:checked ~ #buttoncontent10_a{ display: none; }
#buttoncheck10:checked ~ #buttoncontent10{ display: block; }
#buttoncheck10_a:checked ~ #buttoncontent10 { display: none;}
#buttoncheck10_a:checked ~ #buttoncontent10_a{ display: block; }

#buttoncheck11:checked ~ #buttoncontent11_a{ display: none; }
#buttoncheck11:checked ~ #buttoncontent11{ display: block; }
#buttoncheck11_a:checked ~ #buttoncontent11 { display: none;}
#buttoncheck11_a:checked ~ #buttoncontent11_a{ display: block; }


@media screen and (orientation:portrait) {

.tab01_off, .tab02_off, .tab03_off, .tab04_off, .tab05_off, .tab06_off, .tab07_off, .tab08_off, .tab09_off, .tab10_off, .tab11_off, .tab12_off{
 width: 110px; 
 display: inline-block; 
 margin: 20px 0px 0px 10px;
 *padding:10px 0;
}

 .tab01_on, .tab02_on, .tab03_on, .tab04_on, .tab05_on, .tab06_on, .tab07_on, .tab08_on, .tab09_on, .tab10_on, .tab11_on, .tab12_on {
 width: 110px; 
 display: none; 
 margin: 10px 0px 0px 10px;
 *padding:10px 0;
}


}