@@charset "UTF-8";

* {padding: 0; margin: 0;}
a { text-decoration: none; color: #000;}
a.btn1 { background: linear-gradient(#7ef2af 0%, #10ce7e 100%); display: block; text-align: center; width: max-content; color: #fff; font-size: 150%; padding: 1vw 2vw; border-radius: 1vw; margin: 0 auto;}

.maincont {padding-top: 3vw;}
.main {text-align: center; margin: auto;}
section { margin: 0vw auto; text-align: center; width: 95%;}

table { margin: 1vw auto; border-collapse: collapse; border:solid 1px #444; margin-bottom: 1vw;}
th,td { border:solid 1px #888; padding: 1vw .4vw; font-size: 110%;}
th {background: #10CEB1; color: #fff;}
td { background: #fff;}
select {font-size: 130%; padding: .3vw;}
.duocell {width: 52%; display:flex; justify-content: center; margin: 0 auto 1vw;}
.duocell .cell {width: 50%; text-align: center; display: block; margin: 0 1vw; border:solid 1px #cacaca; background: #fff; padding: 0 0 .5vw;}
.duocell .cell.em { border:solid 4px #10CEB1; box-sizing: border-box;}
.duocell .cell h3 {display: block; color: #fff; text-align: center; padding: 1vw; margin: 0; background: #cacaca;}
.duocell .cell.em h3 {background: #10CEB1;}

.duocell .cell p {font-size: 160%; font-weight: normal; background: #fff;  padding: .5vw 0;}
.duocell .cell p:last-child {}
.lead { text-align: center; font-size: 120%; margin: 0 auto;}

.mb1 {margin-bottom: 1vw!important;}
.mb3 {margin-bottom: 3vw!important;}
.mb5 {margin-bottom: 5vw!important;}
.mb7 {margin-bottom: 7vw!important;}
.mb10 {margin-bottom: 10vw!important;}

.description th:nth-child(1) {width: 25%;}
.description th:nth-child(2) {width: 75%;}
.description td:nth-child(2) {text-align: left;}

.bon { width: 60%; margin: 0 auto;}
.bon .bonbox { font-size: 120%;}
.bon .bonbox .cell { width: 100%; display: flex; justify-content: flex-start;}
.bon .bonbox .cell p:first-child { width: 10%; text-align: center; background: #fff; padding: .3vw;}
.bon .bonbox .cell p:last-child { width: 90%; text-align: left; padding: .3vw;}
.bon .bonbox .cell p.ye {background: yellow;}

#sec1 table { width: 50%;}
#sec3 table {display: none;}
#sec3 table.show {display: table;}
#sec3 table th {background: #e2e0e0; color: #000;}
#sec3 table thead tr:nth-of-type(1) th:nth-child(1) {width: 5%;}
#sec3 table thead tr:nth-of-type(1) th:nth-child(2) {width: 5%;}
#sec3 table thead tr:nth-of-type(1) th:nth-child(3) {width: 8%;}
#sec3 table thead tr:nth-of-type(1) th:nth-child(4) {width: 18%;}
#sec3 table thead tr:nth-of-type(1) th:nth-child(5) {width: 10%;}
#sec3 table td.yellow {background: yellow;}
#sec3 table td.yellowsec {background: yellow;}
#sec3 table tbody tr:nth-child(1) {border: solid 4px #10CEB1; box-sizing: border-box;}
#sec3 table tbody tr:nth-child(1) td {height: 50px;}
#sec3 table tbody tr:nth-child(2) td {height: 51.5px;}
#sec3 table tr:nth-child(1) td:nth-child(1){background: #10CEB1;}
#sec3 table tr:nth-child(1) td:nth-child(1) p { background: #10CEB1; color: #fff;}
#sec3 table,#sec4 table {width: 100%;}

.tablecheck #sec3 table {display: table-row;}
#sec4 {margin-bottom: 5vw;}
#sec4 .show {display: table-row;}
#sec4 .hide {display: table-row;}
#sec4 td {background: yellow; color: #000;}
#sec4 td:first-child {background: yellow; color: #000;}
#sec4 tr.hide td:first-child {background: #fff;}
#sec4 tr.hide td:last-child {background: #fff;}
#sec4 td.yellow {background: yellow; color: #000;}
#sec2,#sec3,#sec4 {display: none; padding-top: 5vw;}

#percentage-display {font-size: 150%; font-weight: normal;}
#recommended-percentage {font-size: 200%; font-weight: normal;}

.largeBtn {font-size: 150%;}
.largeBtn::before {
  display: block;
  position: absolute;
  left: 1vw;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  background: url(./images/btnarrow.png) no-repeat;
    background-size: auto;
  background-size: contain;
  width: 1.8vw;
  height: 1.8vw;
}

.triangle {
  display: block;
  margin: 3vw auto 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-top: 30px solid #10CEB1;
  border-bottom: 0;
}