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

#ss{
 text-align: left;
}

#ss label:hover{
 opacity: 0.8;
}

#sstabcheck1:checked ~ #sstabcontent1 { display: block; }
#sstabcheck2:checked ~ #sstabcontent2 { display: block; }
#sstabcheck3:checked ~ #sstabcontent3 { display: block; }
#sstabcheck4:checked ~ #sstabcontent4 { display: block; }
#sstabcheck5:checked ~ #sstabcontent5 { display: block; }
#sstabcheck6:checked ~ #sstabcontent6 { display: block; }
#sstabcheck7:checked ~ #sstabcontent7 { display: block; }
#sstabcheck8:checked ~ #sstabcontent8 { display: block; }
#sstabcheck9:checked ~ #sstabcontent9 { display: block; }
#sstabcheck10:checked ~ #sstabcontent10 { display: block; }
#sstabcheck11:checked ~ #sstabcontent11 { display: block; }
#sstabcheck12:checked ~ #sstabcontent12 { display: block; }
#sstabcheck13:checked ~ #sstabcontent13 { display: block; }
#sstabcheck14:checked ~ #sstabcontent14 { display: block; }
#sstabcheck15:checked ~ #sstabcontent15 { display: block; }


#sstabcheck1:checked ~ .sstab01 { display: block; }
#sstabcheck2:checked ~ .sstab02 { display: block; }
#sstabcheck3:checked ~ .sstab03 { display: block; }
#sstabcheck4:checked ~ .sstab04 { display: block; }
#sstabcheck5:checked ~ .sstab05 { display: block; }
#sstabcheck6:checked ~ .sstab06 { display: block; }
#sstabcheck7:checked ~ .sstab07 { display: block; }
#sstabcheck8:checked ~ .sstab08 { display: block; }
#sstabcheck9:checked ~ .sstab09 { display: block; }
#sstabcheck10:checked ~ .sstab10 { display: block; }
#sstabcheck11:checked ~ .sstab11 { display: block; }
#sstabcheck12:checked ~ .sstab12 { display: block; }
#sstabcheck13:checked ~ .sstab13 { display: block; }
#sstabcheck14:checked ~ .sstab14 { display: block; }
#sstabcheck15:checked ~ .sstab15 { display: block; }


#sstabcheck1:checked ~ .ss_tabimage01 { z-index: 10!important; }
#sstabcheck2:checked ~ .ss_tabimage01 { z-index: 10!important; }
#sstabcheck3:checked ~ .ss_tabimage02 { z-index: 10!important; }
#sstabcheck4:checked ~ .ss_tabimage02 { z-index: 10!important; }
#sstabcheck5:checked ~ .ss_tabimage03 { z-index: 10!important; }
#sstabcheck6:checked ~ .ss_tabimage03 { z-index: 10!important; }
#sstabcheck7:checked ~ .ss_tabimage04 { z-index: 10!important; }
#sstabcheck8:checked ~ .ss_tabimage04 { z-index: 10!important; }
#sstabcheck9:checked ~ .ss_tabimage04 { z-index: 10!important; }
#sstabcheck10:checked ~ .ss_tabimage02 { z-index: 10!important; }
#sstabcheck11:checked ~ .ss_tabimage01 { z-index: 10!important; }
#sstabcheck12:checked ~ .ss_tabimage03 { z-index: 10!important; }
#sstabcheck13:checked ~ .ss_tabimage04 { z-index: 10!important; }
#sstabcheck14:checked ~ .ss_tabimage02 { z-index: 10!important; }
#sstabcheck15:checked ~ .ss_tabimage01 { z-index: 10!important; }


#ssbuttoncheck01:checked ~ #ssbuttoncontent01{ display: block; }
#ssbuttoncheck01_a:checked ~ #ssbuttoncontent01 { display: none;}

#ssbuttoncheck02:checked ~ #ssbuttoncontent02_a{ display: none; }
#ssbuttoncheck02:checked ~ #ssbuttoncontent02{ display: block; }

#ssbuttoncheck03:checked ~ #ssbuttoncontent03_a{ display: none; }
#ssbuttoncheck03:checked ~ #ssbuttoncontent03{ display: block; }

#ssbuttoncheck04:checked ~ #ssbuttoncontent04_a{ display: none; }
#ssbuttoncheck04:checked ~ #ssbuttoncontent04{ display: block; }

#ssbuttoncheck05:checked ~ #ssbuttoncontent05_a{ display: none; }
#ssbuttoncheck05:checked ~ #ssbuttoncontent05{ display: block; }

#ssbuttoncheck06:checked ~ #ssbuttoncontent06_a{ display: none; }
#ssbuttoncheck06:checked ~ #ssbuttoncontent06{ display: block; }

#ssbuttoncheck07:checked ~ #ssbuttoncontent07_a{ display: none; }
#ssbuttoncheck07:checked ~ #ssbuttoncontent07{ display: block; }

#ssbuttoncheck08:checked ~ #ssbuttoncontent08_a{ display: none; }
#ssbuttoncheck08:checked ~ #ssbuttoncontent08{ display: block; }

#ssbuttoncheck09:checked ~ #ssbuttoncontent09_a{ display: none; }
#ssbuttoncheck09:checked ~ #ssbuttoncontent09{ display: block; }

#ssbuttoncheck10:checked ~ #ssbuttoncontent10_a{ display: none; }
#ssbuttoncheck10:checked ~ #ssbuttoncontent10{ display: block; }

#ssbuttoncheck11:checked ~ #ssbuttoncontent11_a{ display: none; }
#ssbuttoncheck11:checked ~ #ssbuttoncontent11{ display: block; }

#ssbuttoncheck12:checked ~ #ssbuttoncontent12_a{ display: none; }
#ssbuttoncheck12:checked ~ #ssbuttoncontent12{ display: block; }

#ssbuttoncheck13:checked ~ #ssbuttoncontent13_a{ display: none; }
#ssbuttoncheck13:checked ~ #ssbuttoncontent13{ display: block; }

#ssbuttoncheck14:checked ~ #ssbuttoncontent14_a{ display: none; }
#ssbuttoncheck14:checked ~ #ssbuttoncontent14{ display: block; }

#ssbuttoncheck15:checked ~ #ssbuttoncontent15_a{ display: none; }
#ssbuttoncheck15:checked ~ #ssbuttoncontent15{ display: block; }

.ss_deco{
 margin: 50px auto 0 auto!important;
 padding: 20px;
 border-radius: 10px;
 box-shadow:0px 0px 10px 5px #f29c9f;
}

.ss_deco2{
 border-radius: 10px;
 border: 3px dashed #f8b95a;
}

.sstabbox{
 background-repeat: no-repeat;
 background-size: contain;
 margin: 0px auto;
 position: relative;
}

.sstabbox input{
 display: none;
}

.sstabcontent {
 display: none;
 padding: 0 0 20px 0;
 z-index: 0;
}

.sstabcontent{
 background-repeat: no-repeat;
 background-size: cover;
}


.ssbuttoncontent01,.ssbuttoncontent02,.ssbuttoncontent03,.ssbuttoncontent04,.ssbuttoncontent05,.ssbuttoncontent06,.ssbuttoncontent07,.ssbuttoncontent08,.ssbuttoncontent09,.ssbuttoncontent10,.ssbuttoncontent11,.ssbuttoncontent12,.ssbuttoncontent13,.ssbuttoncontent14,.ssbuttoncontent15{
 overflow: auto;
}




@media screen and (orientation:landscape) {

.ss_deco{
 width: 1150px;
}

.sstabbox{
 background-image:url(../images/kinokonomi_g_ss_bg.jpg);
 display: flex;
 flex-direction: column!important;
 width: 1140px;
 height: 800px;
 margin: 0px auto;
 font-size:18px;
}

.sstabcontent {
 width:800px;
 height: 780px; 
 padding: 0 0 20px 0;
 position: absolute;
 top: 0px;
 right: -2px;
 z-index: 0;
}

#sstabcontent1,#sstabcontent2,#sstabcontent11,#sstabcontent15{
 background-image:url(../images/kinokonomi_g_ss_bg04.png);
}

#sstabcontent3,#sstabcontent4,#sstabcontent10,#sstabcontent14{
 background-image:url(../images/kinokonomi_g_ss_bg01.png);
}

#sstabcontent5,#sstabcontent6,#sstabcontent12{
 background-image:url(../images/kinokonomi_g_ss_bg02.png);
}

#sstabcontent7,#sstabcontent8,#sstabcontent9,#sstabcontent13{
 background-image:url(../images/kinokonomi_g_ss_bg03.png);
}


.ssbuttoncontent01,.ssbuttoncontent02,.ssbuttoncontent03,.ssbuttoncontent04,.ssbuttoncontent05,.ssbuttoncontent06,.ssbuttoncontent07,.ssbuttoncontent08,.ssbuttoncontent09,.ssbuttoncontent10,.ssbuttoncontent11,.ssbuttoncontent12,.ssbuttoncontent13,.ssbuttoncontent11,.ssbuttoncontent12,.ssbuttoncontent14,.ssbuttoncontent15{
 width: 800px;
 height: 800px; 
}

.sswrap{
 padding: 80px 80px 80px 80px;
}

#ss label{
 width: 350px;
 margin: 20px 0 0 15px;
}

.sswrap{
 padding: 80px;
}

.ss_tabimage01,.ss_tabimage02,.ss_tabimage03,.ss_tabimage04{
 width: 360px!important;
 margin: 20px 0 50px 15px;
 z-index: 10;
}

#ss{
 position: relative;
}

.sstab01,.sstab02,.sstab11,.sstab15{
 width: 70px!important;
 background-color: #ffbcbe;
 border: 1px solid #ff8d91;
 border-radius: 10px;
 padding: 3px;
 text-align: center;
 line-height: 36px;
 font-weight: bold;
 box-shadow: 0 5px 0 #ff8d91;
 color: #c70067;
}

.sstab03,.sstab04,.sstab10,.sstab14{
 width: 70px!important;
 background-color: #a5b0e4;
 border: 1px solid #6579d4;
 border-radius: 10px;
 padding: 3px;
 text-align: center;
 line-height: 36px;
 font-weight: bold;
 box-shadow: 0 5px 0 #6579d4;
 color: #4d4398;
}

.sstab05,.sstab06,.sstab12{
 width: 70px!important;
 background-color: #addaf0;
 border: 1px solid #59bded;
 border-radius: 10px;
 padding: 3px;
 text-align: center;
 line-height: 36px;
 font-weight: bold;
 box-shadow: 0 5px 0 #59bded;
 color: #008db7;
}

.sstab07,.sstab08,.sstab09,.sstab13{
 width: 70px!important;
 background-color: #ffcde3;
 border: 1px solid #f08eb9;
 border-radius: 10px;
 padding: 3px;
 text-align: center;
 line-height: 36px;
 font-weight: bold;
 box-shadow: 0 5px 0 #f08eb9;
 color: #e62f8b;
}


.sstab01{
 position: absolute;
 top: 120px;
 left: 30px;
}

.sstab02{
 position: absolute;
 top: 120px;
 left: 120px;
}

.sstab11{
 position: absolute;
 top: 120px;
 left: 210px;
}

.sstab15{
 position: absolute;
 top: 120px;
 left: 300px;
 z-index:100;
}

.sstab03{
 position: absolute;
 top: 310px;
 left: 30px;
}

.sstab04{
 position: absolute;
 top: 310px;
 left: 120px;
}

.sstab10{
 position: absolute;
 top: 310px;
 left: 210px;
}

.sstab14{
 position: absolute;
 top: 310px;
 left: 300px;
 z-index:100;
}

.sstab05{
 position: absolute;
 top: 500px;
 left: 30px;
}

.sstab06{
 position: absolute;
 top: 500px;
 left: 120px;
}

.sstab12{
 position: absolute;
 top: 500px;
 left: 210px;
}


.sstab07{
 position: absolute;
 top: 700px;
 left: 30px;
}

.sstab08{
 position: absolute;
 top: 700px;
 left: 120px;
}

.sstab09{
 position: absolute;
 top: 700px;
 left: 210px;
}

.sstab13{
 position: absolute;
 top: 700px;
 left: 300px;
 z-index:100;
}

  }




@media screen and (orientation:portrait) {

.ss_deco{
 margin: 20px 30px 50px 30px!important;
 padding: 10px;
 border-radius: 10px;
 box-shadow:0px 0px 10px 0px #f29c9f;
}

#ss label{
 display: inline-block!important;
 width: 230px; 
 *display: none; 
 margin: 20px 10px 10px 10px;
}

.sstabbox{
 background-image:url(../images/kinokonomi_g_ss_bg_mobile.jpg);
 margin: 0px auto ;
 font-size:18px;
}

.sstabcontent {
 height: 700px;
 padding: 0 0 20px 0;
 margin: 60px 0 0 0!important;
 overflow: auto;
}

#sstabcontent1,#sstabcontent2,#sstabcontent11,#sstabcontent15{
 background-image:url(../images/kinokonomi_g_ss_bg04_mobile.jpg);
}

#sstabcontent3,#sstabcontent4,#sstabcontent10,#sstabcontent14{
 background-image:url(../images/kinokonomi_g_ss_bg01_mobile.jpg);
}

#sstabcontent5,#sstabcontent6,#sstabcontent12{
 background-image:url(../images/kinokonomi_g_ss_bg02_mobile.jpg);
}

#sstabcontent7,#sstabcontent8,#sstabcontent9,#sstabcontent13{
 background-image:url(../images/kinokonomi_g_ss_bg03_mobile.jpg);
}

.sswrap{
 padding: 20px;
}

#ss{
 position: relative;
}

.ss_tabimage01,.ss_tabimage02,.ss_tabimage03,.ss_tabimage04{
 width: 248px!important;
 margin: 30px 0 125px 0;
 z-index: 10;
 display: inline-block!important;
}

.sstab01,.sstab02,.sstab11,.sstab15{
 width: 85px!important;
 background-color: #ffbcbe;
 border: 1px solid #ff8d91;
 border-radius: 10px;
 padding: 8px;
 text-align: center;
 line-height: 36px;
 font-weight: bold;
 box-shadow: 0 5px 0 #ff8d91;
 color: #c70067;
}

.sstab03,.sstab04,.sstab10,.sstab14{
 width: 85px!important;
 background-color: #a5b0e4;
 border: 1px solid #6579d4;
 border-radius: 10px;
 padding: 8px;
 text-align: center;
 line-height: 36px;
 font-weight: bold;
 box-shadow: 0 5px 0 #6579d4;
 color: #4d4398;
}

.sstab05,.sstab06,.sstab12{
 width: 85px!important;
 background-color: #addaf0;
 border: 1px solid #59bded;
 border-radius: 10px;
 padding: 8px;
 text-align: center;
 line-height: 36px;
 font-weight: bold;
 box-shadow: 0 5px 0 #59bded;
 color: #008db7;
}

.sstab07,.sstab08,.sstab09,.sstab13{
 width: 85px!important;
 background-color: #ffcde3;
 border: 1px solid #f08eb9;
 border-radius: 10px;
 padding: 8px;
 text-align: center;
 line-height: 36px;
 font-weight: bold;
 box-shadow: 0 5px 0 #f08eb9;
 color: #e62f8b;
}


.sstab01{
 position: absolute;
 top: 100px;
 left: 5px;
}

.sstab02{
 position: absolute;
 top: 100px;
 left: 130px;
}

.sstab11{
 position: absolute;
 top: 170px;
 left: 5px;
}

.sstab15{
 position: absolute;
 top: 170px;
 left: 130px;
}


.sstab03{
 position: absolute;
 top: 100px;
 right: 130px;
}

.sstab04{
 position: absolute;
 top: 100px;
 right: 5px;
}

.sstab10{
 position: absolute;
 top: 170px;
 right: 130px;
}

.sstab14{
 position: absolute;
 top: 170px;
 right: 5px;
}

.sstab05{
 position: absolute;
 top: 340px;
 left: 5px;
}

.sstab06{
 position: absolute;
 top: 340px;
 left: 130px;
}

.sstab12{
 position: absolute;
 top: 410px;
 left: 5px;
}

.sstab07{
 position: absolute;
 top: 340px;
 right: 130px;
}

.sstab08{
 position: absolute;
 top: 340px;
 right: 5px;
}

.sstab09{
 position: absolute;
 top: 410px;
 right: 130px;
}

.sstab13{
 position: absolute;
 top: 410px;
 right: 5px;
}


}