/************************************
** common
************************************/

.hidden-sp {
  display: block !important;
}
.hidden-pc {
  display: none !important;
}
/* プレースホルダー */
::placeholder {
  color: #888;
}

/* スクロールバー */
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* パンくずリスト */
.breadcrumb div span.fa-home,
.breadcrumb div span.fa-folder,
.breadcrumb div span.fa-file-o {
  display: none;
}

/* ヘッダー */
.header .logo-text {
  padding: 16px 0;
}
.header .logo-text .site-name {
  display: block;
  line-height: 1.4;
}
.header-container {
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
.fixed-header .logo-header img {
  height: auto !important;
  width: 263px !important;
}
.logo-image span,
.logo-image a {
  line-height: 1;
}
.navi-in {
  padding-inline: 1em;
}
.menu-header {
  gap: 10px;
}
.menu-header .menu-item {
  align-items: center;
  display: flex;
  justify-content: center;
}
/* 公式サイト */
.menuOfficial.menu-item a {
  background: #fff;
  border: 1px solid #333;
  border-radius: 50px;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  line-height: 1;
  padding: 12px;
  position: relative;
}
.menuOfficial.menu-item a::after {
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  bottom: 0;
  content: '';
  height: 6px;
  margin: auto;
  position: absolute;
  right: 16px;
  transform: rotate(45deg);
  transition: 0.5s;
  top: 0;
  width: 6px;
}
.menuOfficial.menu-item a:hover {
  background: #333 !important;
  color: #fff !important;
}
.menuOfficial.menu-item a:hover::after {
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  right: 12px;
}
/* 無料で使ってみる */
.menuUse.menu-item a {
  background: #ff9a17;
  border: 1px solid #ff9a17;
  border-radius: 50px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  line-height: 1;
  padding: 12px;
  position: relative;
}
.menuUse.menu-item a::after {
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  bottom: 0;
  content: '';
  height: 6px;
  margin: auto;
  position: absolute;
  right: 16px;
  transform: rotate(45deg);
  transition: 0.5s;
  top: 0;
  width: 6px;
}
.menuUse.menu-item a:hover {
  background: #fff !important;
  color: #ff9a17 !important;
}
.menuUse.menu-item a:hover::after {
  border-top: solid 2px #ff9a17;
  border-right: solid 2px #ff9a17;
  right: 12px;
}
/* ログイン */
.menuLogin.menu-item a {
  background: #1577ff;
  border: 1px solid #1577ff;
  border-radius: 50px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  line-height: 1;
  padding: 12px;
  position: relative;
}
.menuLogin.menu-item a::after {
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  bottom: 0;
  content: '';
  height: 6px;
  margin: auto;
  position: absolute;
  right: 16px;
  transform: rotate(45deg);
  transition: 0.5s;
  top: 0;
  width: 6px;
}
.menuLogin.menu-item a:hover {
  background: #fff !important;
  color: #1577ff !important;
}
.menuLogin.menu-item a:hover::after {
  border-top: solid 2px #1577ff;
  border-right: solid 2px #1577ff;
  right: 12px;
}

/* モバイルスライドインメニュー */
.menu-close-button {
  padding: 16px;
}
span.fa.fa-close {
  font-size: 20px;
}
span.fa.fa-close::before{
  align-items: center;
  background: #e9e9e9;
  border-radius: 100vh;
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}
ul.menu-drawer:before{
  background: white;
  border-bottom: 1px solid #ccc;
  color:#333;
  content: "メニュー";
  display: flex;
  font-size:14px;
  line-height: 1;
  margin-block: 0 16px;
  padding: 16px 6px;
}
.menu-drawer li:not(:last-child) {
  margin-bottom: 16px;
}
.menu-drawer a {
  font-size: 16px;
}

/* 見出し */
h1 {
  font-size: 24px;
  font-weight: 600;
  margin-block: 0;
  text-align: center;
}
.page .ttl-header {
  padding-block: 36px 24px;
}
.page .ttl-header h1 {
  margin-block: 24px 0 !important;
}
/* ↓ ↓ ↓ エルサイト限定　↓ ↓ ↓ */
.related-entry-card-title {
    background-color: #fff !important;
}

/* 画像 */
figure a:hover {
  opacity: 0.8;
}
.wp-block-image a {
  cursor: zoom-in;
}
/* lightbox */
#baguetteBox-overlay .full-image img {
  max-height: 90vh !important;
  max-width: 90vw !important;
}
.baguetteBox-button#close-button {
  background: none;
}
.baguetteBox-button svg g {
  stroke: rgb(255,255,255);
}

/* ページネーション */
.pagination {
  align-items: center;
  gap: 10px;
  margin-block: 60px 0 !important;
}
.pagination .page-numbers {
  align-items: center;
  border: 1px solid #DDDDE6;
  border-radius: 8px;
  display: flex;
  font-size: 14px;
  height: 35px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  width: 35px;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  border: none;
}
.pagination .page-numbers.prev .fa,
.pagination .page-numbers.next .fa {
  font-size: 16px;
}
.pagination .page-numbers.current {
  background: #e9f2ff;
  border: 1px solid #3476ff;
  border-radius: 8px;
  color: #3476ff;
  font-size: 14px;
  height: 35px;
  width: 35px;
}
.pagination .page-numbers.dots {
  background: none;
  border: none;
}

/* コンテンツタイトルエリア */
.content,
.content-top {
  /* margin: 0 !important; */
  margin: 4px !important;
}
.archive-title {
  font-size: 24px !important;
  margin-block: 24px 0 !important;
}
.archive-title .fa {
  display: none;
}
.archive-desc {
  margin-block: 10px 60px;
  text-align: center;
}
.category-filter {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-block: 40px;
}
.category-filter .cat-btn {
  background: #F5F5F9;
  border: 1px solid #F5F5F9;
  border-radius: 9999px;
  color: #222;
  font-size: 14px;
  padding-block: 2px;
  padding-inline: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.category-filter .cat-btn.is-active {
  background: #3476ff;
  border: 1px solid #3476ff;
  color: #fff;
}
.category-filter .cat-btn:hover {
  background: #e9f2ff;
  border: 1px solid #3476ff;
  color: #3476ff;
  transition: all 0.3s ease;
}

/* コンテンツエリア */
.main {
  padding-bottom: 60px !important;
}

/* フッター */
#footer {
  border-top: 1px solid #ddd;
}

/* サイドバー */
.sidebar {
  padding: 0 20px !important;
}
/* サイドバー目次を常に開いた状態にする */
.sidebar-scroll .toc-title {
  pointer-events: none;
  cursor: default;
}

/* マーカー */
.marker-under {
  background: linear-gradient(transparent 70%, #f7d02e 70%) !important;
  /* background-image: linear-gradient(90deg, #F09819,#EDDE5D 100%) !important; */
  background-repeat: no-repeat !important;
  background-size: 0% 100% !important;
  /* background-position: 0 100% !important; */
  display: inline;
  transition: background-size 1.5s;
}

.marker-under.on {
  background-size: 100% 100% !important;
}

/*1255px以下*/
@media screen and (max-width: 1255px){
  .ttl-header {
    width: auto;
  }
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  .breadcrumb {
    padding-top: 30px !important;
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  .hidden-sp {
    display: none !important;
  }
  .hidden-pc {
    display: block !important;
  }
  main.main,
  div.sidebar {
    padding: 30px 20px !important;
  }
  .page .ttl-header {
    padding-block: 36px 10px;
  }
  .pagination {
    margin-block: 10px 0 !important;
  }
  .category-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .category-filter .cat-btn {
    flex-shrink: 0;
  }
  .entry-card-wrap h2 {
    font-size: 14px;
  }
  h1 {
    text-align: left;
  }
  .archive-title {
    font-size: 14px !important;
  }
  /* ↓ ↓ ↓ エルサイト限定　↓ ↓ ↓ */
  .menuOfficial.menu-item a,
  .menuUse.menu-item a,
  .menuLogin.menu-item a {
    padding: 16px;
  }
}