@charset "UTF-8";

/* =====
   Variables
   ===== */

/* 頻出カラー等は変数として設定しておく */
:root {
  --text-color-dark: #333;
  --bg-color-light: #F6F6F6;
  --text-color-light: #CCC;
  --bg-color-dark: #2D2D2D;
  --link-color: #0096E6;
  --accent-color: #A80000;
}

/* ~~~~~~~~~~~~~~~~~~~~
【アドバイス】
追加CSSクラス名の接頭辞は「ts-」とする。
本CSS内で、上記接頭辞がついていないクラスは
基本的にWordPressがデフォルトで吐き出すものとして扱うと良いかも
~~~~~~~~~~~~~~~~~~~~ */

/* ========================================
   ★共通
   ======================================== */
/* URL等の長い文字列を強制改行 */
* { /* ワイルドカード指定なので要注意か */
  overflow-wrap: break-word;
  word-break: normal;
}

/* ========================================
   ★ページ送り
   「ページ送り」ブロックに追加CSSクラス「ts-pagenav」を設定
   ======================================== */
.wp-block-query .ts-pagenav.wp-block-query-pagination {
  gap: 0.4em;
}
.ts-pagenav.wp-block-query-pagination .wp-block-query-pagination-numbers {
  gap: 0.2em;
  display: flex;
}
.ts-pagenav.wp-block-query-pagination .wp-block-query-pagination-next,
.ts-pagenav.wp-block-query-pagination .wp-block-comments-pagination .wp-block-query-pagination-next {
  padding: 11px 1em;
  margin: 0;
}
.ts-pagenav.wp-block-query-pagination .wp-block-query-pagination-previous,
.ts-pagenav.wp-block-query-pagination .wp-block-comments-pagination .wp-block-query-pagination-previous {
  padding: 11px 1em;
  margin: 0;
}

/* ========================================
   ★サイドナビ：
   「ナビゲーション」ブロックに追加CSSクラス「ts-sidenav」を設定
   ======================================== */
/* ナビゲーションの一番最初のリストの左右揃え調整（何もしないと中央揃えになってしまう時がある） */
.ts-sidenav>.wp-block-navigation-item__content,
.wp-block-navigation:where(:not(.is-vertical))>.wp-block-navigation__container>:where(li).ts-sidenav>.wp-block-navigation-item__content {
  text-align: left;
  background:  #EEE;
  font-weight: bold;
  border-top: 4px solid #E3E3E3;
}
/* ナビゲーションリストの背景色調整 */
.wp-block-navigation:where(:not(.is-vertical))>.wp-block-navigation__container>:where(li).ts-sidenav> ul li {
  background: #FDFDFD;
  color: #333;
  margin-top: 1px;
  border: none;
}

/* ========================================
   ★SnowMonkeyForms（フォーム）のCSS調整
   ======================================== */
.smf-item { /* 各項目ラッパー */
  display: flex;
  border-top: 1px dotted rgba(0,0,0,0.2);
  padding-top: 1em;
}
.smf-item + .smf-item {
  margin-top: 1em;
}
.smf-item .smf-item__col--label { /* ラベル部分ラッパー */
  width: 16em;
  padding-right: 1em;
  padding-left: 1em;
}
.smf-item .smf-item__col--label .smf-item__description { /* ラベル付属説明（必須表示に使用） */
  margin: 0;
  color: var(--accent-color);
}
.smf-item .smf-item__col--controls { /* 入力部分ラッパー */
  width: calc(100% - 18em);
}
.smf-action  {
  border-top: 2px dotted rgba(0,0,0,0.2);
  margin-top: 2em;
  padding-top: 2em;
  display: flex;
  justify-content: center;
  gap: 2em;
}
@media screen and (max-width: 640px) { /* ディスプレイ幅640px以下の時 */
  .smf-item { /* 各項目ラッパー */
    flex-direction: column;
  }
  .smf-item .smf-item__col--label { /* ラベル部分ラッパー */
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .smf-item .smf-item__col--controls { /* 入力部分ラッパー */
    width: 100%;
    margin-top: 0.5em;
    padding-left: 1em;
  }
}

/* ========================================
   ★ユーティリティ：リストの追加スタイル
   リストのミニカード横並びスタイル
   箇条書きリストブロックに独自クラス「ts-cardlist」を追加
   VK-ExUnitと合わせて使うと、アイコンを変更できる
   ======================================== */
.wp-block-list.ts-cardlist,
.wp-block-list.is-style-default.ts-cardlist,
.wp-block-list.is-style-vk-arrow-mark.ts-cardlist,
.wp-block-list.is-style-vk-triangle-mark.ts-cardlist,
.wp-block-list.is-style-vk-check-mark.ts-cardlist,
.wp-block-list.is-style-vk-check-square-mark.ts-cardlist,
.wp-block-list.is-style-vk-check-circle-mark.ts-cardlist,
.wp-block-list.is-style-vk-handpoint-mark.ts-cardlist,
.wp-block-list.is-style-vk-pencil-mark.ts-cardlist,
.wp-block-list.is-style-vk-smile-mark.ts-cardlist,
.wp-block-list.is-style-vk-frown-mark.ts-cardlist,
.wp-block-list.is-style-vk-circle-mark.ts-cardlist,
.wp-block-list.is-style-vk-times-mark.ts-cardlist,
.wp-block-list.is-style-vk-numbered-circle-mark.ts-cardlist,
.wp-block-list.is-style-vk-numbered-square-mark.ts-cardlist {
  display: grid;
  /* 最小180pxで、入りきらなくなると自動で折り返す */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6em;
  padding-left: 0;
}
.wp-block-list.ts-cardlist li,
.wp-block-list.is-style-default.ts-cardlist li {
  padding: 0.8em;
  margin: 0;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 4px;
  list-style: none;
}
.wp-block-list.is-style-vk-arrow-mark.ts-cardlist li,
.wp-block-list.is-style-vk-triangle-mark.ts-cardlist li,
.wp-block-list.is-style-vk-check-mark.ts-cardlist li,
.wp-block-list.is-style-vk-check-square-mark.ts-cardlist li,
.wp-block-list.is-style-vk-check-circle-mark.ts-cardlist li,
.wp-block-list.is-style-vk-handpoint-mark.ts-cardlist li,
.wp-block-list.is-style-vk-pencil-mark.ts-cardlist li,
.wp-block-list.is-style-vk-smile-mark.ts-cardlist li,
.wp-block-list.is-style-vk-frown-mark.ts-cardlist li,
.wp-block-list.is-style-vk-circle-mark.ts-cardlist li,
.wp-block-list.is-style-vk-times-mark.ts-cardlist li,
.wp-block-list.is-style-vk-numbered-circle-mark.ts-cardlist li,
.wp-block-list.is-style-vk-numbered-square-mark.ts-cardlist li {
  padding: 0.8em 0.8em 0.8em 2.4em;
  margin: 0;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 4px;
}
.wp-block-list.is-style-vk-arrow-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-triangle-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-check-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-check-square-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-check-circle-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-handpoint-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-pencil-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-smile-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-frown-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-circle-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-times-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-numbered-circle-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-numbered-square-mark.ts-cardlist li::before {
  left: 0.8em;
}
.wp-block-list.is-style-vk-numbered-circle-mark.ts-cardlist li::before,
.wp-block-list.is-style-vk-numbered-square-mark.ts-cardlist li::before {
  left: 0.5em;
  top: 0.8em;
  margin: 0;
  padding: 0;
  display: block;
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
}