@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap");
/* **************************************************************************************************************************************************************** */
/*
/* = Menu Style
/*
/* **************************************************************************************************************************************************************** */
/*
/* = mechanism
/*
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.mainvisual-mechanism {
  background-color: #e9eae8 !important;
  background-image: url(../images/trivia/mechanism/visual_bg.png);
  background-repeat: no-repeat;
  background-position: center center;
}

@media print, screen and (min-width: 768px) {
  .pagenav-mechanism li {
    width: calc((100% - 40px) / 4);
  }
}

.mechanism-wrapper .mechanism-illustration {
  position: relative;
  border-color: rgba(165, 156, 99, 0.2);
  border-style: solid;
  border-width: 1px;
  margin-top: 30px;
}

@media print, screen and (min-width: 768px) {
  .mechanism-wrapper .mechanism-illustration {
    padding: 40px 20px 20px 20px;
  }
}

@media print, screen and (max-width: 767px) {
  .mechanism-wrapper .mechanism-illustration {
    padding: 40px 10px 10px 10px;
  }
}

.mechanism-wrapper .mechanism-illustration .mechanism-illustration--fig {
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .mechanism-wrapper .mechanism-illustration .mechanism-illustration--fig img {
    max-width: 700px;
  }
}

@media print, screen and (max-width: 767px) {
  .mechanism-wrapper .mechanism-illustration .mechanism-illustration--fig img {
    max-width: 350px;
  }
}

.mechanism-wrapper .about-illustration {
  border-color: rgba(165, 156, 99, 0.2);
  border-style: solid;
  border-width: 1px;
  position: relative;
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 768px) {
  .mechanism-wrapper .about-illustration {
    padding: 20px;
  }
}

@media print, screen and (max-width: 767px) {
  .mechanism-wrapper .about-illustration {
    padding: 10px;
  }
}

@media print, screen and (min-width: 768px) {
  .mechanism-wrapper .about-illustration {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media print, screen and (max-width: 767px) {
  .mechanism-wrapper .about-illustration {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@media print, screen and (min-width: 768px) {
  .mechanism-wrapper .about-illustration .about-illustration--fig {
    width: 500px;
  }
  .mechanism-wrapper .about-illustration .about-illustration--txt {
    width: calc(100% - 500px - 40px);
  }
}

@media print, screen and (max-width: 767px) {
  .mechanism-wrapper .about-illustration .about-illustration--fig {
    margin-bottom: 20px;
  }
}

.mechanism-wrapper .cause-illustration {
  border-color: rgba(165, 156, 99, 0.2);
  border-style: solid;
  border-width: 1px;
  position: relative;
  margin-top: 30px;
}

@media print, screen and (min-width: 768px) {
  .mechanism-wrapper .cause-illustration {
    padding: 20px;
  }
}

@media print, screen and (max-width: 767px) {
  .mechanism-wrapper .cause-illustration {
    padding: 10px;
  }
}

.mechanism-wrapper .cause-illustration .cause-illustration--fig {
  text-align: center;
}

.mechanism-wrapper .cause-illustration .cause-illustration--fig img {
  max-width: 500px;
}

.mechanism-wrapper .cause-explanation {
  background-color: rgba(165, 156, 99, 0.2);
  counter-reset: number;
}

@media print, screen and (min-width: 768px) {
  .mechanism-wrapper .cause-explanation {
    padding: 40px;
  }
}

@media print, screen and (max-width: 767px) {
  .mechanism-wrapper .cause-explanation {
    padding: 20px;
  }
}

.mechanism-wrapper .cause-explanation .cause-explanation-item {
  border-color: rgba(165, 156, 99, 0.2);
  border-style: solid;
  border-width: 1px;
  background-color: #ffffff;
}

@media print, screen and (min-width: 768px) {
  .mechanism-wrapper .cause-explanation .cause-explanation-item {
    padding: 20px;
  }
}

@media print, screen and (max-width: 767px) {
  .mechanism-wrapper .cause-explanation .cause-explanation-item {
    padding: 10px;
  }
}

.mechanism-wrapper .cause-explanation .cause-explanation-item + .cause-explanation-item {
  margin-top: 10px;
}

.mechanism-wrapper .cause-explanation .cause-explanation-item--point {
  margin-top: 20px;
  border-color: rgba(165, 156, 99, 0.2);
  border-style: solid;
  border-width: 1px;
}

@media print, screen and (min-width: 768px) {
  .mechanism-wrapper .cause-explanation .cause-explanation-item--point {
    padding: 20px;
  }
}

@media print, screen and (max-width: 767px) {
  .mechanism-wrapper .cause-explanation .cause-explanation-item--point {
    padding: 10px;
  }
}

/*
/* = type
/*
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.mainvisual-type {
  background-color: #e0e0e0 !important;
  background-image: url(../images/trivia/type/visual_bg.png);
  background-repeat: no-repeat;
  background-position: center center;
}

@media print, screen and (min-width: 768px) {
  .pagenav-type li {
    width: calc((100% - 40px) / 3);
  }
}

.type-wrapper .part-item + .part-item {
  margin-top: 30px;
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .part-illustration {
    position: relative;
    height: 460px;
    border-color: rgba(165, 156, 99, 0.2);
    border-style: solid;
    border-width: 1px;
  }
}

@media print, screen and (min-width: 768px) and (min-width: 768px) {
  .type-wrapper .part-illustration {
    padding: 20px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 767px) {
  .type-wrapper .part-illustration {
    padding: 10px;
  }
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .part-illustration .part-illustration--fig {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;
    width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .part-illustration .part-illustration--list dl {
    position: absolute;
    z-index: 2;
    width: 310px;
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .part-illustration .part-illustration--list dl {
    margin-top: 20px;
  }
  .type-wrapper .part-illustration .part-illustration--list dl + dl {
    margin-top: 5px;
  }
}

.type-wrapper .part-illustration .part-illustration--list dl dt span {
  background-color: #4c3a26;
  color: #ffffff;
  padding: 0.2em 0.5em;
  margin-bottom: 0.5em;
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .part-illustration .part-illustration--list01 {
    left: 0;
    top: 90px;
    text-align: right;
  }
  .type-wrapper .part-illustration .part-illustration--list02 {
    left: 760px;
    top: 90px;
  }
  .type-wrapper .part-illustration .part-illustration--list03 {
    left: 0;
    top: 220px;
    text-align: right;
  }
  .type-wrapper .part-illustration .part-illustration--list04 {
    left: 760px;
    top: 220px;
  }
  .type-wrapper .part-illustration .part-illustration--list05 {
    left: 0;
    top: 340px;
    text-align: right;
  }
  .type-wrapper .part-illustration .part-illustration--list06 {
    left: 760px;
    top: 340px;
  }
}

.type-wrapper .cause-item + .cause-item {
  margin-top: 30px;
}

.type-wrapper .cause-signal {
  position: relative;
  border-color: rgba(165, 156, 99, 0.2);
  border-style: solid;
  border-width: 1px;
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .cause-signal {
    padding: 60px 20px 20px 20px;
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .cause-signal {
    padding: 30px 10px 10px 10px;
  }
}

.type-wrapper .cause-signal .cause-signal--list dl {
  border: 1px solid rgba(165, 156, 99, 0.2);
  margin-bottom: 10px;
}

.type-wrapper .cause-signal .cause-signal--list dl dt {
  background-color: rgba(165, 156, 99, 0.2);
  padding: 8px;
}

.type-wrapper .cause-signal .cause-signal--list dl dt::before {
  display: inline-block;
  margin-right: 8px;
  color: #d97328;
  content: "";
  width: 25px;
  height: 25px;
  background-image: url(../images/common/ico-check.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 25px 25px;
  vertical-align: middle;
}

.type-wrapper .cause-signal .cause-signal--list dl dd {
  padding: 8px;
}

.type-wrapper .cause-tbl > p {
  border-top: 1px solid rgba(165, 156, 99, 0.6);
  border-left: 1px solid rgba(165, 156, 99, 0.6);
  border-right: 1px solid rgba(165, 156, 99, 0.6);
  text-align: center;
  background-color: rgba(165, 156, 99, 0.2);
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .cause-tbl > p {
    padding: 25px;
    font-size: 22px;
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .cause-tbl > p {
    padding: 15px;
    font-size: 22px;
  }
}

.type-wrapper .cause-tbl > dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .cause-tbl > dl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .cause-tbl > dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.type-wrapper .cause-tbl > dl > dt {
  border-top: 1px solid rgba(165, 156, 99, 0.6);
  border-left: 1px solid rgba(165, 156, 99, 0.6);
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .cause-tbl > dl > dt {
    width: 200px;
    padding: 15px;
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .cause-tbl > dl > dt {
    padding: 15px;
    width: 100%;
    border-right: 1px solid rgba(165, 156, 99, 0.6);
    border-bottom: 1px dotted rgba(165, 156, 99, 0.6);
  }
}

.type-wrapper .cause-tbl > dl > dd {
  padding: 15px;
  border-left: 1px solid rgba(165, 156, 99, 0.6);
  border-right: 1px solid rgba(165, 156, 99, 0.6);
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .cause-tbl > dl > dd {
    border-top: 1px solid rgba(165, 156, 99, 0.6);
    width: calc(100% - 200px);
    padding: 15px;
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .cause-tbl > dl > dd {
    padding: 15px;
    width: 100%;
  }
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .cause-tbl > dl:last-of-type > dt,
  .type-wrapper .cause-tbl > dl:last-of-type > dd {
    border-bottom: 1px solid rgba(165, 156, 99, 0.6);
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .cause-tbl > dl:last-of-type > dd {
    border-bottom: 1px solid rgba(165, 156, 99, 0.6);
  }
}

.type-wrapper .cause-tbl .cause-tbl--list {
  margin-top: 15px;
  padding: 15px;
  background-color: rgba(128, 105, 91, 0.2);
}

.type-wrapper .cause-tbl .cause-tbl--method {
  margin-top: 15px;
}

.type-wrapper .cause-tbl .cause-tbl--method dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: rgba(165, 156, 99, 0.2);
  margin-bottom: 1px;
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .cause-tbl .cause-tbl--method dl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .cause-tbl .cause-tbl--method dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .cause-tbl .cause-tbl--method dl dt {
    padding: 20px 15px;
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .cause-tbl .cause-tbl--method dl dt {
    padding: 15px 15px;
    border-bottom: 1px dotted #ffffff;
  }
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .cause-tbl .cause-tbl--method dl dd {
    padding: 20px 15px;
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .cause-tbl .cause-tbl--method dl dd {
    padding: 15px 15px;
  }
}

.type-wrapper .class-tbl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .class-tbl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .class-tbl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.type-wrapper .class-tbl > dl {
  border-color: rgba(165, 156, 99, 0.2);
  border-style: solid;
  border-width: 1px;
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .class-tbl > dl {
    padding: 20px;
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .class-tbl > dl {
    padding: 10px;
  }
}

@media print, screen and (min-width: 768px) {
  .type-wrapper .class-tbl > dl {
    width: calc((100% - 30px) / 4);
  }
}

@media print, screen and (max-width: 767px) {
  .type-wrapper .class-tbl > dl {
    margin-bottom: 10px;
  }
}

.type-wrapper .class-tbl > dl > dt {
  text-align: center;
  margin-bottom: 20px;
}

.type-wrapper .class-tbl .class-tbl--fig {
  text-align: center;
}

.type-wrapper .class-tbl .class-tbl--fig img {
  max-width: 220px;
}

.type-wrapper .class-tbl .class-tbl--list {
  margin-top: 20px;
}

.type-wrapper .class-tbl .class-tbl--list dt {
  font-weight: bold;
}

/*
/* = machine
/*
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.mainvisual-machine {
  background-color: #939393 !important;
  background-image: url(../images/trivia/machine/visual_bg.png);
  background-repeat: no-repeat;
  background-position: center center;
}

@media print, screen and (min-width: 768px) {
  .pagenav-machine li {
    width: calc((100% - 40px) / 2);
  }
}

@media print, screen and (max-width: 767px) {
  .pagenav-machine li {
    width: calc((100% - 8px) / 2) !important;
  }
}

.machine-wrapper .intro-tbl {
  margin-top: 30px;
  width: 100%;
  border-collapse: collapse;
}

.machine-wrapper .intro-tbl th,
.machine-wrapper .intro-tbl td {
  border: 1px solid rgba(165, 156, 99, 0.6);
}

@media print, screen and (min-width: 768px) {
  .machine-wrapper .intro-tbl th,
  .machine-wrapper .intro-tbl td {
    padding: 15px;
  }
}

@media print, screen and (max-width: 767px) {
  .machine-wrapper .intro-tbl th,
  .machine-wrapper .intro-tbl td {
    padding: 10px;
  }
}

.machine-wrapper .intro-tbl thead th {
  text-align: center;
  background-color: rgba(165, 156, 99, 0.2);
}

.machine-wrapper .intro-tbl tbody th,
.machine-wrapper .intro-tbl tbody td {
  background-color: #ffffff;
}

@media print, screen and (min-width: 768px) {
  .machine-wrapper .intro-tbl tbody th {
    width: 300px;
  }
  .machine-wrapper .intro-tbl tbody td {
    width: calc(100% - 200px);
  }
}

@media print, screen and (max-width: 767px) {
  .machine-wrapper .intro-tbl {
    font-size: 84%;
  }
}

.machine-wrapper .intro-fig {
  margin-top: 30px;
  border-color: rgba(165, 156, 99, 0.2);
  border-style: solid;
  border-width: 1px;
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .machine-wrapper .intro-fig {
    padding: 40px 20px 20px 20px;
  }
}

@media print, screen and (max-width: 767px) {
  .machine-wrapper .intro-fig {
    padding: 30px 10px 10px 10px;
  }
}

.machine-wrapper .intro-fig .list--num li:last-child {
  padding-left: 0;
  text-indent: 0;
}

.machine-wrapper .list-tbl {
  margin-top: 30px;
  width: 100%;
  border-collapse: collapse;
}

.machine-wrapper .list-tbl th,
.machine-wrapper .list-tbl td {
  border: 1px solid rgba(165, 156, 99, 0.6);
}

@media print, screen and (min-width: 768px) {
  .machine-wrapper .list-tbl th,
  .machine-wrapper .list-tbl td {
    padding: 15px;
  }
}

@media print, screen and (max-width: 767px) {
  .machine-wrapper .list-tbl th,
  .machine-wrapper .list-tbl td {
    padding: 10px;
  }
}

.machine-wrapper .list-tbl thead th {
  text-align: center;
  background-color: rgba(165, 156, 99, 0.2);
}

.machine-wrapper .list-tbl tbody th,
.machine-wrapper .list-tbl tbody td {
  background-color: #ffffff;
}

@media print, screen and (min-width: 768px) {
  .machine-wrapper .list-tbl tbody th {
    width: 200px;
  }
  .machine-wrapper .list-tbl tbody td {
    width: calc(100% - 200px);
  }
}

.machine-wrapper .list-detail {
  background-color: rgba(165, 156, 99, 0.2);
}

@media print, screen and (min-width: 768px) {
  .machine-wrapper .list-detail {
    padding: 40px;
  }
}

@media print, screen and (max-width: 767px) {
  .machine-wrapper .list-detail {
    padding: 20px;
  }
}

.machine-wrapper .list-detail .list-legend {
  border-color: rgba(165, 156, 99, 0.2);
  border-style: solid;
  border-width: 1px;
  margin-bottom: 10px;
  background-color: #ffffff;
  font-size: 84%;
}

@media print, screen and (min-width: 768px) {
  .machine-wrapper .list-detail .list-legend {
    padding: 20px;
  }
}

@media print, screen and (max-width: 767px) {
  .machine-wrapper .list-detail .list-legend {
    padding: 10px;
  }
}

.machine-wrapper .list-detail .list-legend ul li span:after {
  content: "・・・";
}

.machine-wrapper .list-detail .list-detail-item {
  border-color: rgba(165, 156, 99, 0.2);
  border-style: solid;
  border-width: 1px;
  background-color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 768px) {
  .machine-wrapper .list-detail .list-detail-item {
    padding: 20px;
  }
}

@media print, screen and (max-width: 767px) {
  .machine-wrapper .list-detail .list-detail-item {
    padding: 10px;
  }
}

@media print, screen and (min-width: 768px) {
  .machine-wrapper .list-detail .list-detail-item {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media print, screen and (max-width: 767px) {
  .machine-wrapper .list-detail .list-detail-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.machine-wrapper .list-detail .list-detail-item + .list-detail-item {
  margin-top: 10px;
}

.machine-wrapper .list-detail .list-detail-item--tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 84%;
}

.machine-wrapper .list-detail .list-detail-item--tbl table th,
.machine-wrapper .list-detail .list-detail-item--tbl table td {
  border: 1px solid rgba(165, 156, 99, 0.6);
}

@media print, screen and (min-width: 768px) {
  .machine-wrapper .list-detail .list-detail-item--tbl table th,
  .machine-wrapper .list-detail .list-detail-item--tbl table td {
    padding: 15px;
  }
}

@media print, screen and (max-width: 767px) {
  .machine-wrapper .list-detail .list-detail-item--tbl table th,
  .machine-wrapper .list-detail .list-detail-item--tbl table td {
    padding: 10px;
  }
}

.machine-wrapper .list-detail .list-detail-item--tbl table thead th {
  text-align: center;
  background-color: rgba(165, 156, 99, 0.2);
}

.machine-wrapper .list-detail .list-detail-item--tbl table tbody th,
.machine-wrapper .list-detail .list-detail-item--tbl table tbody td {
  background-color: #ffffff;
}

@media print, screen and (min-width: 768px) {
  .machine-wrapper .list-detail .list-detail-item--tbl table tbody th {
    width: 200px;
  }
  .machine-wrapper .list-detail .list-detail-item--tbl table tbody td {
    width: calc(100% - 200px);
  }
}

@media print, screen and (min-width: 768px) {
  .machine-wrapper .list-detail h4 {
    width: 100%;
  }
  .machine-wrapper .list-detail .list-detail-item--fig {
    width: 300px;
  }
  .machine-wrapper .list-detail .list-detail-item--tbl {
    width: calc(100% - 300px - 40px);
  }
}

@media print, screen and (max-width: 767px) {
  .machine-wrapper .list-detail .list-detail-item--fig {
    text-align: center;
  }
  .machine-wrapper .list-detail .list-detail-item--fig img {
    max-width: 300px;
  }
}