h2 {
  color: RGBa(0,118,174,255); * bleu
  font-size: 0.4vw;
  font-family: Arial;
  font-style: oblique;
}


.zone1, .zone1_2ch {
	background-color:  #33ffff;*RGBa(0,175,178,255);
border-radius: 25% 10%;
}
.zone2, .zone2_2ch {
	background-color: RGBa(245,168,4,50);
border-radius:  25% 10%;* 10px 100px / 120px;
}
.zone1, .zone2, .zone2_2ch, .zone1_2ch {
  display: block;
  height: auto;*5.4vw;
  width: 20vw;
  position: relative;
line-height: 1.5vw;
  margin-top: 5px;
 margin-bottom: 5px;
padding-top: 1.8vw;
padding-bottom: 1.8vw;
font-size: 1.5vw;
white-space: nowrap;

}
.zone1  span, .zone2  span, .zone2_2ch span, .zone1_2ch span {
top: -15px;
  position: relative;
white-space: nowrap;
}
.zone1:hover,.zone1_2ch:hover {
 background-color: RGBa(0,200,255,50);
}
.zone2:hover,.zone2_2ch:hover {
  background-color: RGBa(245,200,4,50);
}
.zone1:hover .sous,.zone1_2ch:hover .sous  {
  display: block;
}

.zone2:hover .sous,.zone2_2ch:hover .sous,.zone2_2ch:hover .sous_g,.zone1_2ch:hover .sous_g {
  display: block;
}


.sous span {
top: 0px;
  position: relative;
white-space: nowrap;
}
@media only screen and (max-width: 800px) {
.zone1 a:hover,.zone1_2ch a:hover  {
 font-size: 2.5vw;
}
.zone2 a:hover,.zone2_2ch a:hover  {
 font-size: 2.5vw;
}
.zone1 a:hover > .detail {
 font-size: 2.5vw;
}
.zone2 a:hover > .detail {
 font-size: 2.5vw;
}
.sous {
  display: none;
background-color: RGBa(203,16,33,255);
  width: auto;
  left: 55%;*100%;
 position: absolute;
  top: 75%;*-20px;
  z-index: 1000;
  list-style-type: none;
  border-top: 2px solid;
   border-right: 2px solid;
   white-space: nowrap;
   color: white;*RGBa(245,168,4,50);
  * text-decoration: none;
  border-radius: 10px;
transform-origin: 0% -50%;
animation: 1s slidein;
white-space: nowrap;
}
.sous_g {
  display: none;
background-color: RGBa(203,16,33,255);
  width: auto;
  left: -40%;*-14vw;
 position: absolute;
  top: 80%;
  z-index: 1000;
  list-style-type: none;
  border-top: 2px solid;
   border-right: 2px solid;
   white-space: nowrap;
   color: white;*RGBa(245,168,4,50);
  * text-decoration: none;
border-radius: 10px;
transform-origin: 0% -50%;
animation: 1s slidein;
white-space: nowrap;
}

.zone1 > a::after {
      content:  " \25bc";
display: block;
font-size: 1.5vw;
margin-top: 1.5vw;
  color: RGBa(0,0,93,50); *RGBa(255,235,3,250);
}
.zone1_2ch > a::after {
      content:  " \25bc";
display: block;
font-size: 1.5vw;
margin-top: 1.5vw;
  color: RGBa(0,0,93,50); *RGBa(255,235,3,250);
}
.zone2 > a::after {
   content:  " \25bc";
display: block;
    font-size: 1.5vw;
margin-top: 1.5vw;
  color: RGBa(0,0,93,50); *RGBa(255,235,3,250);
}
.zone2_2ch > a::after {
   content:  " \25bc";
display: block;
    font-size: 1.5vw;
margin-top: 1.5vw;
  color: RGBa(0,0,93,50); *RGBa(255,235,3,250);
}
 #ch0 > a::after {
   content:  " ";
}}


@media only screen and (min-width: 800px) {
.sous {
  display: none;
background-color: RGBa(203,16,33,255);
  width: auto;
  left: 100%;
 position: absolute;
  top: -20px;
  z-index: 1000;
  list-style-type: none;
  border-top: 2px solid;
   border-right: 2px solid;
   white-space: nowrap;
   color: white;*RGBa(245,168,4,50);
  * text-decoration: none;
  border-radius: 10px;
white-space: nowrap;
transform-origin: 0% -50%;
animation: 1s slidein;
}
.sous_g {
  display: none;
background-color: RGBa(203,16,33,255);
  width: auto;
  left: -50%;*-14vw;
 position: absolute;
  top: -20px;
  z-index: 1000;
  list-style-type: none;
  border-top: 2px solid;
   border-right: 2px solid;
   white-space: nowrap;
   color: white;*RGBa(245,168,4,50);
  * text-decoration: none;
border-radius: 10px;
white-space: nowrap;
transform-origin: 0% -50%;
animation: 1s slidein;
}
.zone1_2ch > a::before{
      content:  "\0025C4";
*display: block;
font-size: 1.5vw;
margin-top: 1.5vw;
  color: RGBa(0,0,93,50); *RGBa(255,235,3,250);
}
.zone2_2ch  > a::before{
   content:  " \0025C4";
*display: block;
    font-size: 1.5vw;
margin-top: 1.5vw;
  color: RGBa(0,0,93,50); *RGBa(255,235,3,250);
}
.zone1 > a::after{
   content: "  \25ba";
font-size: 1.5vw;
  color: RGBa(0,0,93,50); *RGBa(255,235,3,250);

}
 .zone1_2ch > a::after{
   content: "  \25ba";
font-size: 1.5vw;
  color: RGBa(0,0,93,50); *RGBa(255,235,3,250);

}
.zone2 > a::after{
   content: "  \25ba";
    font-size: 1.5vw;
  color: RGBa(0,0,93,50); *RGBa(255,235,3,250);

}
.zone2_2ch > a::after{
   content: "  \25ba";
    font-size: 1.5vw;
  color: RGBa(0,0,93,50); *RGBa(255,235,3,250);
}
 #ch0 > a::after {
   content:  " ";
}}
  
.sous2,.zone1_2ch .sous2 {
  display: none;
   background-color: yellow; *RGBa(245,168,4,50)
   width: 100%;
  left: 100%;
*marging-left: -40px;
 position:absolute;
  *top: -20px;
  margin-top: -2.5vw;
white-space: nowrap;
  z-index: 1500;
  list-style-type: none;
  border-top: 2px solid;
   border-right: 2px solid;
   white-space: nowrap;
   color: RGBa(0,175,178,255);
  * text-decoration: none;
  border-radius: 10px;
transform-origin: 0% -50%;
white-space: nowrap;
animation: 1s slidein;
}
.zone2 .sous2,.zone2_2ch .sous2 {
  display: none;
   background-color: yellow; *RGBa(245,168,4,50)
   width: 100%;
  left: 100%;

*marging-left: -40px;
 position:absolute;
  *top: -18px;
 margin-top: -2.5vw;
white-space: nowrap;
  z-index: 1500;
  list-style-type: none;
  border-top: 2px solid;
   border-right: 2px solid;
   white-space: nowrap;
   color: RGBa(0,175,178,255);
  * text-decoration: none;
  border-radius: 10px;
white-space: nowrap;
transform-origin: 0% -50%;
animation: 1s slidein;
}


.sous a, .sous_g a {
	text-decoration: none;
	color: white;
white-space: nowrap;
}

.sous2 a {
	text-decoration: none;
	color: black;
white-space: nowrap;

}


.sous li , .sous_g li{
margin-left:-40px;
text-align: left;
padding-left: 22px;
*width: 100%;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
  border-bottom: 2px solid;
  border-left: 2px solid;
  text-decoration: none;
white-space: nowrap;
  
}
.sous li:hover .sous2 {
  display: block;
}
.zone1 .sous2 li {
margin-left:-40px;
text-align: left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
  border-bottom: 2px solid;
  border-left: 2px solid;
  text-decoration: none;
white-space: nowrap;

}
.zone1 .sous2 li:hover {
background-color: RGBa(0,200,255,50);*(162,208,0,50);
 border-right: 2px solid;
 border-color: white;
 color: black;
height: auto;*20px;
white-space: nowrap;
}
.zone2 .sous2 li:hover {
background-color: RGBa(245,200,4,50);*(162,208,0,50);
}
.sous li:hover, .sous_g li:hover {
background-color: RGBa(162,208,0,50);
 border-right: 2px solid;
 border-color: white;
 color: black;

}

.zone1 a {
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}
.zone2 a {
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}
.zone1 span.detail {
top: 6px;
 font-size: 1.5vw;
  color: RGBa(0,153,157);
white-space: nowrap;
}
.zone2 span.detail {
top: 6px;
font-size: 1.5vw;
  color: RGBa(0,153,157);
white-space: nowrap;
}
@keyframes slidein {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}