:root {
  /* 変数のマッピング定義 */
  --xs: var(--space-2, 8px);
  --sm: var(--space-4, 16px);
  --md: var(--space-6, 24px);
  --lg: var(--space-8, 32px);
  --xl: var(--space-12, 48px);
  --xxl: var(--space-20, 80px);
}

/* ============================================================
   余白ユーティリティクラス（Padding / Margin）
   ============================================================ */

/* Size: xs */
.p-xs { padding: var(--xs) !important; }
.pt-xs { padding-top: var(--xs) !important; }
.pb-xs { padding-bottom: var(--xs) !important; }
.pl-xs { padding-left: var(--xs) !important; }
.pr-xs { padding-right: var(--xs) !important; }

.m-xs { margin: var(--xs) !important; }
.mt-xs { margin-top: var(--xs) !important; }
.mb-xs { margin-bottom: var(--xs) !important; }
.ml-xs { margin-left: var(--xs) !important; }
.mr-xs { margin-right: var(--xs) !important; }

/* Size: sm */
.p-sm { padding: var(--sm) !important; }
.pt-sm { padding-top: var(--sm) !important; }
.pb-sm { padding-bottom: var(--sm) !important; }
.pl-sm { padding-left: var(--sm) !important; }
.pr-sm { padding-right: var(--sm) !important; }

.m-sm { margin: var(--sm) !important; }
.mt-sm { margin-top: var(--sm) !important; }
.mb-sm { margin-bottom: var(--sm) !important; }
.ml-sm { margin-left: var(--sm) !important; }
.mr-sm { margin-right: var(--sm) !important; }

/* Size: md */
.p-md { padding: var(--md) !important; }
.pt-md { padding-top: var(--md) !important; }
.pb-md { padding-bottom: var(--md) !important; }
.pl-md { padding-left: var(--md) !important; }
.pr-md { padding-right: var(--md) !important; }

.m-md { margin: var(--md) !important; }
.mt-md { margin-top: var(--md) !important; }
.mb-md { margin-bottom: var(--md) !important; }
.ml-md { margin-left: var(--md) !important; }
.mr-md { margin-right: var(--md) !important; }

/* Size: lg */
.p-lg { padding: var(--lg) !important; }
.pt-lg { padding-top: var(--lg) !important; }
.pb-lg { padding-bottom: var(--lg) !important; }
.pl-lg { padding-left: var(--lg) !important; }
.pr-lg { padding-right: var(--lg) !important; }

.m-lg { margin: var(--lg) !important; }
.mt-lg { margin-top: var(--lg) !important; }
.mb-lg { margin-bottom: var(--lg) !important; }
.ml-lg { margin-left: var(--lg) !important; }
.mr-lg { margin-right: var(--lg) !important; }

/* Size: xl */
.p-xl { padding: var(--xl) !important; }
.pt-xl { padding-top: var(--xl) !important; }
.pb-xl { padding-bottom: var(--xl) !important; }
.pl-xl { padding-left: var(--xl) !important; }
.pr-xl { padding-right: var(--xl) !important; }

.m-xl { margin: var(--xl) !important; }
.mt-xl { margin-top: var(--xl) !important; }
.mb-xl { margin-bottom: var(--xl) !important; }
.ml-xl { margin-left: var(--xl) !important; }
.mr-xl { margin-right: var(--xl) !important; }

/* Size: xxl */
.p-xxl { padding: var(--xxl) !important; }
.pt-xxl { padding-top: var(--xxl) !important; }
.pb-xxl { padding-bottom: var(--xxl) !important; }
.pl-xxl { padding-left: var(--xxl) !important; }
.pr-xxl { padding-right: var(--xxl) !important; }

.m-xxl { margin: var(--xxl) !important; }
.mt-xxl { margin-top: var(--xxl) !important; }
.mb-xxl { margin-bottom: var(--xxl) !important; }
.ml-xxl { margin-left: var(--xxl) !important; }
.mr-xxl { margin-right: var(--xxl) !important; }

/* ============================================================
   セクション余白ユーティリティ（上下のみ）
   ============================================================ */
.section-xs { padding: var(--xs) 0px !important; }
.section-sm { padding: var(--sm) 0px !important; }
.section-md { padding: var(--md) 0px !important; }
.section-lg { padding: var(--lg) 0px !important; }
.section-xl { padding: var(--xl) 0px !important; }
.section-xxl { padding: var(--xxl) 0px !important; }

/* ============================================================
   背景色
   ============================================================ */
.bg-white{background-color:var(--color-white) !important;}
.bg-primary{background-color:var(--color-primary) !important;}
.bg-primary-dark{background-color:var(--color-primary-dark) !important;}
.bg-primary-light{background-color:var(--color-primary-light) !important;}
.bg-accent{background-color:var(--color-accent) !important;}
.bg-accent-light{background-color:var(--color-accent-light) !important;}
.bg-accent-dark{background-color:var(--color-accent-dark) !important;}
.bg-secondary{background-color:var(--color-bg-secondary) !important;}
.bg-tertiary{background-color:var(--color-bg-tertiary) !important;}
.bg-quaternary{background-color:var(--color-bg-quaternary) !important;}
.bg-quinary{background-color:var(--color-bg-quinary) !important;}

.display-desktop、
.display-desktop.display-tablet、
.display-desktop.display-tablet.display-mobile、
.display-desktop.display-mobile
{display: block; }

.display-tablet {display: none; }
.display-mobile {display: none; }

@media only screen and (max-width: 1027px) {
  .display-desktop{display: none;}
  .display-tablet、
  .display-tablet.display-mobile
  {display: block; }
}

@media only screen and (max-width: 767px) {
  .display-desktop.display-tablet {display: none; }
  .display-tablet {display: none; }
  .display-mobile {display: block; }
}

/* ============================================================
   テキスト色
   ============================================================ */
.c--text-primary{color:var(--color-text-primary) !important;}
.c--text-secondary{color:var(--color-text-secondary) !important;}
.c--text-muted{color:var(--color-text-muted) !important;}
.c--text-white{color:var(--color-text-white) !important;}

.c--primary{color:var(--color-primary) !important;}
.c--primary-dark{color:var(--color-primary-dark) !important;}
.c--primary-light{color:var(--color-primary-light) !important;}
.c--accent{color:var(--color-accent) !important;}
.c--accent-light{color:var(--color-accent-light) !important;}
.c--accent-dark{color:var(--color-accent-dark) !important;}

/* ============================================================
   list
  ============================================================ */
/* 各アイテムのカード風デザイン */
.list-style li {
   position: relative;
   padding-left: 0.9em;
   margin-bottom: var(--space-2);
}

.list-style li:before {
   width: 0.5em;
   height: 0.2em;
   position: absolute;
   z-index: 1;
   top: 50%;
   margin-top: -0.1em;
   left: 0;
   content: "";
   background: var(--color-primary);
}


/* ============================================================
   title
  ============================================================ */
.type-post h2,
.title2 {
   position: relative;
   font-weight: bold;
   padding: 0 0 0.5em 0;
}
.type-post h2:before,
.title2:before {
   border-bottom: 3px solid var(--color-primary);
   width: 20%;
   position: absolute;
   z-index: 1;
   bottom: 0;
   left: 0;
   content: "";
}
.type-post h2:after,
.title2:after {
   border-bottom: 3px solid var(--color-text-muted);
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
   content: "";
}
.type-post h3,
.title3{
  border-left: 5px solid var(--color-primary); /* 左側のアクセント線（サイトのテーマカラーに合わせて変更可） */
  padding: 15px 20px;
  line-height: 1.6;
}

/* ============================================================
   marker
  ============================================================ */
.marker-m {
   background: linear-gradient(transparent 75%, var(--color-primary) 75%);
   font-weight: bold;
}

.marker-a1 {
   background: linear-gradient(transparent 75%, var(--color-accent) 75%);
   font-weight: bold;
}


/* ============================================================
   table-layout
  ============================================================ */
.tableLayout {
   table-layout: fixed;
   border-collapse: collapse;
   border-spacing: 0;
}
.tableStyle {
    --bd-color:#ccc;
    --bd-width:1px;
}
.tableStyle {
    border-collapse: collapse;
    border-top: var(--bd-width) solid var(--bd-color);
    border-right: var(--bd-width) solid var(--bd-color);
    width: 100%;
}
.tableStyle td,
.tableStyle th {
    border-bottom: var(--bd-width) solid var(--bd-color);
    border-left: var(--bd-width) solid var(--bd-color);
    padding: 10px;
}
.tableStyle th {
    background-color: var(--color-bg);
    text-align: left;
}
.tableStyle tr:nth-child(even) {
    background-color: var(--color-bg-secondary);
}
.tableStyle tr:first-child th {
    border-top: var(--bd-width) solid var(--bd-color);
}