[data-tabs] {
}

[data-tab] {
  /* Hide the element from UI, but still available for focus. */
  opacity: 0;
  position: absolute;
  pointer-events: none;
}


/* Tab Label Active State */

[data-tab="tab1"]:checked ~ nav [data-tab-label="tab1"],
[data-tab="tab2"]:checked ~ nav [data-tab-label="tab2"] {
z-index: 10;
opacity: 1;
}
[data-tab="tab1"] ~ nav [data-tab-label="tab1"] {
background: #5e7b8e;
background: -moz-linear-gradient(top,  #5e7b8e 0%, #5e7b8e 0%, #3b516e 100%);
background: -webkit-linear-gradient(top,  #5e7b8e 0%,#5e7b8e 0%,#3b516e 100%);
background: linear-gradient(to bottom,  #5e7b8e 0%,#5e7b8e 0%,#3b516e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e7b8e', endColorstr='#3b516e',GradientType=0 );
}
[data-tab="tab2"] ~ nav [data-tab-label="tab2"] {
background: #5e7b8e;
background: -moz-linear-gradient(top,  #5e7b8e 0%, #668b70 0%, #3d6556 100%);
background: -webkit-linear-gradient(top,  #5e7b8e 0%,#668b70 0%,#3d6556 100%);
background: linear-gradient(to bottom,  #5e7b8e 0%,#668b70 0%,#3d6556 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e7b8e', endColorstr='#3d6556',GradientType=0 );
}


/* Tab Label Focus State */
[data-tab="tab1"]:focus ~ nav [data-tab-label="tab1"],
[data-tab="tab2"]:focus ~ nav [data-tab-label="tab2"] {
}

/* Hide focus ring if focus comes from a pointer device. */
[data-tab="tab1"]:focus:not(:focus-visible) ~ nav [data-tab-label="tab1"],
[data-tab="tab2"]:focus:not(:focus-visible) ~ nav [data-tab-label="tab2"]{
}

/* Tab Panel Active State */

[data-tab="tab1"]:checked ~ nav ~ [data-tab-panel="tab1"],
[data-tab="tab2"]:checked ~ nav ~ [data-tab-panel="tab2"] {
  visibility: visible;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 1px solid #898989;
  opacity: 1;
}

@media screen and (min-width: 641px),print {
[data-tab="tab1"] ~ nav [data-tab-label="tab1"]:before {
content: '';
display: inline-block;
width: 60px;
height: 60px;
background-image: url(../image/icon_type1.png);
background-size: contain;
vertical-align: middle;
position: absolute;
top: 15%;
left: 2%;
}
[data-tab="tab2"] ~ nav [data-tab-label="tab2"]:before {
content: '';
display: inline-block;
width: 60px;
height: 60px;
background-image: url(../image/icon_type2.png);
background-size: contain;
vertical-align: middle;
position: absolute;
top: 15%;
left: 2%;
}

[data-tab-panel] {
  position: relative;
  z-index: 1;
  visibility: hidden;
  height: 0;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  width: 100%;
}


nav {
display: flex;
flex-flow: nowrap;
justify-content: space-between;
}

[data-tab-label] {
  position: relative;
  cursor: pointer;
  font-size: 30px;
  width: 580px;
  display: block;
  padding: 1em 0 1em 0;
  opacity: 0.6;
}

[data-tab-label]:hover {
opacity: 1;
}


}


@media screen and (min-width: 0px) and (max-width: 640px) {

[data-tab="tab1"] ~ nav [data-tab-label="tab1"]:before {
}
[data-tab="tab2"] ~ nav [data-tab-label="tab2"]:before {
}

[data-tab-panel] {
  position: relative;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  height: 0;
  transition: opacity .3s ease-in-out;
  width: 100%;
}
nav {
display: flex;
flex-flow: nowrap;
justify-content: space-between;
}

[data-tab-label] {
  position: relative;
  cursor: pointer;
  font-size: 18px;
  line-height: 1.2em;
  width: 90%;
  display: block;
  padding: 0.5em 0 0.5em 0;
  opacity: 0.6;
  text-align: center;
}
[data-tab-label]:hover {
opacity: 1;
}
[data-tab-label] b {
display: block;
}
}