@charset "UTF-8";
/* ブレイクポイント
   ========================================================================== */
/* フォント
   ========================================================================== */
/* 色
   ========================================================================== */
/* モーダル設定
   ========================================================================== */
/* モーダル
   ====================================== */
/* モーダル全体（背景） */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none; }
  .modal.active {
    opacity: 1;
    pointer-events: auto; }
    .modal.active .modal-box {
      opacity: 1; }

/* モーダル全体の白背景枠 */
.modal-box {
  display: flex;
  flex-direction: column;
  /* 中身を縦積みにする */
  background: #fff;
  /* 白背景 */
  padding: 20px;
  width: 90%;
  max-width: 600px;
  height: 50%;
  max-height: 80%;
  opacity: 0;
  transition: opacity .3s ease; }
  .modal-box .modal-inner {
    /* 中身部分だけスクロール */
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
    /* スクロールバー分の余裕 */ }
  .modal-box .modal-close {
    /* 閉じるボタンは枠の中の下側に固定 */
    appearance: none !important;
    background-color: #fff;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: #000 !important;
    line-height: 1;
    margin-top: 2em;
    align-self: center;
    /* 中央寄せ */
    border: 1px solid #000;
    padding: .5em 1.5em;
    cursor: pointer;
    transition: .3s; }
    @media (hover: hover) {
      .modal-box .modal-close:hover {
        opacity: .5; } }
  @media (min-width: 768px) {
    .modal-box {
      width: 500px;
      height: 500px;
      padding: 30px; } }
  @media (min-width: 1025px) {
    .modal-box {
      width: 600px;
      height: 550px;
      padding: 30px; } }

/* テニスプレミアムベース
   ========================================================================== */
.modal-base .base__ttl {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: bold;
  line-height: 1.6; }
  .modal-base .base__ttl span {
    display: block;
    font-size: 66%;
    font-weight: normal;
    line-height: 1;
    padding-top: .25em; }
.modal-base .base__table th,
.modal-base .base__table td {
  font-size: 1.4rem; }
.modal-base .base .base-ingredients__ttl,
.modal-base .base .base-nutrition-facts__ttl {
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1; }
.modal-base .base .base-ingredients__list li,
.modal-base .base .base-nutrition-facts__list li {
  font-size: 1.4rem; }
@media (min-width: 768px) {
  .modal-base .base__box {
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    margin: 0; }
  .modal-base .base__table {
    display: block; }
    .modal-base .base__table th,
    .modal-base .base__table td {
      display: block;
      font-size: 1.6rem;
      text-align: left;
      padding: 0; }
    .modal-base .base__table th {
      white-space: normal;
      margin-top: 2em;
      padding-right: 0; }
    .modal-base .base__table td {
      padding-top: .25em; } }
@media (min-width: 768px) and (min-width: 768px) {
  .modal-base .base .base-ingredients,
  .modal-base .base .base-nutrition-facts {
    width: 100%;
    margin-top: 40px; }
    .modal-base .base .base-ingredients__list li,
    .modal-base .base .base-nutrition-facts__list li {
      font-size: 1.6rem; } }

@media (min-width: 1025px) {
  .modal-base .base__table th,
  .modal-base .base__table td {
    font-size: 1.8rem; } }
@media (min-width: 1025px) and (min-width: 1025px) {
  .modal-base .base .base-ingredients__list li,
  .modal-base .base .base-nutrition-facts__list li {
    font-size: 1.8rem; } }

/* 強化オプション
   ========================================================================== */
/* アイコンリンク
   ====================================== */
.topping-options {
  margin-bottom: 10em; }
  .topping-options__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; }
    .topping-options__list li {
      flex: 1 1 calc((100% - 40px) / 3);
      text-align: center; }
      .topping-options__list li a {
        text-align: center; }
        .topping-options__list li a img {
          margin: 0 auto;
          transition: .3s; }
          @media (hover: hover) {
            .topping-options__list li a img:hover {
              opacity: .6; } }
        .topping-options__list li a span {
          display: block;
          font-size: 1.2rem;
          text-align: center;
          line-height: 1.4;
          margin-top: .5em; }
  @media (min-width: 768px) {
    .topping-options__list {
      gap: 30px; }
      .topping-options__list li {
        flex: 1 1 calc((100% - 60px) / 3); }
        .topping-options__list li a span {
          font-size: 1.4rem;
          line-height: 1.6; } }
  @media (min-width: 1025px) {
    .topping-options__list {
      gap: 30px; }
      .topping-options__list li {
        flex: 1 1 calc((100% - 60px) / 3); }
        .topping-options__list li a img {
          max-width: 140px; }
        .topping-options__list li a span {
          font-size: 1.6rem;
          line-height: 1.7; } }

/* 詳細
   ====================================== */
.topping-detail,
.ingredients-detail {
  font-size: 1.4rem; }
  .topping-detail > ul > li,
  .ingredients-detail > ul > li {
    padding-top: 2em;
    border-top: 1px solid #ccc; }
  .topping-detail article,
  .ingredients-detail article {
    margin-bottom: 10em; }
  .topping-detail__ttl,
  .ingredients-detail__ttl {
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: bold;
    line-height: 1.6;
    padding-bottom: .5em; }
    .topping-detail__ttl span,
    .ingredients-detail__ttl span {
      display: block;
      font-size: 66%;
      font-weight: normal; }
  .topping-detail__lead .catch,
  .ingredients-detail__lead .catch {
    display: block;
    font-weight: bold; }
  .topping-detail section,
  .ingredients-detail section {
    margin-top: clamp(1.5em, 3vw, 2em); }
    .topping-detail section p,
    .topping-detail section ul,
    .ingredients-detail section p,
    .ingredients-detail section ul {
      padding-top: .5em; }
    .topping-detail section .disc li,
    .ingredients-detail section .disc li {
      margin-bottom: 0; }
      .topping-detail section .disc li::before,
      .ingredients-detail section .disc li::before {
        top: 12px;
        left: 2px;
        width: 3px;
        height: 3px; }
  .topping-detail__label,
  .ingredients-detail__label {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: bold; }
  @media (min-width: 768px) {
    .topping-detail,
    .ingredients-detail {
      font-size: 1.6rem; }
      .topping-detail section .disc li::before,
      .ingredients-detail section .disc li::before {
        top: 14px;
        left: 3px;
        width: 4px;
        height: 4px; } }
  @media (min-width: 1025px) {
    .topping-detail,
    .ingredients-detail {
      font-size: 1.8rem; }
      .topping-detail section .disc li::before,
      .ingredients-detail section .disc li::before {
        top: 16px;
        left: 3px;
        width: 4px;
        height: 4px; } }