.yTbl {
  border-collapse: collapse;
  max-width: 900px;
  margin: 0 auto; }
  .yTbl th {
    padding: 10px 10px 5px;
    border-bottom: #cccccc 1px dotted;
    text-align: left; }
    @media screen and (max-width: 768px) {
      .yTbl th {
        width: 30%;
        display: inline-block;
        border-bottom: none; } }
  .yTbl td {
    padding: 10px 10px 5px;
    border-bottom: #cccccc 1px dotted; }
    @media screen and (max-width: 768px) {
      .yTbl td.nm {
        width: 70%;
        display: inline-block;
        border-bottom: none; } }
    @media screen and (max-width: 768px) {
      .yTbl td.blg {
        padding: 0px 10px 5px;
        display: block;
        width: 100%;
        font-size: 12px; } }

.chartArea {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  background-image: url("../img/2018_2019/cart_bg.jpg");
  background-repeat: no-repeat;
  background-position: center top; }
  @media screen and (max-width: 900px) {
    .chartArea {
      background-size: 100% auto;
      min-width: 900px; } }
  @media screen and (max-width: 768px) {
    .chartArea {
      background-image: none;
      min-width: 300px; } }
  .chartArea .chart1 {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: -webkit- space-between;
    justify-content: space-between;
    margin-bottom: 30px; }
    @media screen and (max-width: 768px) {
      .chartArea .chart1.pc {
        display: none; } }
    .chartArea .chart1.sp {
      display: none; }
      @media screen and (max-width: 768px) {
        .chartArea .chart1.sp {
          -js-display: flex;
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-flex-wrap: wrap;
          flex-wrap: wrap; } }
    .chartArea .chart1 > li {
      width: 25%;
      text-align: center; }
      @media screen and (max-width: 768px) {
        .chartArea .chart1 > li {
          width: 100%; } }
      .chartArea .chart1 > li .chart1in {
        width: 100%;
        margin-bottom: 8px; }
        .chartArea .chart1 > li .chart1in > li {
          text-align: center;
          background-color: #eeeeee;
          border-radius: 10px;
          border: #cccccc 1px solid;
          padding: 7px 15px; }
        .chartArea .chart1 > li .chart1in.box1 {
          margin-top: 25%; }
          @media screen and (max-width: 768px) {
            .chartArea .chart1 > li .chart1in.box1 {
              margin-top: 0; } }
        .chartArea .chart1 > li .chart1in.box3 {
          margin-top: 20%; }
          @media screen and (max-width: 768px) {
            .chartArea .chart1 > li .chart1in.box3 {
              margin-top: 0; } }
        .chartArea .chart1 > li .chart1in.box2 {
          margin-top: 98%; }
          @media screen and (max-width: 768px) {
            .chartArea .chart1 > li .chart1in.box2 {
              margin-top: 0; } }
  .chartArea .chart2 {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: -webkit- space-between;
    justify-content: space-between; }
    @media screen and (max-width: 768px) {
      .chartArea .chart2 {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap; } }
    .chartArea .chart2 > li {
      width: 25%;
      text-align: center;
      background-color: #eeeeee;
      border-radius: 10px;
      border: #cccccc 1px solid;
      padding: 7px 15px; }
      @media screen and (max-width: 768px) {
        .chartArea .chart2 > li {
          width: 100%;
          margin-bottom: 10px; } }
  .chartArea .nameTag.l2 {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: -webkit- space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap; }
    @media screen and (max-width: 768px) {
      .chartArea .nameTag.l2 {
        display: block; } }
    .chartArea .nameTag.l2 > li {
      width: 48.5%; }
      @media screen and (max-width: 768px) {
        .chartArea .nameTag.l2 > li {
          width: 100%; } }
  .chartArea .nameTag > li {
    border: #cccccc 1px solid;
    background-color: #ffffff;
    margin-bottom: 5px;
    border-radius: 5px;
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: -webkit- center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: -webkit- center;
    align-items: center; }
    .chartArea .nameTag > li span {
      display: inline-block;
      padding: 3px 10px;
      font-size: 12px;
      text-align: left;
      line-height: 1.3; }
    .chartArea .nameTag > li em {
      display: inline-block;
      padding: 3px 10px;
      font-size: 14px;
      text-align: left; }
  .chartArea .catName {
    font-size: 14px;
    font-weight: bold; }
    .chartArea .catName.sou {
      font-size: 18px; }

.y2020 {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  background-image: url("../img/2020_2021/cart_bg03.jpg");
  background-repeat: no-repeat;
  background-position: center top; }
  @media screen and (max-width: 900px) {
    .y2020 {
      background-size: 100% auto;
      min-width: 900px; } }
  @media screen and (max-width: 768px) {
    .y2020 {
      background-image: none;
      min-width: 300px; } }
  .y2020 .chart1 {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: -webkit- space-between;
    justify-content: space-between;
    margin-bottom: 30px;
    position: relative;
    width: 100%;
    min-height: 280px; }
    @media screen and (max-width: 768px) {
      .y2020 .chart1 {
        display: block;
        margin-bottom: 0px; } }
    .y2020 .chart1 > li {
      position: absolute;
      width: 25%;
      text-align: center; }
      @media screen and (max-width: 768px) {
        .y2020 .chart1 > li {
          width: 100%;
          position: relative; } }
      .y2020 .chart1 > li .chart1in {
        width: 100%;
        margin-bottom: 8px; }
        .y2020 .chart1 > li .chart1in > li {
          text-align: center;
          background-color: #eeeeee;
          border-radius: 10px;
          border: #cccccc 1px solid;
          padding: 7px 15px; }
          .y2020 .chart1 > li .chart1in > li p {
            font-size: 12px;
            text-align: center;
            margin: 10px auto; }
      .y2020 .chart1 > li.box1 {
        top: 0;
        left: calc(50% - 112px); }
        @media screen and (max-width: 768px) {
          .y2020 .chart1 > li.box1 {
            left: inherit; } }
      .y2020 .chart1 > li.box2 {
        top: 100px;
        left: calc(50% - 112px); }
        @media screen and (max-width: 768px) {
          .y2020 .chart1 > li.box2 {
            top: 0;
            left: inherit; } }
      .y2020 .chart1 > li.box3 {
        top: 20px;
        right: 0; }
        @media screen and (max-width: 768px) {
          .y2020 .chart1 > li.box3 {
            top: 0;
            left: inherit; } }
      .y2020 .chart1 > li.box4 {
        top: 100px;
        left: 0; }
        @media screen and (max-width: 768px) {
          .y2020 .chart1 > li.box4 {
            top: 0;
            left: inherit; } }
  .y2020 .chart2 {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: -webkit- space-between;
    justify-content: space-between;
    width: 85%;
    margin: 0 auto 40px; }
    @media screen and (max-width: 768px) {
      .y2020 .chart2 {
        width: 100%;
        margin: 0 0 0px;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap; } }
    .y2020 .chart2 > li {
      width: 29.4%;
      text-align: center;
      background-color: #eeeeee;
      border-radius: 10px;
      border: #cccccc 1px solid;
      padding: 7px 15px; }
      @media screen and (max-width: 768px) {
        .y2020 .chart2 > li {
          width: 100%;
          margin-bottom: 10px; } }
      .y2020 .chart2 > li p {
        font-size: 12px;
        text-align: center;
        margin: 10px auto; }
  .y2020 .chart3 {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: -webkit- center;
    justify-content: center;
    width: 85%;
    margin: 0 auto 40px; }
    @media screen and (max-width: 768px) {
      .y2020 .chart3 {
        width: 100%;
        margin: 0;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap; } }
    .y2020 .chart3 > li {
      width: 29.4%;
      text-align: center;
      background-color: #eeeeee;
      border-radius: 10px;
      border: #cccccc 1px solid;
      padding: 7px 15px; }
      @media screen and (max-width: 768px) {
        .y2020 .chart3 > li {
          width: 100%;
          margin-bottom: 10px; } }
      .y2020 .chart3 > li p {
        font-size: 12px;
        text-align: center;
        margin: 10px auto; }
      .y2020 .chart3 > li.ml20 {
        margin-left: 6%; }
        @media screen and (max-width: 768px) {
          .y2020 .chart3 > li.ml20 {
            margin-left: 0; } }
  .y2020 .nameTag.l2 {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: -webkit- space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap; }
    @media screen and (max-width: 768px) {
      .y2020 .nameTag.l2 {
        display: block; } }
    .y2020 .nameTag.l2 > li {
      width: 48.5%; }
      @media screen and (max-width: 768px) {
        .y2020 .nameTag.l2 > li {
          width: 100%; } }
  .y2020 .nameTag > li {
    border: #cccccc 1px solid;
    background-color: #ffffff;
    margin-bottom: 5px;
    border-radius: 5px;
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: -webkit- center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: -webkit- center;
    align-items: center; }
    .y2020 .nameTag > li span {
      display: inline-block;
      padding: 3px 10px;
      font-size: 12px;
      text-align: left;
      line-height: 1.3; }
    .y2020 .nameTag > li em {
      display: inline-block;
      padding: 3px 10px;
      font-size: 14px;
      text-align: left; }
  .y2020 .catName {
    font-size: 14px;
    font-weight: bold; }
    .y2020 .catName.sou {
      font-size: 18px; }

.img {
  width: 70%;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .img {
      width: 100%; } }