@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/


input[type=text], input[type=password], input[type=date], input[type=datetime], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=time], input[type=url], textarea, select, .search-edit{
  font-size: 16px;
}

/* 記事内のFANZAボタン：文字の過度な太字を抑える */
.entry-content .wp-block-button__link{
  font-weight: 600;
}
.entry-content .wp-block-button__link b,
.entry-content .wp-block-button__link strong {
  font-weight: inherit;
}

.profile-icon img {
  width: 200px;
}

/************************************
** 横スクロール可能テーブル
************************************/
.scrollable-table table th,
.scrollable-table table td {
  font-size: 15px;
  padding: 7px;
}

/************************************
** 黄色いマーカー
************************************/
.yellow-marker {
  font-weight: 700;
  background: linear-gradient(
    transparent 60%,
    #fff176 60%
  );
  padding: 0 0.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/************************************
** ヘッダー
************************************/

/* ハンバーガーメニューデザイン */
.mobile-menu-buttons .menu-caption {
  display: none;
}
.mobile-menu-buttons .menu-icon {
  font-size: 24px;
}

#header-container,
#header-container-in,
#header {
  background: #fff;
}

/* Cocoonのトップメニュー小レイアウトを通常ブロック化 */
#header-container-in.hlt-top-menu,
#header-container-in.hlt-tm-small {
  display: block;
  width: 100%;
  max-width: none;
  overflow: visible;
}

/* header と navi を上下段に分離 */
#header-container-in.hlt-top-menu #header,
#header-container-in.hlt-tm-small #header,
#header-container-in.hlt-top-menu #navi,
#header-container-in.hlt-tm-small #navi,
#header-container-in.hlt-top-menu .navi,
#header-container-in.hlt-tm-small .navi {
  float: none;
  clear: both;
  width: 100%;
  max-width: none;
  position: static;
}

/* clearfix疑似要素の干渉対策 */
#header-container #header-in::before,
#header-container #header-in::after {
  content: none;
  display: none;
}

/* PC幅：ロゴ + 検索フォーム */
#header-container #header-in {
  display: grid;
  grid-template-columns: auto minmax(520px, 860px);
  align-items: center;
  justify-content: space-between;
  column-gap: 22px;
  row-gap: 0;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 17px 15px;
  box-sizing: border-box;
}

/* ロゴ */
#header-container #header-in > .logo,
#header-container #header-in > .logo-header,
#header-container #header-in > .logo-image {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  text-align: left;
}

#header-container #header-in .logo a,
#header-container #header-in .site-name,
#header-container #header-in .site-name-text-link {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

#header-container #header-in .site-logo-image,
#header-container #header-in .header-site-logo-image {
  display: block;
  width: 170px;
  height: auto;
  max-width: none;
  max-height: none;
}

/* 検索フォーム */
#header-container #header-in > .tk-header-search {
  grid-column: 2;
  grid-row: 1;
  justify-self: stretch;
  align-self: center;
  display: block;
  width: 100%;
  max-width: 860px;
  margin: 0;
  padding: 0;
  float: none;
}

#header-container #header-in .tk-header-search-form {
  display: flex;
  align-items: center;
  width: 100%;
  height: 41.5px;
  margin: 0;
  padding: 0;
  background: #1f1f1f;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: none;
}

#header-container #header-in .tk-header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 18px;
  color: #fff;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  appearance: none;
}

#header-container #header-in .tk-header-search-input::placeholder {
  color: #fff;
  opacity: 1;
}

#header-container #header-in .tk-header-search-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

#header-container #header-in .tk-header-search-button {
  flex: 0 0 60px;
  width: 60px;
  height: 41.5px;
  margin: 0;
  padding: 0 0 2px;
  background: #276fdb;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header-container #header-in .tk-header-search-icon {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
}

#header-container #header-in .tk-header-search-icon::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 3px;
  right: -7px;
  bottom: -4px;
  background: #fff;
  border-radius: 999px;
  transform: rotate(45deg);
  transform-origin: center;
}

/* PC用ナビ */
#header-container #navi,
#header-container .navi {
  float: none;
  clear: both;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: none;
}

#header-container #navi-in {
  float: none;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
  box-sizing: border-box;
}

#header-container #navi-in > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

#header-container #navi-in > ul > li {
  float: none;
  flex: 0 0 auto;
}

#header-container #navi-in > ul > li > a {
  padding: 11px 46px;
  color: #111;
  line-height: 1.4;
  text-decoration: none;
}

/************************************
** ヘッダー：1023px以下
************************************/

@media screen and (max-width: 1023px) {
  #header-container #header-in {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    row-gap: 8px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  #header-container #header-in > .logo,
  #header-container #header-in > .logo-header,
  #header-container #header-in > .logo-image {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }

  #header-container #header-in > .tk-header-search {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    margin-top: 5px;
  }

  #header-container #header-in .tk-header-search-form {
    height: 38px;
  }

  #header-container #header-in .tk-header-search-button {
    flex-basis: 48px;
    width: 48px;
    height: 38px;
  }

  #header-container #header-in .tk-header-search-icon {
    width: 17px;
    height: 17px;
    border-width: 3px;
  }

  #header-container #header-in .tk-header-search-icon::after {
    width: 8px;
    height: 3px;
    right: -7px;
    bottom: -4px;
  }

  #header-container #navi,
  #header-container .navi,
  #header-container #navi-in {
    display: none;
  }

  .mobile-header-menu-buttons,
  .mobile-menu-buttons,
  .mobile-menu-buttons-container {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    min-height: 52px;
    margin: 0;
    padding: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: none;
    z-index: auto;
  }

  .mobile-header-menu-buttons .navi-menu-button,
  .mobile-menu-buttons .navi-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    margin: 0 auto;
    padding: 0;
  }

  body,
  #container,
  #header-container,
  #header-container-in {
    margin-top: 0;
  }
}

@media screen and (max-width: 600px) {
  #header-container #header-in {
    row-gap: 7px;
    min-width: 0;
  }

  #header-container #header-in > .tk-header-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
    box-sizing: border-box;
  }

  #header-container #header-in .tk-header-search-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 34px;
    box-sizing: border-box;
  }

  #header-container #header-in .tk-header-search-input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #header-container #header-in .tk-header-search-button {
    flex: 0 0 44px;
    width: 44px;
    max-width: 44px;
    height: 34px;
  }
}

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

  .mobile-header-menu-buttons,
  .mobile-menu-buttons,
  .mobile-menu-buttons-container {
    height: 48px;
    min-height: 48px;
  }

  .mobile-header-menu-buttons .navi-menu-button,
  .mobile-menu-buttons .navi-menu-button {
    height: 48px;
  }
}

/************************************
** 一覧・固定ページ：全体レイアウト
************************************/

body.home,
body.archive,
body.search,
body.page,
body.single {
  background: linear-gradient(
    to bottom,
    #e7e7e7 0,
    #e7e7e7 130px,
    #fefefe 360px,
    #fefefe 78%,
    #e7e7e7 100%
  );
}



body.home .content-in,
body.archive .content-in,
body.search .content-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 18px 48px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px 22px;
  align-items: start;
  box-sizing: border-box;
}

/* 固定ページ：サイドバーなしの1カラム */

body.home .content-in > .sidebar,
body.archive .content-in > .sidebar,
body.search .content-in > .sidebar {
  grid-column: 1;
  grid-row: 1;
  float: none;
}

body.home .content-in > .main,
body.archive .content-in > .main,
body.search .content-in > .main {
  grid-column: 2;
  grid-row: 1;
  float: none;
  min-width: 0;
  box-sizing: border-box;
}

body.home .main,
body.archive .main,
body.search .main {
  order: 2;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}




/************************************
** 一覧ページ：見出し
************************************/
h1, h2, h3, h4, h5, h6 {
  font-weight: 500 !important;
}

.article h2 {
  width: fit-content;
  max-width: 100%;
  margin: 32px 0 22px;
  padding: 10px 8px 8px;
  color: #276fdb;
  border-bottom: solid 3px #276fdb;
  background-color: transparent;
}

.article h2::before,
.article h2::after {
  display: none;
}
.archive-title,
body.home .video-index-title,
body.archive .video-index-title,
body.search .video-index-title {
  margin: 0 0 16px;
  padding: 0;
  color: #222;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.4;
  border: none;
}

body.home .main .widget-index-top,
body.archive .main .widget-index-top,
body.search .main .widget-index-top,
body.home .main .index-top-widget,
body.archive .main .index-top-widget,
body.search .main .index-top-widget,
body.home .main .widget_text,
body.archive .main .widget_text,
body.search .main .widget_text,
body.home .main .widget_custom_html,
body.archive .main .widget_custom_html,
body.search .main .widget_custom_html {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

body.home .main .video-index-title::before,
body.archive .main .video-index-title::before,
body.search .main .video-index-title::before,
body.home .main .video-index-title::after,
body.archive .main .video-index-title::after,
body.search .main .video-index-title::after {
  display: none;
}

/************************************
** 動画カード風インデックス
************************************/

body.home .main .list,
body.archive .main .list,
body.search .main .list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.home .main .entry-card-wrap,
body.archive .main .entry-card-wrap,
body.search .main .entry-card-wrap {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #e7e9ee;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.055);
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

body.home .main .entry-card,
body.archive .main .entry-card,
body.search .main .entry-card {
  display: block;
  padding: 0;
  height: 100%;
}

body.home .main .entry-card-thumb,
body.archive .main .entry-card-thumb,
body.search .main .entry-card-thumb {
  position: relative;
  float: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  background: #ddd;
  overflow: hidden;
  border-bottom: 1px solid #eef0f3;
}

body.home .main .entry-card-thumb img,
body.archive .main .entry-card-thumb img,
body.search .main .entry-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.home .main .entry-card-thumb::after,
body.archive .main .entry-card-thumb::after,
body.search .main .entry-card-thumb::after {
  content: "HD";
  position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
    opacity: 0.8;
    background-color: #ee0000;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.33px;
    color: #ffffff;
    text-transform: uppercase;
    padding: 0 8px;
}

body.home .main .entry-card-content,
body.archive .main .entry-card-content,
body.search .main .entry-card-content {
  padding: 9px 12px 11px;
  min-height: 76px;
  margin: 0;
}

body.home .main .entry-card-title,
body.archive .main .entry-card-title,
body.search .main .entry-card-title {
  color: #111827;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: 0.01em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.15s ease-in-out;
}

body.home .main .entry-card-wrap:hover .entry-card-title,
body.archive .main .entry-card-wrap:hover .entry-card-title,
body.search .main .entry-card-wrap:hover .entry-card-title {
  color: #1f6fd6;
}

/* 不要な情報を非表示 */
body.home .main .entry-card-snippet,
body.archive .main .entry-card-snippet,
body.search .main .entry-card-snippet,
body.home .main .entry-card-categorys,
body.archive .main .entry-card-categorys,
body.search .main .entry-card-categorys,
body.home .main .post-update,
body.archive .main .post-update,
body.search .main .post-update,
body.home .main .author-info,
body.archive .main .author-info,
body.search .main .author-info,
body.home .main .comment-count,
body.archive .main .comment-count,
body.search .main .comment-count {
  display: none;
}

body.home .main .entry-card-meta,
body.archive .main .entry-card-meta,
body.search .main .entry-card-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 8px;
  font-size: 11.5px;
  color: #a9b3bf;
  line-height: 1.2;
  text-align: left;
}

body.home .main .entry-card-meta .fa,
body.archive .main .entry-card-meta .fa,
body.search .main .entry-card-meta .fa,
body.home .main .entry-card-meta .fas,
body.archive .main .entry-card-meta .fas,
body.search .main .entry-card-meta .fas,
body.home .main .entry-card-meta .far,
body.archive .main .entry-card-meta .far,
body.search .main .entry-card-meta .far {
  display: none;
}

body.home .main .post-date,
body.archive .main .post-date,
body.search .main .post-date {
  display: inline-flex;
  align-items: center;
  color: #a9b3bf;
  font-size: 11.5px;
}

/************************************
** 一覧カード：投稿日アイコン
** Font Awesomeを使わずSVGで表示
************************************/

/* Cocoon標準のFont Awesomeアイコンは非表示のまま */
body.home .main .post-date .fa,
body.archive .main .post-date .fa,
body.search .main .post-date .fa,
body.home .main .post-date .fas,
body.archive .main .post-date .fas,
body.search .main .post-date .fas,
body.home .main .post-date .far,
body.archive .main .post-date .far,
body.search .main .post-date .far {
  display: none;
}

/* SVGカレンダーアイコン */
body.home .main .post-date::before,
body.archive .main .post-date::before,
body.search .main .post-date::before {
  content: "";

  display: inline-block;
  flex: 0 0 auto;

  width: 14px;
  height: 14px;

  margin-right: 6px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='1.5' stroke='%23b8c0ca' stroke-width='1.7'/%3E%3Cpath d='M1.8 6H14.2' stroke='%23b8c0ca' stroke-width='1.7'/%3E%3Cpath d='M5 1V4' stroke='%23b8c0ca' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M11 1V4' stroke='%23b8c0ca' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/************************************
** サイドバー
************************************/

/* サイドバー本体 */
.sidebar {
  order: 1;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 20px 18px 22px;
  background: #fff;
  overflow: hidden;

  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08);

  border-radius: 5px;
  height: auto !important;
  box-sizing: border-box;
}

/* ========================================
   ウィジェット共通
======================================== */

.sidebar .widget {
  margin: 0 0 28px;
  padding: 0;
  border: none;
}

.sidebar .widget:last-child {
  margin-bottom: 0;
}

/* ========================================
   ウィジェット見出し
======================================== */

.sidebar .widget-title,
.sidebar h3 {
  margin: 0 0 15px;
  padding: 0;

  background: transparent;
  color: #111;

  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;

  border: none;
  border-radius: 0;
}

.sidebar .widget-title::before,
.sidebar .widget-title::after {
  display: none;
}

/* ========================================
   人気記事
======================================== */

.sidebar .popular-entry-cards {
  padding: 0 8px 4px;
}

.sidebar .popular-entry-card-link,
.sidebar .widget-entry-card-link {
  display: flex;
  align-items: center;
  gap: 9px;

  padding: 0 0 15px;
  margin: 0 0 15px;

  color: #222;
  text-decoration: none;
  border-bottom: none;
}

.sidebar .popular-entry-card-thumb,
.sidebar .widget-entry-card-thumb {
  flex: 0 0 112px;

  width: 112px;
  height: 112px;

  margin: 0;

  overflow: hidden;
  background: #ddd;
}

.sidebar .popular-entry-card-thumb img,
.sidebar .widget-entry-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar .popular-entry-card-title,
.sidebar .widget-entry-card-title {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.42;
  color: #222;
}

.sidebar .popular-entry-card-date,
.sidebar .popular-entry-card-snippet,
.sidebar .widget-entry-card-date,
.sidebar .widget-entry-card-snippet {
  display: none;
}

/* ========================================
   主要カテゴリーメニュー
======================================== */

.sidebar .widget_nav_menu ul {
  list-style: none;

  width: 100%;
  margin: 0;
  padding: 0 6px;
  box-sizing: border-box;
}

/* 各カテゴリー */
.sidebar .widget_nav_menu li {
  width: 100%;
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

/* カテゴリーリンク */
.sidebar .widget_nav_menu li > a {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  margin: 0;
  padding: 7px 0 7px;

  color: #222 !important;
  background: transparent !important;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;

  text-decoration: none;
  border: none;

  box-sizing: border-box;

  transition:
    color .25s ease;
}

/* ========================================
   カテゴリー名
======================================== */

.sidebar .sidebar-category-label {
  display: block;
  min-width: 0;
  color: inherit;
}

/* ========================================
   記事数
======================================== */

.sidebar .sidebar-category-count {
  display: block;

  flex: 0 0 auto;

  margin-left: 14px;

  color: #b7b7b7;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1;

  font-variant-numeric: tabular-nums;

  transition:
    color .25s ease;
}

/* ========================================
   hover用の青い下線

   左から右へ伸びる
======================================== */

.sidebar .widget_nav_menu li > a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 3px;

  background: #276fdb;

  pointer-events: none;

  transition:
    width .30s ease-out;
}

/* ========================================
   hover
======================================== */

/* Cocoon標準のhover背景を消す */
.sidebar .widget_nav_menu li:hover,
.sidebar .widget_nav_menu li:hover > a,
.sidebar .widget_nav_menu li > a:hover {
  background: transparent !important;
}

/* カテゴリー名を青く */
.sidebar .widget_nav_menu li:hover > a {
  color: #276fdb !important;
}

/* 記事数はhover時に黒へ */
.sidebar .widget_nav_menu li:hover .sidebar-category-count {
  color: #222;
}

/* 青線を左から右へ伸ばす */
.sidebar .widget_nav_menu li:hover > a::after {
  width: 100%;
}

/* ========================================
   キーボード操作時
======================================== */

.sidebar .widget_nav_menu li > a:focus-visible {
  color: #276fdb !important;
  outline: none;
}

.sidebar .widget_nav_menu li > a:focus-visible::after {
  width: 100%;
}

.sidebar .widget_nav_menu li > a:focus-visible
.sidebar-category-count {
  color: #222;
}

/************************************
** ページネーション
** 希望デザイン4 再現版
************************************/

/* Cocoon標準の大きな「次のページ」リンクは非表示 */
body.home .pagination-next-link,
body.archive .pagination-next-link,
body.search .pagination-next-link {
  display: none;
}

/* ========================================
   ページネーション全体
======================================== */

body.home .main .pagination,
body.archive .main .pagination,
body.search .main .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 8px;

  margin: 34px 0 0;
  padding: 0;

  text-align: center;
}

/* ========================================
   通常のページ番号
======================================== */

body.home .main .pagination .page-numbers,
body.archive .main .pagination .page-numbers,
body.search .main .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 46px;
  min-width: 46px;
  height: 40px;

  margin: 0;
  padding: 0;

  color: #333;
  background: #e7e7e7;

  border: none;
  border-radius: 20px;

  box-shadow: none;

  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  text-decoration: none;

  transition:
    color .2s ease,
    background-color .2s ease;
}

/* ========================================
   現在のページ
======================================== */

body.home .main .pagination .page-numbers.current,
body.archive .main .pagination .page-numbers.current,
body.search .main .pagination .page-numbers.current {
  color: #fff;
  background: #276fdb;

  border: none;

  cursor: default;
}

/* ========================================
   hover
======================================== */

body.home .main .pagination a.page-numbers:hover,
body.archive .main .pagination a.page-numbers:hover,
body.search .main .pagination a.page-numbers:hover {
  color: #fff;
  background: #222;

  border: none;
}

/* ========================================
   省略記号「…」
======================================== */

body.home .main .pagination .page-numbers.dots,
body.archive .main .pagination .page-numbers.dots,
body.search .main .pagination .page-numbers.dots {
  color: #555;
  background: #e7e7e7;

  cursor: default;
}

/* ========================================
   前へ・次へ
======================================== */

body.home .main .pagination .prev,
body.archive .main .pagination .prev,
body.search .main .pagination .prev,
body.home .main .pagination .next,
body.archive .main .pagination .next,
body.search .main .pagination .next {
  width: auto;
  min-width: 62px;

  padding: 0 15px;

  border-radius: 999px;
}

/* ========================================
   Cocoonの矢印表示を文字へ変更
   見た目だけCSSで変更する
======================================== */

body.home .main .pagination .next,
body.archive .main .pagination .next,
body.search .main .pagination .next {
  font-size: 0;
}

body.home .main .pagination .next::after,
body.archive .main .pagination .next::after,
body.search .main .pagination .next::after {
  content: "Next";

  font-size: 12px;
  font-weight: 500;
}

body.home .main .pagination .prev,
body.archive .main .pagination .prev,
body.search .main .pagination .prev {
  font-size: 0;
}

body.home .main .pagination .prev::before,
body.archive .main .pagination .prev::before,
body.search .main .pagination .prev::before {
  content: "Prev";

  font-size: 12px;
  font-weight: 500;
}

/* ========================================
   スマホ
======================================== */

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

  body.home .main .pagination,
  body.archive .main .pagination,
  body.search .main .pagination {
    gap: 6px;
    margin-top: 28px;
  }

  body.home .main .pagination .page-numbers,
  body.archive .main .pagination .page-numbers,
  body.search .main .pagination .page-numbers {
    width: 34px;
    min-width: 34px;
    height: 34px;

    margin: 0;

    font-size: 11.5px;
  }

  body.home .main .pagination .prev,
  body.archive .main .pagination .prev,
  body.search .main .pagination .prev,
  body.home .main .pagination .next,
  body.archive .main .pagination .next,
  body.search .main .pagination .next {
    width: auto;
    min-width: 58px;

    padding: 0 13px;
  }

  body.home .main .pagination .next::after,
  body.archive .main .pagination .next::after,
  body.search .main .pagination .next::after,
  body.home .main .pagination .prev::before,
  body.archive .main .pagination .prev::before,
  body.search .main .pagination .prev::before {
    font-size: 11.5px;
  }
}

/************************************
** レスポンシブ：本文・カード・サイドバー
************************************/

@media screen and (max-width: 900px) {
  body.home .content-in,
  body.archive .content-in,
  body.search .content-in {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 14px 42px;
  }

  /* 固定ページは1カラムのまま */

  body.home .content-in > .main,
  body.archive .content-in > .main,
  body.search .content-in > .main {
    grid-column: 1;
    grid-row: 1;
  }

  body.home .content-in > .sidebar,
  body.archive .content-in > .sidebar,
  body.search .content-in > .sidebar {
    grid-column: 1;
    grid-row: 2;
  }

  body.home .main,
  body.archive .main,
  body.search .main {
    order: 1;
    padding: 18px 16px 28px;
  }

  .sidebar {
    order: 2;
  }

  .sidebar .widget {
    margin-bottom: 28px;
  }

  body.home .video-index-title,
  body.archive .video-index-title,
  body.search .video-index-title {
    margin-bottom: 14px;
    font-size: 19px;
  }
}

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

/************************************
** 横スクロール可能テーブル
************************************/
.scrollable-table table th,
.scrollable-table table td {
  font-size: 14px;
  padding: 5px;
}

  body.home .main .list,
  body.archive .main .list,
  body.search .main .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.home .main .entry-card-title,
  body.archive .main .entry-card-title,
  body.search .main .entry-card-title {
    font-size: 14px;
  }
}

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

  body.home .content-in,
  body.archive .content-in,
  body.search .content-in{
    padding: 0 0 42px;
  }

  body.home .main,
  body.archive .main,
  body.search .main {
    padding: 14px 12px 24px;
  }

  body.home .main .entry-card-content,
  body.archive .main .entry-card-content,
  body.search .main .entry-card-content {
    padding: 12px 13px 14px;
  }

  .sidebar .popular-entry-card-thumb,
  .sidebar .widget-entry-card-thumb {
    flex-basis: 105px;
    width: 105px;
    height: 105px;
  }

  body.home .pagination .page-numbers,
  body.archive .pagination .page-numbers,
  body.search .pagination .page-numbers {
    min-width: 34px;
    height: 34px;
    margin: 0 2px;
    font-size: 12px;
  }

  body.home .video-index-title,
  body.archive .video-index-title,
  body.search .video-index-title {
    font-size: 18px;
  }
}

/************************************
** フッター周辺
************************************/
.footer {
  box-shadow: 0px 1px 80px rgba(207, 207, 207, 0.9);
}

body.home .footer,
body.archive .footer,
body.search .footer{
  margin-top: 0;
}

/************************************
** 記事ページ・固定ページ：メインボックスの影
************************************/

body.single .main,
body.page .main {
  padding: 35px;
  box-shadow: -1px 1px 5px rgba(207, 207, 207, 0.65);
  border-radius: 5px;
}

/* タブレット〜スマホ横：2列 */
@media screen and (max-width: 700px) {
  body.single .main,
  body.page .main {
    padding: 20px;
  }
}

/************************************
** 記事下：関連記事をトップページカード風にする
************************************/

/* 関連記事エリア */
body.single .related-entries {
  margin: 15px 0 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 見出し */
body.single .related-entry-heading {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 22px;
  padding: 10px 8px 8px;
  font-size: 24px;
  color: #276fdb;
  border-bottom: solid 3px #276fdb;
  background-color: transparent;
}

/* 関連記事リスト：PCは4列 */
body.single .related-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

/* Cocoon側の幅指定を解除 */
body.single .related-entry-card-wrap {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
  background: #fff;
  border: 1px solid #e7e9ee;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.055);
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

/* カード内部 */
body.single .related-entry-card {
  display: block;
  padding: 0;
  height: 100%;
}

/* サムネイル */
body.single .related-entry-card-thumb {
  position: relative;
  float: none;
  width: 100%;
  margin: 0;
  background: transparent;
  overflow: hidden;
  border-bottom: 1px solid #eef0f3;
}

/* サムネイル画像 */
body.single .related-entry-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* HDバッジ */
body.single .related-entry-card-thumb::after {
  content: "HD";
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  opacity: 0.8;
  background-color: #ee0000;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.33px;
  color: #ffffff;
  text-transform: uppercase;
  padding: 0 8px;
}

/* カード本文 */
body.single .related-entry-card-content {
  padding: 9px 12px 9px;
  margin: 0;
}

/* タイトル */
body.single .related-entry-card-title {
  color: #111827;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: 0.01em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.15s ease-in-out;
}

body.single .related-entry-card-wrap:hover .related-entry-card-title {
  color: #1f6fd6;
}

/* 抜粋など不要情報を非表示 */
body.single .related-entry-card-snippet,
body.single .related-entry-card-categorys,
body.single .related-entry-card .post-update,
body.single .related-entry-card .author-info,
body.single .related-entry-card .comment-count {
  display: none;
}

/* メタ情報 */
body.single .related-entry-card-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 2px;
  color: #a9b3bf;
  font-size: 11.5px;
  line-height: 1.2;
  text-align: left;
}

/* Cocoon標準のアイコンを非表示 */
body.single .related-entry-card-meta .fa,
body.single .related-entry-card-meta .fas,
body.single .related-entry-card-meta .far {
  display: none;
}

/* 投稿日 */
body.single .related-entry-card .post-date {
  display: inline-flex;
  align-items: center;
  color: #a9b3bf;
  font-size: 11.5px;
}

/* カレンダー風アイコン */
body.single .related-entry-card .post-date::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  border: 2px solid #b8c0ca;
  border-radius: 2px;
  box-sizing: border-box;
  background:
    linear-gradient(#b8c0ca, #b8c0ca) 0 3px / 100% 2px no-repeat;
}

/* =========================================
   CTAボタン（緑／影強め／立体／角丸ひかえめ・大きめ）
   - テンプレHTML：<a class="co-btn co-btn--green" href="...">公式サイトはこちら</a>
   ========================================= */

.aff-button-before {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #626262;
  margin: 0 0 10px !important;
}

/* レイアウト（ラッパー任意） */
.co-btn__wrap {
  text-align: center;
  margin: 0 0 30px;
}

/* ボタン本体 */
.wp-block-button__link {
  display: inline-block;
  padding: 22px 50px 24px; /* 大きめサイズ */
  width: 100%;
  border-radius: 10px; /* 角丸ひかえめ */
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  color: #fff !important;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);

  /* 立体感：濃淡グラデ＋強めの影＋軽い内側影 */
  background: linear-gradient(180deg, #3dd68d 0%, #3da570 100%);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .32), /* 外側の落ち影（強め） */
    inset 0 2px 0 rgba(255, 255, 255, .18), /* 上面のうっすらハイライト */
    inset 0 -3px 0 rgba(0, 0, 0, .18); /* 下面のわずかな落ち影 */

  border: 0; /* 白縁防止 */
  background-clip: padding-box; /* にじみ防止 */
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  -webkit-tap-highlight-color: transparent;
}

/* ホバー／押下 */
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 46px rgba(0, 0, 0, .36),
    inset 0 2px 0 rgba(255, 255, 255, .20),
    inset 0 -3px 0 rgba(0, 0, 0, .20);
  opacity: .98;
}
.wp-block-button__link:active {
  transform: translateY(0) scale(.995);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, .28),
    inset 0 2px 0 rgba(255, 255, 255, .16),
    inset 0 -2px 0 rgba(0, 0, 0, .20);
}

/* フォーカスリング（白縁に見えない配色） */
.wp-block-button__link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .9),
    0 0 0 6px rgba(51, 207, 132, .55),
    0 16px 46px rgba(0, 0, 0, .34);
}

/* モバイル最適化 */
@media (max-width: 599px) {

  #header-container #header-in .site-logo-image,
  #header-container #header-in .header-site-logo-image {
    width: 155px;
  }

  .wp-block-button__link {
    width: 100%;
    min-width: auto;
    padding: 20px 20px 20px;
    font-size: 18px;
  }
}

/* 低モーション環境 */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link {
    transition: none;
  }
}

/************************************
** 記事下：関連記事レスポンシブ
************************************/

/* やや狭いPC・タブレット横：3列 */
@media screen and (max-width: 1023px) {
  body.single .related-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* タブレット〜スマホ横：2列 */
@media screen and (max-width: 700px) {

  body.single .related-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }


}

/* スマホ：1列 */
@media screen and (max-width: 550px) {




  body.single .related-entry-heading {
    font-size: 18px;
  }
}

@media screen and (max-width: 420px) {
  .aff-button-before {
    font-size: 15px;
  }
}

/************************************
** PCナビ：希望デザイン2 再現版
************************************/
@media screen and (min-width: 1024px) {

  /* ========================================
     ナビ全体
  ======================================== */

  #header-container #navi-in {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 18px;
    box-sizing: border-box;
  }

  /*
   * メニュー全体
   *
   * 希望デザインのように、
   * メニュー同士の「文字間の余白」を基準に配置する。
   * 固定幅のボックスを並べる方式にはしない。
   */
  #header-container #navi-in > ul {
    display: flex;
    align-items: stretch;
    justify-content: center;

    width: 100%;

    margin: 0;
    padding: 0;

    column-gap: 76px;
  }

  /* ========================================
     各メニュー項目
  ======================================== */

  #header-container #navi-in > ul > li {
    position: relative;

    flex: 0 0 auto;
    width: auto;
    height: 51px;

    margin: 0;
    padding: 0 20px;

    display: flex;
    align-items: stretch;
    justify-content: center;

    box-sizing: border-box;
  }

  /* ========================================
     メニューリンク
  ======================================== */

  #header-container #navi-in > ul > li > a {
    font-size: 14px;
    font-weight: 500;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    /* 文字幅に合わせる */
    width: max-content;

    height: 51px;
    min-height: 51px;

    margin: 0;
    padding: 0 !important;

    color: #111 !important;
    background: transparent !important;

    line-height: 1;
    white-space: nowrap;

    text-decoration: none;

    transition:
      color .3s ease;
  }

  /* ========================================
     Cocoon標準hover背景を消す
  ======================================== */

  #header-container #navi-in > ul > li:hover,
  #header-container #navi-in > ul > li:hover > a,
  #header-container #navi-in > ul > li > a:hover {
    background: transparent !important;
  }

  /* ========================================
     青い下線

     scaleXではなくwidthで伸ばすことで、
     アニメーション終端のちらつきを防ぐ。
  ======================================== */

  #header-container #navi-in > ul > li > a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2.5px;

    background: #276fdb;

    pointer-events: none;

    transition:
      width .30s ease-out;
  }

  /* ========================================
     hover
  ======================================== */

  /*
   * li側でhover判定することで、
   * 文字そのものだけでなく、
   * 文字左右の余白部分でも反応する。
   */
  #header-container #navi-in > ul > li:hover > a {
    color: #276fdb !important;
  }

  /*
   * 左 → 右へ青線が伸びる
   */
  #header-container #navi-in > ul > li:hover > a::after {
    width: 100%;
  }

  /* ========================================
     現在表示中ページ

     現在ページだからといって、
     青文字・青線を常時表示しない。
  ======================================== */

  #header-container #navi-in > ul > li.current-menu-item > a,
  #header-container #navi-in > ul > li.current-menu-ancestor > a,
  #header-container #navi-in > ul > li.current_page_item > a,
  #header-container #navi-in > ul > li.current_page_ancestor > a {
    color: #111 !important;
    background: transparent !important;
  }

  #header-container #navi-in > ul > li.current-menu-item > a::after,
  #header-container #navi-in > ul > li.current-menu-ancestor > a::after,
  #header-container #navi-in > ul > li.current_page_item > a::after,
  #header-container #navi-in > ul > li.current_page_ancestor > a::after {
    width: 0;
  }

  /* ========================================
     現在表示中ページでも
     hover時だけ通常メニューと同じ動作
  ======================================== */

  #header-container #navi-in > ul > li.current-menu-item:hover > a,
  #header-container #navi-in > ul > li.current-menu-ancestor:hover > a,
  #header-container #navi-in > ul > li.current_page_item:hover > a,
  #header-container #navi-in > ul > li.current_page_ancestor:hover > a {
    color: #276fdb !important;
  }

  #header-container #navi-in > ul > li.current-menu-item:hover > a::after,
  #header-container #navi-in > ul > li.current-menu-ancestor:hover > a::after,
  #header-container #navi-in > ul > li.current_page_item:hover > a::after,
  #header-container #navi-in > ul > li.current_page_ancestor:hover > a::after {
    width: 100%;
  }
}

/************************************
** スマホ：ハンバーガーアイコン安定化
** アイコンフォントを使わずCSSで三本線を描画
************************************/

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

  .mobile-menu-buttons .menu-icon,
  .mobile-header-menu-buttons .menu-icon {
    display: block;

    width: 28px;
    height: 22px;

    margin: 0;
    padding: 0;

    font-size: 0;
    line-height: 1;

    background:
      linear-gradient(
        to bottom,
        #333 0,
        #333 3px,
        transparent 3px,
        transparent 9px,
        #333 9px,
        #333 12px,
        transparent 12px,
        transparent 18px,
        #333 18px,
        #333 21px,
        transparent 21px
      );

    border: none;
    box-shadow: none;
  }

  /* Font Awesome等の元アイコンを消す */
  .mobile-menu-buttons .menu-icon::before,
  .mobile-menu-buttons .menu-icon::after,
  .mobile-header-menu-buttons .menu-icon::before,
  .mobile-header-menu-buttons .menu-icon::after {
    content: none !important;
    display: none !important;
  }

  /* 中にFont Awesome要素が入っている場合も非表示 */
  .mobile-menu-buttons .menu-icon > *,
  .mobile-header-menu-buttons .menu-icon > * {
    display: none !important;
  }
}