/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 07 2026 | 11:49:55 */
@charset "UTF-8";

:root {
  --text: #333333;

  --header: #45a1b1;
  --header-text: #ffffff;

  --row-a: #ffffff;
  --row-b: #eaf7fb;

  --price: #ff5e7a;

  --scroll-track: #efe7cf;
  --scroll-thumb: #8e8e8e;
}


/* =========================================
   基本設定
========================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;

  font-family: "Noto Sans JP", sans-serif;
  color: var(--text);

  background: #ffffff;
}


/* =========================================
   スクロールエリア
========================================= */

.price-table-scroll {
  width: 100%;

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: auto;
}


/* Chrome / Safari */

.price-table-scroll::-webkit-scrollbar {
  height: 8px;
}

.price-table-scroll::-webkit-scrollbar-track {
  background: var(--scroll-track);
}

.price-table-scroll::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
}


/* =========================================
   テーブル
========================================= */

.price-table {
  width: 100%;
  min-width: 980px;

  table-layout: fixed;

  border-collapse: separate !important;
  border-spacing: 0 !important;

  font-family: "Noto Sans JP", sans-serif;

  /* セル間の色 */
  background: #FFF8DD !important;
}


/* =========================================
   PC カラム幅
========================================= */

.col-plan {
  width: 22%;
}

.col-price {
  width: 15%;
}

.col-detail {
  width: 50%;
}

.col-period {
  width: 13%;
}


/* =========================================
   セルとセルの隙間
========================================= */

.price-table th,
.price-table td {
  vertical-align: middle;
  text-align: center;

  /* テーマ側のborderをリセット */
  border-top: 0 !important;
  border-left: 0 !important;

  /* セル間の色 */
  border-right: 6px solid #FFF8DD !important;
  border-bottom: 6px solid #FFF8DD !important;
}


/* 左端 */

.price-table tr > *:first-child {
  border-left: 6px solid #FFF8DD !important;
}


/* 上端 */

.price-table thead tr:first-child > * {
  border-top: 6px solid #FFF8DD !important;
}


/* =========================================
   ヘッダー
========================================= */

.price-table thead th {
  background: var(--header) !important;
  color: var(--header-text);

  padding: 16px 14px;

  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
}


/* =========================================
   本文セル
========================================= */

.price-table tbody th,
.price-table tbody td {
  padding: 18px 20px;

  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}


/* =========================================
   交互背景
========================================= */

/* 白 */

.price-table tbody tr:nth-child(odd) th,
.price-table tbody tr:nth-child(odd) td {
  background: var(--row-a) !important;
}


/* 水色 */

.price-table tbody tr:nth-child(even) th,
.price-table tbody tr:nth-child(even) td {
  background: var(--row-b) !important;
}


/* =========================================
   プラン列
========================================= */

.price-table tbody th {
  font-weight: 500;
}


/* =========================================
   価格列
========================================= */

.price-cell {
  white-space: nowrap;
}

.price-em {
  color: var(--price);

  font-size: 25px;
  font-weight: 500;
  line-height: 1;
}

.price-unit {
  color: var(--text);

  font-size: 18px;
  font-weight: 600;
}


/* =========================================
   内容列
========================================= */

.price-table tbody td:nth-child(3) {
  font-weight: 500;
}


/* =========================================
   期間列
========================================= */

.price-table tbody td:last-child {
  white-space: nowrap;
  font-weight: 500;
}


/* =========================================
   スマホ
========================================= */

@media (max-width: 767px) {

  .price-table-scroll {
    padding-bottom: 9px;
  }


  /* =====================================
     横スクロール量を減らす
  ===================================== */

  .price-table {
    width: 720px;
    min-width: 720px;
  }


  /* カラム幅 */

  .col-plan {
    width: 145px;
  }

  .col-price {
    width: 105px;
  }

  .col-detail {
    width: 360px;
  }

  .col-period {
    width: 110px;
  }


  /* =====================================
     セル間
  ===================================== */

  .price-table th,
  .price-table td {
    border-right: 4px solid #FFF8DD !important;
    border-bottom: 4px solid #FFF8DD !important;
  }


  /* 左端 */

  .price-table tr > *:first-child {
    border-left: 4px solid #FFF8DD !important;
  }


  /* 上端 */

  .price-table thead tr:first-child > * {
    border-top: 4px solid #FFF8DD !important;
  }


  /* =====================================
     ヘッダー
  ===================================== */

  .price-table thead th {
    padding: 9px 3px;

    font-size: 12px;
    line-height: 1.35;
  }


  /* =====================================
     本文
  ===================================== */

  .price-table tbody th,
  .price-table tbody td {
    /* 左右余白をできるだけ削減 */
    padding: 10px 3px;

    font-size: 11px;
    line-height: 1.42;
  }


  .price-table tbody th {
    font-weight: 700;
  }


  /* =====================================
     価格列
  ===================================== */

  .price-cell {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .price-em {
    font-size: 16px;
  }

  .price-unit {
    font-size: 10px;
  }


  /* =====================================
     内容列
  ===================================== */

  .price-table tbody td:nth-child(3) {
    padding-left: 6px;
    padding-right: 6px;
  }


  /* =====================================
     期間列
  ===================================== */

  .price-table tbody td:last-child {
    padding-left: 3px;
    padding-right: 3px;
  }

}