@charset "UTF-8";

/*====================================================
**variable
====================================================*/
:root {}

/*====================================================
**base
====================================================*/
/*基本余白のスタイル
---------------------------------------*/
body {
  --xxl: 120px;
  --xl: 60px;
  --lg: 45px;
  --md: 30px;
  --sm: 15px;
  --xs: 10px;

  --padding: var(--sm);
  --margin: var(--sm);
}

body h1,
body h2,
body h3,
body h4,
body h5 {
  margin: 0;
}

body .post-contents h1,
body .post-contents h2,
body .post-contents h3,
body .post-contents h4,
body .post-contents h5 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}


/*文字間・行間のスタイル
---------------------------------------*/
body {
  line-height: 1.6;
  font-feature-settings: "palt" 1;
  /* 文字のカーニング */
}

h1,
h2,
h3,
h4,
h5 {
  line-height: 1.3;
}

p {
  padding: var(--xs) 0;
  margin: 0;
}

/*====================================================
**typography
====================================================*/
/* font-size: 62.5% = 10pxにすると、後々変更するのが大変
 理由は、10px以下に出来ない為。
 */
/* サイズ
-----------------------------------------------*/
html {
  font-size: 120%;
}

body {
  --fs-xxl: 5rem;
  --fs-xl: 3rem;
  --fs-lg: 2rem;
  --fs-md: 1.5rem;
  --fs-normal: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;
}

h1 {
  font-size: var(--fs-xl);
}

h2 {
  font-size: var(--fs-lg);
}

h3 {
  font-size: var(--fs-md);
}

h4 {
  font-size: 1.3rem;
}

h5 {
  font-size: var(--fs-normal);
}

/*文字サイズ詳細設定のスタイル
---------------------------------------*/
header {
  font-size: var(--fs-xs);
}

main {
  font-size: var(--fs-normal);
}

aside {
  font-size: var(--fs-normal);
}

.breadcrumbs,
footer {
  font-size: var(--fs-sm);
}

.btn-category,
.btn-tag {
  font-size: var(--fs-sm);
}

.dropdown-menu,
.input-group-text {
  font-size: var(--fs-normal);
}

/*リンクスタイルのスタイル
---------------------------------------*/
a {
  text-decoration: none;
  color: var(--anchor-color);
}

a:hover {
  color: var(--hover-color);
}

a img:hover {
  text-decoration: none;
}

a img:hover {
  opacity: 0.8;
  transition-property: all;
  transition-timing-function: ease;
}

/*====================================================
**color
====================================================*/
html {
  color: var(--font-color);
  background-color: var(--bg-color);
}

header {
  background-color: var(--bg-color);
}

footer {
  background-color: var(--bg-sub1-color);
}

.table,
.tableStyle {
  --bd-color: #ccc;
}

.table th,
.tableStyle th {
  --bg-color: var(--bg-sub1-color);
}

.btn {
  --font-color: #fff;
  --bg-color: var(--main-color);
  --bd-color: var(--main-color);
}

.btn-disabled-sub,
.btn-disabled {
  pointer-events: none;
  --bg-color: #ccc;
  --font-color: #fff;
  --bd-color: 1px solid #ccc;
}

.btn-accent {
  --font-color: #fff;
  --hover-color: var(--accent1-color);
  --bg-color: var(--accent1-color);
  --bd-color: var(--accent1-color);
  --hover-bg-color: #fff;
  --hover-bd-color: var(--accent1-color);
}

.btn-secondary,
.btn-sub {
  --font-color: var(--main-color);
  --hover-color: #fff;
  --bg-color: #fff;
  --bd-color: var(--main-color);
  --hover-bg-color: var(--main-color);
  --hover-bd-color: var(--main-color);
}

.btn-sub2 {
  --font-color: #666;
  --hover-color: #666;
  --bg-color: #fff;
  --bd-color: #ccc;
  --hover-bg-color: var(--bg-sub1-color);
  --hover-bd-color: #ccc;
}

/* フォントカラー*/
.c-m {
  color: var(--main-color) !important;
}

.c-s1 {
  color: var(--sub1-color) !important;
}

.c-s2 {
  color: var(--sub2-color) !important;
}

.c-s3 {
  color: var(--sub3-color) !important;
}

.c-a1 {
  color: var(--accent1-color) !important;
}

.c-a2 {
  color: var(--accent2-color) !important;
}

.c-a3 {
  color: var(--accent3-color) !important;
}

/* 背景カラー*/
.bg-m {
  background-color: var(--main-color) !important;
}

.bg-s1 {
  background-color: var(--sub1-color) !important;
}

.bg-s2 {
  background-color: var(--sub2-color) !important;
}

.bg-s3 {
  background-color: var(--sub3-color) !important;
}

.bg-a1 {
  background-color: var(--accent1-color) !important;
}

.bg-a2 {
  background-color: var(--accent2-color) !important;
}

.bg-a3 {
  background-color: var(--accent3-color) !important;
}

.bg-b {
  background-color: var(--bg-color) !important;
}

/* ボーダーカラー*/
.bc-m {
  border-color: var(--main-color) !important;
}

.bc-s1 {
  border-color: var(--sub1-color) !important;
}

.bc-s2 {
  border-color: var(--sub2-color) !important;
}

.bc-s3 {
  border-color: var(--sub3-color) !important;
}

.bc-a1 {
  border-color: var(--accent1-color) !important;
}

.btc-m {
  border-top-color: var(--main-color) !important;
}

.btc-s1 {
  border-top-color: var(--sub1-color) !important;
}

.btc-s2 {
  border-top-color: var(--sub2-color) !important;
}

.btc-s3 {
  border-top-color: var(--sub3-color) !important;
}

.btc-a1 {
  border-top-color: var(--accent1-color) !important;
}

.bbc-m {
  border-bottom-color: var(--main-color) !important;
}

.bbc-s1 {
  border-bottom-color: var(--sub1-color) !important;
}

.bbc-s2 {
  border-bottom-color: var(--sub2-color) !important;
}

.bbc-s3 {
  border-bottom-color: var(--sub3-color) !important;
}

.bbc-a {
  border-bottom-color: var(--accent1-color) !important;
}

/*====================================================
**other
====================================================*/
button, input, select, textarea {
  font-family : inherit;
 }