@charset "UTF-8";

/************************************
** !! 記事・管理画面用のスタイルのみを記載 !!
************************************/

/*必要ならばここにコードを書く*/
/* 記事コンテンツ・カテゴリ一覧等共通ラッパー レイアウト初期化 */
#main.main {
  min-width: 780px;
  position: relative;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 780px) {
  #main.main {
    min-width: 100%;
  }
}

.article {
  margin-bottom: 0 !important;
}

/* リンクのデフォルトスタイル */
.article a {
  color: #00b54d;
}

/* マーカーのデフォルトスタイル */
.marker,
.marker-under,
.marker-red,
.marker-under-red,
.marker-blue,
.marker-under-blue {
  font-weight: bold;
}

/* 黄色マーカーの個別設定 */
.marker {
  background-color: #ffef89 !important;
}

/* 黄色マーカー(下線)の個別設定 */
.marker-under {
  background: linear-gradient(to bottom, transparent calc(100% - 8px), #ffef89 calc(100% - 8px)) !important;
  padding-bottom: 4px;
  background-position: bottom;
}

/* 赤色マーカー(下線)の個別設定 */
.marker-under-red {
  background: linear-gradient(to bottom, transparent calc(100% - 8px), #ffd0d1 calc(100% - 8px)) !important;
  padding-bottom: 4px;
  background-position: bottom;
}

/* 青色マーカー(下線)の個別設定 */
.marker-under-blue {
  background: linear-gradient(to bottom, transparent calc(100% - 8px), #a8dafb calc(100% - 8px)) !important;
  padding-bottom: 4px;
  background-position: bottom;
}

/* spanで追加した4px分の余白を削除 */
/* NOTE: 既存のmarginを踏襲 */
p.marker-under-parent,
p.marker-under-red-parent,
p.marker-under-blue-parent {
  margin-bottom: calc(1.8em - 4px) !important;
}

/* ツールバーの各アンダーラインの調整 */
.components-dropdown-menu__menu-item > .marker-under {
  padding: 0;
  background: linear-gradient(to bottom, transparent 12px, #ffef89 12px, #ffef89 20px, transparent 20px) !important;
}
.components-dropdown-menu__menu-item > .marker-under-red {
  padding: 0;
  background: linear-gradient(to bottom, transparent 12px, #ffd0d1 12px, #ffd0d1 20px, transparent 20px) !important;
}
.components-dropdown-menu__menu-item > .marker-under-blue {
  padding: 0;
  background: linear-gradient(to bottom, transparent 12px, #a8dafb 12px, #a8dafb 20px, transparent 20px) !important;
}

/* 記事画面個別 ラッパーレイアウト設定 */
.index-main-article {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 16px 40px 16px;
}

/* デフォルトリンクスタイル: Start */
.link-button a {
  display: inline-block;
  color: #00b54d;
  border-radius: 50px;
  border: 2px solid #00b54d;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: bold;
}

.link-button.disabled a {
  background: #ebebeb;
  color: #bbb;
  border: 2px solid #ddd;
  pointer-events: none;
}

.link-button a:hover {
  transition: none;
  background-color: #00b54d1a;
  color: #00b54d;
}

/* デフォルトリンクスタイル: End */

/* デフォルトリストスタイル: Start */
/* ==== 中黒リスト ==== */
/* 中黒のスタイル */
ul.wp-block-list li::marker {
  color: #bbbbbb;
}

/* リストコンテンツ */
ul.wp-block-list li {
  padding: 8px 0px;
  border-bottom: 1px dashed #bbbbbb;
}

/* ==== 番号リスト ==== */
/* 番号リストのデフォルト設定 */
ol.wp-block-list {
  list-style: none;
  padding-left: 40px;
}

/* 番号リストコンテンツ */
ol.wp-block-list li {
  position: relative;
  min-height: 26px;
  padding: 8px 0px;
  border-bottom: 1px dashed #bbbbbb;
}

/* 番号と円形背景 */
ol.wp-block-list li::before {
  content: counter(list-item);
  line-height: 20px;
  position: absolute;
  left: -30px;
  top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #bbbbbb;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

ol.wp-block-list li:nth-child(n+10)::before {
  font-size: 0.7em !important;
}

/* 共通：最後のリストアイテムの下の破線を非表示にする */
ul.wp-block-list li:last-child,
ol.wp-block-list li:last-child {
  border-bottom: none;
}

.article h1.wp-block-heading {
  font-size: 26px;
  line-height: 1.6;
}

/* H2のデフォルトスタイル */
.article h2.wp-block-heading {
  background-color: #ffffff;
  border-top: 4px solid #FFB07C;
  border-bottom: 4px solid #FFB07C;
  font-size: 24px;
  padding: 15px 0px;
  line-height: 1.6;
}

/* H3のデフォルトスタイル */
.article h3.wp-block-heading {
  border: none;
  border-left: 9px double #ffb07c;
  padding: 0px 20px;
  font-size: 22px;
  padding-left: 12px;
  line-height: 1.6;
}

/* H4のデフォルトスタイル */
.article h4.wp-block-heading {
  position: relative;
  border: none;
  font-size: 20px;
  padding-left: 21px;
  line-height: 1.6;
  /* 9px(点) + 12px(間隔) */
}

/* H4見出し 点のスタイル */
.article h4.wp-block-heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  background-color: #ffb07c;
}

/* =================== */
/* 一覧画面用CSS：Start */

.index-main {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 16px;
}

.related-posts-title,
.pickup-posts-title {
  font-size: 24px;
  margin: 0;
  margin-bottom: 24px;
}

.header .archive-title {
  font-size: 24px;
  margin: 0;
}

.header .archive-title--sufix {
  font-size: 16px;
}

/* カテゴリページ カテゴリ説明 */
.header .subtext {
  background: #f4f4f4;
  border-radius: 8px;
  margin-top: 24px;
  padding: 16px;
}

.articles .cat-label,
.related-posts .cat-label,
.pickup-posts .cat-label,
.entry-categories .category-link {
  position: relative;
  border-radius: 4px;
  border: 1px solid #a3ebab;
  background-color: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  color: #49cc69;
  padding: 2px 4px;
  width: fit-content;
  font-family:
    Noto Sans JP,
    sans-serif;
}

/* タグ記事コンテンツ 上部 */
.category-content-header {
  padding-bottom: 24px;
  margin-bottom: 40px;
  border-bottom: 1px solid #D9D9D9;
}

/* タグ記事コンテンツ 下部 */
.category-content-footer {
  border-top: 1px solid #D9D9D9;
  margin-top: 40px;
  padding-top: 40px;
}

.articles {
  display: flex;
  flex-wrap: wrap;
  padding: 40px 0;
}

.articles .entry-card-title,
.related-posts .entry-card-title,
.pickup-posts .entry-card-title {
  /*　記事タイトル */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* 3行で省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* article h2 を無効化する */
.unset-article-h2 {
  margin: 0 0 0.4em 0 !important;
  font-size: 18px !important;
  padding: unset !important;
  background-color: unset !important;
  border-radius: unset !important;
  line-height: 1.6 !important;
  font-weight: bold !important;
}

.articles .entry-card-wrap {
  width: 50%;
  padding-left: 0;
}

.articles .entry-card-thumb {
  width: 160px;
  margin-right: 8px;
  height: 90px;
}

.articles .e-card-title {
  font-size: 16px !important;
}

/* カテゴリリンク用スタイル */
.entry-categories .category-link {
  text-decoration: none;
  margin: 0 5px 8px 0;
  display: inline-block;
  word-break: break-all;
}

.entry-categories .category-link :last-child {
  margin-right: 0px;
}

.entry-categories .category-link:hover,
a.cat-label:hover {
  color: #FFFFFF;
  background: #49CC69;
}

/* 記事カードレイアウト */
.entry-card-thumb-image {
  border-radius: 8px;
}

@media screen and (max-width: 780px) {
  .entry-card-thumb-image {
    border-radius: 4px;
  }
}

/* 記事カード全体リンク制御 */
.entry-card-outer {
  position: relative;
}

.entry-card-outer .entry-card {
  position: relative;
}

.entry-card-hit-area {
  /* オーバーレイ（記事全体リンク） */
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  text-decoration: none;
}

.entry-card-outer .entry-card-thumb,
.entry-card-outer .entry-card-title {
  /* 画像とタイトルはクリックを記事リンクへ渡す */
  pointer-events: none;
}

/* unset-article-h2 でline-heightを指定しているため!importantでオーバーライドしている */
.entry-card-title {
  line-height: 25.6px !important;
}

.entry-card-outer .cat-label {
  /* カテゴリバッジは最前面で独立クリック */
  position: relative;
  z-index: 10;
  pointer-events: auto;
  text-decoration: none;
}

.articles .entry-card-wrap {
  width: 50%;
  padding-left: 0;
  cursor: pointer;
}

.entry-card-wrap:hover {
  /* 記事カードホバー時のスタイル */
  opacity: 0.8 !important;
  background: inherit !important;
}

.articles .entry-card-thumb {
  width: 160px;
  margin-right: 8px;
  height: 90px;
}

.articles .e-card-title {
  font-size: 16px !important;
}

/* カテゴリリンク用スタイル Start */
.entry-categories .category-link {
  text-decoration: none;
  margin: 0 5px 8px 0;
  display: inline-block;
  word-break: break-all;
}

.entry-categories .category-link :last-child {
  margin-right: 0px;
}

@media screen and (max-width: 780px) {
  /* スマホサイズの場合のみ 先頭の記事を幅いっぱい表示 */
  /* PCレイアウトのheight指定を初期化 */
  .articles .entry-card-thumb {
    height: auto;
  }
  .articles .entry-card-wrap {
    width: 100%;
    padding-left: 0;
    padding: 12px 0;
  }

  .articles .entry-card-wrap:first-child {
    padding: 12px 0;
  }

  .articles .entry-card-wrap:first-child article {
    display: flex;
    flex-direction: column;
  }

  .articles .entry-card-wrap:first-child .entry-card-thumb {
    width: 100%;
  }

  .articles .entry-card-wrap:first-child .card-title {
    font-size: 18px !important;
  }

  .articles .entry-card-wrap:not(:first-child) .entry-card-thumb {
    width: 140px;
    height: 78px;
  }
}

/* ページネーション */
.pagination {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.pagination-count {
  font-weight: bold;
  font-size: 14px;
}

.pagination-count--emphasis {
  color: #ff8331;
}

.pagination-container {
  display: flex;
  margin: 0 auto;
}

.pagination-container .link-button a {
  width: 81px;
}

.pagination-page-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 20px;
}

.pagination-pages {
  margin: 0 100px;
  font-weight: bold;
  width: 100px;
}

@media screen and (max-width: 780px) {
  .pagination-pages {
    margin: 0;
  }

  .pagination-container {
    justify-content: space-between;
    width: 100%;
  }
}

.top-link {
  padding-top: 40px;
  text-align: center;
}

.top-link .link-button a {
  width: 300px;
  margin: 0 auto;
}

@media screen and (max-width: 780px) {
  .top-link .link-button a {
    width: 100%;
  }
}

.search-container {
  display: flex;
}

.search-container .search-input {
  border: 1px solid #ddd;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.search-container .search-button {
  background: linear-gradient(90deg, #00b54d 0%, #49cc69 100%);
  color: white;
  padding: 12px 24px;
  width: 81px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: none;
  font-size: 16px;
  white-space: nowrap;
  cursor: pointer;
}

.search-container .search-button:hover {
  opacity: 0.9;
}

/************************************
** 関連記事個別設定
************************************/
.related-posts {
  /* 関連記事エリア親 */
  display: flex;
  flex-wrap: wrap;
  padding-top: 0px;
}

.related-posts ul {
  /* カードの配列をgridで2列にする*/
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
  width: 100%;
}

.related-posts li {
  width: 100%;
  list-style: none;
}

.related-posts ul li {
  margin: 0 !important;
}

.related-posts ul {
  gap: 24px 24px;
}

.related-posts ul li .entry-card-thumb {
  margin: 0 0 8px 0 !important;
}

.related-posts .entry-card-wrap {
  width: 100%;
  padding: 0 !important
}

.related-posts .entry-card {
  /* 関連記事コンテンツ （画像＋（タイトル＋カテゴリタグ））配置 */
  display: flex;
  flex-direction: column;
}

.related-posts .card-content {
  /* 関連記事コンテンツ （タイトル＋カテゴリタグ）配置 */
  display: inline-flex;
  flex-direction: column;
}

.related-posts .entry-card-thumb {
  width: 100%;
}

.related-posts-list-area {
  padding-top: 40px;
}

@media screen and (max-width: 780px) {

  /* スマホサイズの場合の関連記事スタイル */
  .related-posts ul {
    /* カードの配列を1列にする*/
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .related-posts ul li {
    padding: 0;
  }

  .related-posts ul li .entry-card-thumb {
    margin: 0 8px 0 0 !important;
  }

  .related-posts .entry-card-wrap {
    width: 100%;
    padding-left: 0;
    padding: 12px 0;
  }

  .related-posts .entry-card {
    display: flex;
    flex-direction: unset;
  }

  .related-posts .card-content {
    display: block;
    flex-direction: unset;
  }

  .related-posts .entry-card-thumb {
    /* 関連記事サムネイル */
    width: 140px;
    flex-shrink: 0;
    margin-right: 8px;
  }

  .related-posts .e-card-title {
    font-size: 16px !important;
  }
}

/************************************
** SNSシェアボタン
************************************/
/* シェアメッセージの追加スタイル */
.add-style-sns-share-message {
  font-size: 18px;
  font-weight: bold;
  text-align: start;
  margin-bottom: 24px;
  line-height: 28px;
  text-align: left !important;
  margin-bottom: 0 !important;
  padding-bottom: 24px !important;
}

.sns-share.ss-col-2 .sns-buttons {
  column-gap: 8px !important;
}

/*シェア・フォローボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons,
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
  justify-content: left;
  flex-wrap: wrap;
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
  width: 40px;
  height: 40px;
  margin-right: 4px;
  margin-left: 4px;
  border-radius: 50%;
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
  font-size: 28px;
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
  display: none;
}

/* SNSボタンのマージン調整 */
.unset-sns-buttons {
  margin-top: unset !important;
  margin-bottom: unset !important;
}

.date-tags {
  text-align: left;
}

/* ==================== */
/* デフォルト目次スタイル */
/* ==================== */
/* 目次コンテナ */
.toc {
  margin: 40px 0;
  padding: 12px 16px;
  width: 100%;
  height: 52px;
  border: 1px solid #dddddd;
  border-radius: 8px;
}

/* タイトル「目次」スタイル  */
.toc .toc-title {
  font-size: 18px;
  font-weight: bold;
  position: relative;
  padding: 0;
  text-align: left;
}

/* 目次 閉じている場合 */
.toc-title::after {
  content: '＋' !important;
  margin-left: 8px;
  font-size: 18px;
  vertical-align: middle;
  transition: content 0.2s;
  position: absolute;
  right: 0;
  color: #49cc69;
  text-decoration: none !important;
  line-height: 100%;
  top: calc(50% - 7px);
}

/* 目次 開いている場合 */
.toc-checkbox:checked+.toc-title::after {
  content: '－' !important;
  text-decoration: none !important;
  line-height: 100%;
  top: calc(50% - 7px);
}

/* 目次-中黒スタイル */
.toc-list li::marker {
  color: #bbbbbb;
}

/* 見出しリンクのスタイル */
.toc-list li a {
  font-family: 'Noto Sans JP', sans-serif;
  text-decoration: underline;
}

/* 「閉じる」文言を非表示 */
.toc-close {
  display: none !important;
}

/* ********************************* */
/* Flexible Table Blockのスタイル修正 */
/* ********************************* */
/* 列固定+セル結合の表示崩れ対策 */
/* 1列(行)目のTH要素 */
.wp-block-flexible-table-block-table th:first-child {
  z-index: 10 !important;
}

/* 結合されている1列目のTD要素 */
.wp-block-flexible-table-block-table td[rowspan]:first-child {
  z-index: 5 !important;
}

/* テーブルの角丸設定（ヘッダ 左上） */
.wp-block-flexible-table-block-table thead tr th:first-child,
.wp-block-flexible-table-block-table thead tr td:first-child {
  border-top-left-radius: 8px;
}

/* テーブルの角丸設定（ヘッダ 右上） */
.wp-block-flexible-table-block-table thead tr th:last-child,
.wp-block-flexible-table-block-table thead tr td:last-child {
  border-top-right-radius: 8px;
}

/* テーブルの角丸設定（テーブル 左下） */
.wp-block-flexible-table-block-table tbody tr:last-child th:first-child,
.wp-block-flexible-table-block-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

/* テーブルの角丸設定（テーブル 右下） */
.wp-block-flexible-table-block-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* セルの境界線を統一(下罫線) */
.wp-block-flexible-table-block-table thead tr th,
.wp-block-flexible-table-block-table thead tr td,
.wp-block-flexible-table-block-table tbody tr:not(:last-child) th,
.wp-block-flexible-table-block-table tbody tr:not(:last-child) td {
  border-bottom: none !important;
}

/* セルの境界線を統一(右罫線) */
.wp-block-flexible-table-block-table thead tr th:not(:last-child),
.wp-block-flexible-table-block-table thead tr td:not(:last-child),
.wp-block-flexible-table-block-table tbody tr th,
.wp-block-flexible-table-block-table tbody tr td:not(:last-child) {
  border-right: none !important;
}

/* スケジュール表 見出し文字詰め */
.wp-block-flexible-table-block-table thead tr th,
.wp-block-flexible-table-block-table thead tr td {
  letter-spacing: 0.03em;
}

/************************************/
/* 更新日(記事情報)のスタイル         */
/************************************/
/* アイコン */
.post-date .fa,
.post-update .fa {
  display: none;
}

/* 更新日テキスト */
.post-date::before,
.post-update::before {
  content: '更新日';
}

/************************************/
/* 埋め込みブログカードのスタイル      */
/************************************/
.blogcard {
  border: none;
  padding: 0;
}

.wp-block-embed__wrapper .blogcard-wrap {
  width: 100%;
}

.blogcard .blogcard-content .blogcard-title {
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* 3行で省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blogcard .blogcard-content .blogcard-snippet,
.blogcard .blogcard-footer {
  display: none !important;
}

/************************************/
/* パンくず
/************************************/
.breadcrumb-nav {
  display: flex;
  align-items: center;
}

.breadcrumb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.breadcrumb-name-a {
  color: #00b54d;
  font-weight: 400;
  font-size: 12px;
  text-decoration: underline;
}

.breadcrumb-name-a:hover {
  color: #00b54d;
}

.breadcrumb-name-span {
  font-weight: 400;
  font-size: 12px;
}

.breadcrumb-separator {
  margin-left: 5px;
  margin-right: 5px;
}

/****************************************************************/
/* 記事編集画面 ブロックツールバーのフォントサイズ表記 + サイズ指定 */
/* NOTE：記事のデフォルトフォントサイズはCocoon設定で16pxに指定 */
/****************************************************************/
/* 使用しないフォントサイズを非表示 */
.components-dropdown-menu__menu .components-button:has(.fz-18px),
.components-dropdown-menu__menu .components-button:has(.fz-20px),
.components-dropdown-menu__menu .components-button:has(.fz-22px),
.components-dropdown-menu__menu .components-button:has(.fz-24px),
.components-dropdown-menu__menu .components-button:has(.fz-28px),
.components-dropdown-menu__menu .components-button:has(.fz-32px),
.components-dropdown-menu__menu .components-button:has(.fz-36px),
.components-dropdown-menu__menu .components-button:has(.fz-40px),
.components-dropdown-menu__menu .components-button:has(.fz-44px),
.components-dropdown-menu__menu .components-button:has(.fz-48px) {
  display: none !important;
}

/* フォントサイズ小 設定 */
.components-dropdown-menu__menu .components-button:has(.fz-12px) .fz-12px {
  font-size: 0;
}

.components-dropdown-menu__menu .components-button:has(.fz-12px) .fz-12px::before {
  content: "フォントサイズ小";
  font-size: 12px;
}

/* フォントサイズ中 設定 */
.components-dropdown-menu__menu .components-button:has(.fz-14px) .fz-14px {
  font-size: 0;
}

.components-dropdown-menu__menu .components-button:has(.fz-14px) .fz-14px::before {
  content: "フォントサイズ中";
  font-size: 14px;
}

/* フォントサイズ大 設定 */
.components-dropdown-menu__menu .components-button:has(.fz-16px) .fz-16px {
  font-size: 0;
}

.components-dropdown-menu__menu .components-button:has(.fz-16px) .fz-16px::before {
  content: "フォントサイズ大";
  font-size: 16px;
}

/************************************/
/* cocoon プロパティ変数定義
/************************************/
:root {
  --cocoon-twitter-color: #000000;
  --cocoon-mastodon-color: #6364FF;
  --cocoon-bluesky-color: #0085ff;
  --cocoon-misskey-color: #96d04a;
  --cocoon-facebook-color: #3b5998;
  --cocoon-hatebu-color: #2c6ebd;
  --cocoon-google-plus-color: #dd4b39;
  --cocoon-pocket-color: #ef4056;
  --cocoon-line-color: #00c300;
  --cocoon-linkedin-color: #0077b5;
  --cocoon-website-color: #002561;
  --cocoon-instagram-color: #405de6;
  --cocoon-pinterest-color: #bd081c;
  --cocoon-youtube-color: #cd201f;
  --cocoon-tiktok-color: #000000;
  --cocoon-note-color: #41c9b4;
  --cocoon-soundcloud-color: #ff8800;
  --cocoon-flickr-color: #111;
  --cocoon-amazon-color: #ff9900;
  --cocoon-twitch-color: #6441a4;
  --cocoon-rakuten-color: #bf0000;
  --cocoon-rakuten-room-color: #c61e79;
  --cocoon-slack-color: #e01563;
  --cocoon-github-color: #4078c0;
  --cocoon-codepen-color: #333;
  --cocoon-feedly-color: #2bb24c;
  --cocoon-rss-color: #f26522;
  --cocoon-copy-color: #333333;
  --cocoon-comment-color: #333333;
  --cocoon-red-color: #e60033;
  --cocoon-pink-color: #e95295;
  --cocoon-purple-color: #884898;
  --cocoon-deep-color: #55295b;
  --cocoon-indigo-color: #1e50a2;
  --cocoon-blue-color: #0095d9;
  --cocoon-light-blue-color: #2ca9e1;
  --cocoon-cyan-color: #00a3af;
  --cocoon-teal-color: #007b43;
  --cocoon-green-color: #3eb370;
  --cocoon-light-green-color: #8bc34a;
  --cocoon-lime-color: #c3d825;
  --cocoon-yellow-color: #ffd900;
  --cocoon-amber-color: #ffc107;
  --cocoon-orange-color: #f39800;
  --cocoon-deep-orange-color: #ea5506;
  --cocoon-brown-color: #954e2a;
  --cocoon-light-grey-color: #cccccc;
  --cocoon-grey-color: #949495;
  --cocoon-dark-grey-color: #666666;
  --cocoon-blue-gray-color: #607d8b;
  --cocoon-black-color: #333333;
  --cocoon-white-color: #ffffff;
  --cocoon-watery-blue-color: #f3fafe;
  --cocoon-watery-yellow-color: #fff7cc;
  --cocoon-watery-red-color: #fdf2f2;
  --cocoon-watery-green-color: #ebf8f4;
  --cocoon-custom-background-color: inherit;
  --cocoon-custom-text-color: inherit;
  --cocoon-custom-border-color: #ccc;
  --cocoon-default-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --cocoon-text-color: #333;
  --cocoon-pallid-text-color: #777;
  --cocoon-x-pallid-text-color: #999;
  --cocoon-default-text-size: 18px;
  --cocoon-text-size-s: 0.8em;
  --cocoon-basic-border-color: #ccc;
  --cocoon-three-d-border-colors: #e3e3e3 #cecece #b4b4b4 #d6d6d6;
  --cocoon-middle-thickness-color: #888;
  --cocoon-thin-color: #ddd;
  --cocoon-x-thin-color: #eee;
  --cocoon-xx-thin-color: #f5f6f7;
  --cocoon-xxx-thin-color: #fafbfc;
  --cocoon-current-background-color: #eee;
  --cocoon-select-background-color: #d8eaf2;
  --cocoon-tab-label-color: #f2f2f2;
  --cocoon-tab-label-active-color: #404453;
  --cocoon-basic-border-radius: 4px;
  --cocoon-badge-border-radius: 2px;
  --cocoon-middle-border-radius: 8px;
  --cocoon-box-padding: 1em 1.5em;
  --cocoon-list-padding: min(1%, 8px) min(2%, 16px) min(1%, 8px) min(3%, 24px);
  --cocoon-list-wide-padding: min(3%, 24px) min(5%, 40px) min(3%, 24px) min(7%, 56px);
  --cocoon-box-border-color: #47585c;
  --cocoon-sns-color: var(--cocoon-text-color);
  --card-ratio: 16/9;
}