@charset "UTF-8";

body {
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, Verdana, sans-serif;
  color: #333;
  font-weight: 400;
  line-height: 1.6;
}
p,
span {
  line-height: 1.6;
  letter-spacing: 0;
}
a {
  word-break: break-all;
  color: inherit;
  transition: all 0.3s all;
}
a:hover {
  color: inherit;
}
em {
  font-style: normal;
}
sup {
  top: -0.25em;
}

.bold {
  font-weight: 700;
}
.underline {
  text-decoration: underline;
}

ul.notes > li {
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.6;
}
.notes li:before {
  content: "※";
}
ul.notes.number {
  counter-reset: number;
}
ul.notes.number > li:not(.nonumber) {
  text-indent: -2.5em;
  padding-left: 2.5em;
}
ul.notes.number > li:not(.nonumber):before {
  counter-increment: number;
  content: "※" counter(number) " ";
}
ul.notes.number > li.nonumber:before {
  content: "※";
}
@media screen and (min-width: 641px) {
  ul.notes > li {
    font-size: 12px;
  }
}
@media screen and (max-width: 640px) {
  ul.notes > li {
    font-size: 10px;
  }
}
.dot > li:before {
  content: "・";
}
ul.dot > li {
  text-indent: -1em;
  padding-left: 1em;
}
.wrap {
  position: relative;
}
@media screen and (min-width: 641px) {
  .wrap {
    min-width: 1280px;
    padding-bottom: 170px;
  }
  .row {
    width: 1120px;
    padding: 0 35px;
    max-width: 100%;
  }
}
@media screen and (max-width: 640px) {
  .wrap {
    padding-bottom: 50px;
  }
  .row {
    padding: 0 15px;
  }
}
@media screen and (max-width: 340px) {
  .row {
    padding: 0 10px;
  }
}

/** SECTION HERO
==============================================*/
.section-hero .headline {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#020f28+0,0b1f42+45,020f28+100 */
  background: #020f28; /* Old browsers */
  background: -moz-linear-gradient(left, #020f28 0%, #0b1f42 45%, #020f28 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #020f28 0%, #0b1f42 45%, #020f28 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #020f28 0%, #0b1f42 45%, #020f28 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020f28', endColorstr='#020f28',GradientType=1 ); /* IE6-9 */
}
@media screen and (min-width: 641px) {
  .section-hero .headline {
    padding-top: 40px;
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 640px) {
  .section-hero .headline {
    padding-top: 35px;
    padding-bottom: 30px;
  }
}

.page-title {
  text-align: center;
  color: #fff;
}
.page-title__lead {
  display: inline-block;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  border-bottom: 1px solid #fff;
  padding-bottom: 5px;
}
.page-title__main {
  display: block;
  margin-right: auto;
  margin-left: auto;
  max-width: 100%;
}
@media screen and (min-width: 641px) {
  .page-title__lead {
    font-size: 23px;
    padding-right: 35px;
    padding-left: 35px;
    line-height: 1.8;
  }
  .page-title__main {
    width: 621px;
    margin-top: 20px;
  }
}
@media screen and (max-width: 640px) {
  .page-title__lead {
    font-size: 20px;
    padding-right: 20px;
    padding-left: 20px;
  }
  .page-title__main {
    width: 266px;
    margin-top: 30px;
  }
}
@media screen and (max-width: 375px) {
  .page-title__lead {
    font-size: 5.33vw;
  }
  .page-title__main {
    width: 70.93vw;
  }
}

.target-card {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.target-card > li {
  text-align: center;
  flex: 1;
}
.target-card > li img {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.target-card__gold {
  background-color: #ada585;
}
.target-card__pearl {
  background-color: #81aba7;
}
.target-card__platinum {
  background-color: #86868c;
}
.target-card__sbs {
  background-color: #cccccc;
}
.target-card__cobalt {
  background-color: #cccccc;
}
.target-card__img {
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
  max-width: 100%;
}
@media screen and (min-width: 641px) {
  .target-card > li {
    padding: 35px 20px 35px;
  }
  .target-card__img {
    width: 256px;
  }
  .target-card__name {
    height: 32px;
    margin-top: 25px;
  }
}
@media screen and (max-width: 640px) {
  .target-card > li {
    padding: 20px 15px 15px;
  }
  .target-card__img {
    width: 256px;
  }
  .target-card__name {
    height: 16px;
    margin-top: 15px;
  }
}

/** SECTION LINEUP
==============================================*/
.section-lineup {
  background-color: #f2f2f2;
}
@media screen and (min-width: 641px) {
  .section-lineup {
    padding-top: 90px;
    padding-bottom: 150px;
  }
}
@media screen and (max-width: 640px) {
  .section-lineup {
    padding-top: 45px;
    padding-bottom: 70px;
  }
}

@media screen and (min-width: 641px) {
  .lineup-block:not(:last-child) {
    margin-bottom: 120px;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block:not(:last-child) {
    margin-bottom: 60px;
  }
}

.lineup-block__title {
  text-align: center;
}
@media screen and (min-width: 641px) {
  .lineup-block__title {
    margin-bottom: 60px;
  }
  .lineup-block__title img {
    height: 24px;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block__title {
    margin-bottom: 20px;
  }
  .lineup-block__title img {
    height: 32px;
  }
}

@media screen and (min-width: 641px) {
  .lineup-block__body {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto 1fr;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "lineup-block__img lineup-block__info"
      "lineup-block__entry lineup-block__info";
  }
}

.lineup-block__img img {
  max-width: 100%;
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
}
@media screen and (min-width: 641px) {
  .lineup-block__img {
    grid-area: lineup-block__img;
  }
  .lineup-block__img img {
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block__img {
    text-align: center;
  }
  .lineup-block__img img {
    width: 224px;
  }
}

@media screen and (min-width: 641px) {
  .lineup-block__entry {
    grid-area: lineup-block__entry;
  }
}

.lineup-block__entry-btn {
  background-color: #9e0010;
  color: #fff;
  display: block;
  border-radius: 4px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  position: relative;
  padding: 20px;
  font-size: 18px;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
}
.lineup-block__entry-btn:hover {
  color: #fff;
}
.lineup-block__entry-btn:after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: calc(50% - 4px);
  right: 30px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  z-index: 1;
  transform: rotate(-135deg);
}
@media screen and (min-width: 641px) {
  .lineup-block__entry-btn {
    margin-top: 30px;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block__entry-btn {
    margin-top: 25px;
  }
}

@media screen and (min-width: 641px) {
  .lineup-block__info {
    margin-left: 40px;
    grid-area: lineup-block__info;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block__info {
    margin-top: 60px;
  }
}

.lineup-block__spec {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 641px) {
  .lineup-block__spec {
    border-bottom: 5px solid #f2f2f2;
  }
}

.lineup-block__spec-dl {
  background-color: #fff;
}
@media screen and (min-width: 641px) {
  .lineup-block__spec-dl {
    width: calc(100% / 3);
  }
  .lineup-block__spec-dl:not(:last-of-type) {
    border-right: 5px solid #f2f2f2;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block__spec-dl {
    width: 50%;
    border-bottom: 10px solid #f2f2f2;
  }
  .lineup-block__spec-dl:not(:last-of-type):not(.lineup-block__spec-w100-sp) {
    border-right: 10px solid #f2f2f2;
  }
  .lineup-block__spec-w100-sp {
    width: 100%;
  }
}

.lineup-block__spec-dl > dt {
  color: #fff;
  line-height: 1.75;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}
.lineup-block-gold .lineup-block__spec-dl > dt {
  background-color: #bfac58;
}
.lineup-block-pearl .lineup-block__spec-dl > dt {
  background-color: #81aba7;
}
.lineup-block-platinum .lineup-block__spec-dl > dt {
  background-color: #7e8d94;
}
.lineup-block-sbs .lineup-block__spec-dl > dt {
  background-color: #808080;
}
.lineup-block-cobalt .lineup-block__spec-dl > dt {
  background-color: #1d2075;
}
@media screen and (min-width: 641px) {
  .lineup-block__spec-dl > dt {
    padding: 5px;
  }
}
@media screen and (max-width: 375px) {
  .lineup-block__spec-dl > dt {
    font-size: 4.27vw;
  }
}

.lineup-block__spec-dl > dd {
  background-color: #fff;
  text-align: center;
}
.lineup-block__spec-dl > dd * {
  line-height: 1.4;
}
@media screen and (min-width: 641px) {
  .lineup-block__spec-dl > dd {
    font-size: 14px;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block__spec-dl > dd {
    font-size: 12px;
  }
}
@media screen and (max-width: 375px) {
  .lineup-block__spec-dl > dd {
    font-size: 3.2vw;
  }
}

.lineup-block__spec-in-half {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.lineup-block__spec-in {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
@media screen and (min-width: 641px) {
  .lineup-block__spec-in-half {
    flex-direction: column;
    width: 100%;
    padding: 10px;
  }
  .lineup-block__spec-in-half > *:not(:last-child) {
    margin-bottom: 1em;
  }
  .lineup-block__spec-in-half:not(:last-of-type):not(.lineup-block__spec-in-half-noline) {
    border-bottom: 5px solid #f2f2f2;
  }
  .lineup-block__spec-in {
    padding: 10px;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block__spec-in-half {
    padding: 10px 5px;
  }
  .lineup-block__spec-in-half > * {
    width: 50%;
  }
  .lineup-block__spec-in {
    padding: 10px 5px;
  }
}

.lineup-block__spec-txt__em {
  font-weight: 700;
}
@media screen and (min-width: 641px) {
  .lineup-block__spec-txt {
    font-size: 14px;
  }
  .lineup-block__spec-txt__em {
    font-size: 16px;
  }
  .lineup-block__spec-txt__small {
    font-size: 12px;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block__spec-txt {
    font-size: 12px;
  }
  .lineup-block__spec-txt__em {
    font-size: 13px;
  }
  .lineup-block__spec-txt__small {
    font-size: 10px;
  }
}
@media screen and (max-width: 375px) {
  .lineup-block__spec-txt {
    font-size: 3.2vw;
  }
  .lineup-block__spec-txt__em {
    font-size: 4.27vw;
  }
}

.lineup-block__spec-txt__underline {
  position: relative;
  z-index: 0;
}
.lineup-block__spec-txt__underline:before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  height: 3px;
  bottom: 0;
  z-index: -1;
}
.lineup-block-gold .lineup-block__spec-txt__underline:before {
  background-color: #bfac58;
}
.lineup-block-pearl .lineup-block__spec-txt__underline:before {
  background-color: #81aba7;
}
.lineup-block-platinum .lineup-block__spec-txt__underline:before {
  background-color: #7e8d94;
}
.lineup-block-sbs .lineup-block__spec-txt__underline:before {
  background-color: #808080;
}
.lineup-block-cobalt .lineup-block__spec-txt__underline:before {
  background-color: #1d2075;
}

.lineup-block__spec-list {
  display: inline-flex;
  flex-direction: column;
}
.lineup-block__spec-list > li {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.lineup-block__spec-list > li:not(:last-child) {
  margin-bottom: 10px;
}
@media screen and (min-width: 641px) {
}
@media screen and (max-width: 640px) {
}

.lineup-block__spec-txt__label {
  display: inline-block;
  line-height: 1 !important;
  padding: 5px 10px;
  color: #fff;
  background-color: #808080;
  font-weight: 700;
  border-radius: 3px;
  margin-top: 2px;
  margin-bottom: 2px;
}
@media screen and (min-width: 641px) {
  .lineup-block__spec-txt__label {
    margin-right: 7px;
    margin-left: 7px;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block__spec-txt__label {
    margin-right: 3px;
    margin-left: 3px;
  }
}

.lineup-block__spec-none {
  display: inline-block;
  height: 2px;
  width: 40px;
}
.lineup-block-gold .lineup-block__spec-none {
  background-color: #bfac58;
}
.lineup-block-pearl .lineup-block__spec-none {
  background-color: #81aba7;
}
.lineup-block-platinum .lineup-block__spec-none {
  background-color: #7e8d94;
}
.lineup-block-sbs .lineup-block__spec-none {
  background-color: #808080;
}
.lineup-block-cobalt .lineup-block__spec-none {
  background-color: #1d2075;
}

.lineup-block__merit {
  background-color: #fff;
}
@media screen and (min-width: 641px) {
  .lineup-block__merit {
    width: 100%;
    padding: 20px 30px;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block__merit {
    padding: 15px;
  }
}

.lineup-block__merit-list > li {
  position: relative;
  padding-left: 14px;
}
.lineup-block__merit-list > li:not(:last-child) {
  margin-bottom: 5px;
}
.lineup-block__merit-list > li:before {
  content: "";
  border-radius: 50%;
  position: absolute;
  left: 0;
  width: 4px;
  height: 4px;
  top: 0.75em;
}
.lineup-block-gold .lineup-block__merit-list > li:before {
  background-color: #bfac58;
}
.lineup-block-pearl .lineup-block__merit-list > li:before {
  background-color: #81aba7;
}
.lineup-block-platinum .lineup-block__merit-list > li:before {
  background-color: #7e8d94;
}
.lineup-block-sbs .lineup-block__merit-list > li:before {
  background-color: #808080;
}
.lineup-block-cobalt .lineup-block__merit-list > li:before {
  background-color: #1d2075;
}
@media screen and (min-width: 641px) {
  .lineup-block__merit-list > li {
    font-size: 16px;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block__merit-list > li {
    font-size: 12px;
  }
}
@media screen and (max-width: 375px) {
  .lineup-block__merit-list > li {
    font-size: 3.2vw;
  }
}

@media screen and (min-width: 641px) {
  .lineup-block-swiper .swiper-wrapper {
    transform: none;
    display: block;
    box-sizing: border-box;
  }
  .lineup-block-swiper .swiper-slide {
    transform: none;
  }
}
@media screen and (max-width: 640px) {
  .lineup-block-swiper .swiper-slide {
    /* padding-right: 15px;
    padding-left: 15px; */
  }
}

@media screen and (min-width: 641px) {
  .lineup-swiper-button {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .lineup-swiper-button {
    display: inline-block;
    width: 26.35px;
    height: 26.35px;
    position: absolute;
    top: 115px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 10;
  }
  .swiper-button-prev {
    left: 0;
  }
  .swiper-button-next {
    right: 0;
  }
  .lineup-swiper-button:after {
    content: "";
    width: 7px;
    height: 7px;
    position: absolute;
    top: calc(50% - 3.95px);
    z-index: 1;
    transform: rotate(-135deg);
  }
  .lineup-swiper-button.swiper-button-prev:after {
    border-right: 2px solid #333333;
    border-top: 2px solid #333333;
    right: calc(50% - 3.95px);
  }
  .lineup-swiper-button.swiper-button-next:after {
    border-left: 2px solid #333333;
    border-bottom: 2px solid #333333;
    left: calc(50% - 3.95px);
  }
}

@media screen and (min-width: 641px) {
  .lineup-swiper-pagination {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .lineup-swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 228px;
    left: 0;
    width: 100%;
    z-index: 10;
  }
  .lineup-swiper-pagination .swiper-pagination-bullet {
    display: inline-block;
    width: 5.1px;
    height: 5.1px;
    background-color: #cccccc;
    border-radius: 50%;
  }
  .lineup-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #333333;
  }
  .lineup-swiper-pagination .swiper-pagination-bullet:not(:last-child) {
    margin-right: 10px;
  }
}

/** MODAL OPEN
==============================================*/
[data-micromodal-transition] {
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

[data-micromodal-transition].is-open {
  opacity: 1;
}

@media screen and (min-width: 641px) {
  .modal-open {
    cursor: pointer;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }
  .modal-open:hover {
    opacity: 0.8;
  }
}

/** MODAL MICROMODAL
==============================================*/
.modal-micromodal {
  display: none;
}

.modal-micromodal.is-open {
  display: block;
}

@-webkit-keyframes modalfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes modalfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes modalfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.modal-micromodal[aria-hidden="false"] .modal-overlay {
  -webkit-animation: modalfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
  animation: modalfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.modal-micromodal[aria-hidden="true"] .modal-overlay {
  -webkit-animation: modalfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
  animation: modalfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/** MODAL OVERLAY
==============================================*/
.modal-overlay {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 641px) {
  .modal-overlay {
    padding: var(--pixel20);
  }
}
@media screen and (max-width: 640px) {
  .modal-overlay {
    padding: 0 var(--pixel10);
  }
}

/** MODAL CONTAINER
==============================================*/
/* close button */
.modal-close__button {
  display: block;
  border: var(--pixel02) solid #333;
  width: 100%;
  font-weight: 700;
  font-size: var(--pixel21);
  padding: var(--pixel10);
  text-align: center;
  position: relative;
  background-color: #fff;
}
.modal-close__button:before {
  content: "";
  position: absolute;
  width: var(--pixel24);
  height: var(--pixel24);
  background-color: #f2f2f2;
  border-radius: 50%;
  right: var(--pixel20);
  top: calc(50% - var(--pixel12));
}
.modal-close__button:after {
  content: "";
  position: absolute;
  width: var(--pixel09);
  height: var(--pixel10);
  background-color: #333;
  -webkit-clip-path: polygon(var(--pixel09) 50%, 0% 0%, 0% var(--pixel10));
  clip-path: polygon(var(--pixel09) 50%, 0% 0%, 0% var(--pixel10));
  right: var(--pixel26);
  top: calc(50% - var(--pixel05));
}

/* container */
.modal-container {
  position: relative;
  max-height: calc(100vh - var(--pixel40));
  background-color: #fff;
}
.modal-container:focus {
  outline: none;
}
.modal-container:before,
.modal-container:after {
  content: "";
  cursor: pointer;
  position: absolute;
  width: var(--pixel35);
  height: var(--pixel35);
  right: calc(0px + var(--pixel15));
  top: calc(0px - var(--pixel40));
}
.modal-container:before {
  background-color: #858585;
  border-radius: 50%;
}
.modal-container:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%209.1%209.1%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23333%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M8%2C9.1L0%2C1.1%2C1.1%2C0l8%2C8-1.1%2C1.1ZM1.1%2C9.1l-1.1-1.1L8%2C0l1.1%2C1.1L1.1%2C9.1Z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--pixel14);
  z-index: 1;
}
@media screen and (min-width: 641px) {
  .modal-container {
    width: min(64.02777777777777vw, 922px);
  }
}

/** MODAL CONTENT
==============================================*/
.modal-content {
  line-height: 1.5;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  max-height: calc(100vh - var(--pixel40) - min(32vw, 160px));
}
.modal-content::-webkit-scrollbar {
  width: var(--pixel03);
}
.modal-content::-webkit-scrollbar-thumb {
  background-color: #d2d2d2;
}
@media screen and (min-width: 641px) {
  .modal-content {
    padding: 0 var(--pixel20);
  }
}
@media screen and (max-width: 640px) {
  .modal-content {
    padding: 0 var(--pixel10);
  }
}

/** MODAL INNER
==============================================*/
.modal-inner {
  background-color: #fff;
}
@media screen and (min-width: 641px) {
  .modal-inner {
    padding: var(--pixel40);
  }
}
@media screen and (max-width: 640px) {
  .modal-inner {
    padding: var(--pixel40) var(--pixel15);
  }
}

/** MODAL ITEM
==============================================*/
.modal-item__ttl {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 1em;
}
@media screen and (min-width: 641px) {
  .modal-item__ttl {
    font-size: var(--pixel28);
  }
}
@media screen and (max-width: 640px) {
  .modal-item__ttl {
    font-size: var(--pixel20);
  }
}

/** MODAL INFORMATION
==============================================*/
.modal-information__title {
  text-align: center;

  color: #80685a;
}
@media screen and (min-width: 641px) {
  .modal-information__title {
    font-size: var(--pixel18);
    margin-bottom: var(--pixel35);
  }
}
@media screen and (max-width: 640px) {
  .modal-information__title {
    font-size: var(--pixel16);
    margin-bottom: var(--pixel20);
  }
}

.modal-information__box:not(:first-child) {
  margin-top: var(--pixel30);
}

.modal-information__sub-ttl {
  text-align: center;
  color: #80685a;
  border-top: var(--pixel01) solid #80685a;
  border-bottom: var(--pixel01) solid #80685a;
}
.modal-information__info > *:not(:first-child) {
  margin-top: var(--pixel15);
}
@media screen and (min-width: 641px) {
  .modal-information__sub-ttl {
    font-size: var(--pixel16);
    padding-top: var(--pixel10);
    padding-bottom: var(--pixel10);
    margin-bottom: var(--pixel25);
  }
  .modal-information__notes > li {
    font-size: var(--pixel14);
  }
}
@media screen and (max-width: 640px) {
  .modal-information__sub-ttl {
    font-size: var(--pixel14);
    padding-top: var(--pixel05);
    padding-bottom: var(--pixel05);
    margin-bottom: var(--pixel20);
  }
  .modal-information__notes > li {
    font-size: var(--pixel12);
  }
}

.modal-information__table {
  width: 100%;
  border-top: var(--pixel01) solid #b0b0b0;
  border-left: var(--pixel01) solid #b0b0b0;
  border-bottom: var(--pixel01) solid #b0b0b0;
}
.modal-information__table th,
.modal-information__table td {
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
}
.modal-information__table tr:not(:first-child) th,
.modal-information__table tr:not(:first-child) td {
  border-top: var(--pixel01) solid #b0b0b0;
}
.modal-information__table th,
.modal-information__table td {
  border-right: var(--pixel01) solid #b0b0b0;
}
.modal-information__table th {
  background-color: #898a8a;
  color: #fff;
}
.modal-information__table td {
  background-color: #f2f2f2;
}
@media screen and (min-width: 641px) {
  .modal-information__table th,
  .modal-information__table td {
    font-size: var(--pixel14);
    padding: var(--pixel10);
  }
}
@media screen and (max-width: 640px) {
  .modal-information__table th,
  .modal-information__table td {
    font-size: var(--pixel12);
    padding: var(--pixel05);
  }
}

.modal-information__table--4col th,
.modal-information__table--4col td {
  width: 25%;
}