@charset "UTF-8";
/*
Theme Name: のれまとめ
*/


/************************************
** 全体に関わるcss
************************************/

/*
base setting
------------------------------*/
* {box-sizing: border-box;}

html {
  min-height: 100vh;
  font-size: 62.5%;
  margin: 0;
  padding: 0;
	overscroll-behavior: none;
}

body {overscroll-behavior: none;
  min-height: 100vh;
  color: #ccc;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
	background: #000 !important;
    z-index: -2;
    position: relative;
}

body::before {
  background: url(https://ykgnmyc.cloudfree.jp/wp-content/uploads/main_bg.jpg) center / cover no-repeat #000;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
	height: 100dvh;
}

#container {
  min-height: 100dvh;
  width: 100%;
  margin: 0 auto;
    position: relative;padding-bottom: env(safe-area-inset-bottom);
}

.content {
  min-height: 100dvh;
  width: 100%;
  margin-top: 2rem;
  margin: 2rem auto;
  padding: 8rem 10rem;
  min-height: calc(100vh - 4rem);
}

.main {
  border-radius: 1rem;
  position: relative;
  background: rgb(0, 0, 0, 0.75);
  padding: 4rem 3rem;
  z-index: 0;
  margin-bottom: 5rem;
}

.entry-content,
p {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #fff;
}

.sp {display: none;}

input[type=search] {background: rgb(255, 255, 255, 0.3);}


/************************************
** 見出し
************************************/
h1, h2, h3, h4 {
  clear: both;
  font-weight: bold;
}

h1 {
  font-size: 2.6rem;
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #666;
}

.ttl-box:after {
  content: "";
  border-bottom: 0.2rem solid #ffffff50;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

h2 {
    color: #ddd;
    font-size: 1.8rem;
    background: #ffffff30;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    margin: 3.5rem 0 1rem 0;
    font-weight: bold;
}

h2 img {width: 2.4rem;
    height: auto;
    vertical-align: middle;}

h3 {
  font-size: 1.8rem;
  position: relative;
  padding: 0.3rem 0.3rem 1rem;
  margin: 4rem 0 1rem 0;
  border-bottom: 0.2rem solid #ffffff35;
}

h4 {font-size: 1.4rem;}

/************************************
** link color
************************************/
a {
  transition: all 0.5s ease 0s;
  overflow: hidden;
  outline: none;
  color: #fff;}
a:hover {
  transition: all 0.3s ease;
  color: #ccc !important;}
a:link {color: #fff;}
a:hover, a:active, a:focus {color: #eee;}

/* target="_blank" のリンクすべてに適用 */
a[target="_blank"]::after {
  font-family: "Font Awesome 6 Free"; /* Font Awesomeを使う指定 */
  font-weight: 900;                /* アイコンを太く */
  content: " \f35d";              /* 外部リンクアイコンのUnicode */
  font-size: 0.9em;                 /* アイコンを少し小さく */
  color: #555;                    /* アイコンの色 */
  margin-left: 4px;                  /* テキストとの間隔 */
  text-decoration: none;             /* 下線を消す */
  display: inline-block;             /* 崩れ防止 */
}


/************************************
** pagination
************************************/
.pagination {
    margin: 24px 0;
    clear: both;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

.page-numbers {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    height: 4rem;
    width: 4rem;
    border: 1px solid #ffffff80;
    margin: 0 4px;
    line-height: 4rem;
    text-align: center;
  border-radius:2rem;}
    
.page-numbers, .pagination .current {color: #ffffff50;}
.pagination .current {
	background: #00000050;
    border: 1px solid #ffffff30;}

/************************************
** その他共通
************************************/

/* HOMEとか戻るとか */
div.navigation-buttons {
  margin: auto;
  width: fit-content;}

div.navigation-buttons a {
  margin: 1rem;
  text-decoration: none;
  font-size: 1.4rem;} 

/* トップへ戻るボタン */
.back-to-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 4rem;
  height: 4rem;
  background-color: rgba(10, 10, 10, 0.9);
  border: 1px solid rgba(201, 189, 169, 0.2); 
  border-radius: 4px;
  color: #c9bda9;
  font-weight: bold;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
}

/* 表示された時 */
.back-to-top.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: #655e5350;
  border-color: #91877850;
  color: #1a1a1a;
  box-shadow: 0 0 15px rgb(243 240 235 / 50%);
  transform: translateY(-5px);
}

.back-to-top span {
  transform: scaleY(0.8);
  display: inline-block;}

table {
	font-size: 1.3rem;
	border-spacing: 0.3rem;}

table caption {
	background:#6d5e5e80;
    vertical-align: middle;
    padding: 0.1rem 1rem 0;
    font-weight: bold;
    border-radius: 0.3rem;
    margin-bottom: 0.5rem;}

table thead {}
table thead th {
  white-space: nowrap;
    background: #62565650;
    border-radius: 0.3rem;
    padding: 0.3rem 1.5rem 0.2rem;
    font-size: 1.2rem;}

table tr {}
table tbody th {
  white-space: nowrap;
	background: #30282850;
    padding: 0.6rem 1.5rem 0.2rem;
    border-radius: 0.3rem;
    vertical-align: top;
    font-size: 1.2rem;}

table tbody td {padding:0.3rem 1.5rem 0.2rem;}

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-container table {
	min-width: 50rem;
	white-space: nowrap;
}

.notes {
	font-size: 1.1rem;
    text-indent: -1em;
    padding-left: 1em;
    line-height: 1.4;}


/************************************
** 吹き出し
************************************/
/* 吹き出し枠 */
.custom-talk-box {
  display: flex;
  align-items: flex-start;
  margin-top: 0.5rem;
  margin-bottom: 0;
  padding: 0;
}

/* アイコン周り */
.custom-talk-icon {
  width: 4.8rem;
  flex-shrink: 0;
  text-align: center;
  margin-right: 1.5rem;
}
.custom-talk-icon img {
  width: 4.8rem;
  height: 4.8rem;
  object-fit: cover;
}

/* 吹き出し本体 */
.custom-talk-bubble {
  opacity: 0.9;
  font-size: 1.6rem;
  position: relative;
  background: rgba(255, 255, 255, 1);
  border-radius: 1.5rem;
  padding: 1rem 1.5rem 0.8rem 1.5rem;
  color: #333;
  min-width: 5rem;
}

/* 吹き出しの三角部分（しっぽ） */
.custom-talk-bubble::before {
  content: "";
  position: absolute;
	top: 1.5rem;
    left: -0.8rem;
  border-style: solid;
  border-width: 0.5rem 1rem 0.5rem 0;
  border-color: transparent rgb(255 255 255) transparent transparent;
}


/************************************
** スクロールバー
************************************/
::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
/* レール部分 */
::-webkit-scrollbar-track {
  background: transparent;
}
/* つまみ部分 */
::-webkit-scrollbar-thumb {
  background: #ffffff30;
  border-radius: 1rem;
}
/* ホバーした時 */
::-webkit-scrollbar-thumb:hover {
  background: #ffffff50;
}
/* 2. Firefox用 */
* {
  scrollbar-width: thin;
  scrollbar-color: #ffffff30 transparent;
}
.wp-block-separator {border-top: 0.1rem solid #888;}



/************************************
** header周り
************************************/
.site-header {
  background-color: #0a0a0a;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 500;
  height: 5rem;
}

.header-in {
  display: flex;
  height: 100%;}

.site-title {  padding: 0;
  width: 100%;
  width: fit-content;
  margin: auto;}

.site-logo {
  width:12rem;
  height:2.2rem;
  display: block;
  margin: auto;
}


/************************************
** Menu
************************************/
/* サイドメニュー枠と動き */
#side-drawer {
  position: fixed;
  top: 0;
  right: -30rem;
  width: 30rem;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  transition: 0.3s ease-in-out;
  padding: 5rem 2rem 2rem;
  overflow-y: auto;
  border-left: 1px solid #666;
}

#side-drawer.open {right: 0;}

.drawer-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9998;
}
.drawer-overlay.open {display: block;}


/* サイドメニューの検索フォーム調整 */
.side-content .searchform div {
    position: relative;
    display: flex;
    align-items: center;}

.side-nav .searchform input[type="submit"] {
  right: 1rem;}


/* サイドメニューのコンテンツ */
.side-nav h2 {
  border-radius: 5rem;
  padding: 1rem 2rem 0.6rem;
  margin: 1.6rem 0;
  font-size: 1.4rem;
  background: #333;
}



.side-nav ul.side-menu-list {  
  list-style: none;
  margin: 0 0 3rem;
  padding: 0 1rem;
}
.side-nav ul.side-menu-list li {
  list-style: none;
    margin: 0 0 0.5rem 1rem;}
.side-nav ul.side-menu-list a {
  display: inline-block;
  font-size: 1.5rem;
  padding: 0.3rem;
  text-decoration: none;
  line-height: 1.2;
}

.side-nav ul.side-menu-list a:hover {opacity: 0.5;}



/* tab */
.chara-tab-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.3rem;}


.tab_label {
  text-align: center;
  color: #ffffff80;
  font-weight: bold;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  padding: 0.3rem;
  border-radius: 0.5rem 0.5rem 0 0;
  margin: 0;
  background-color: #333;transition: all 0.5s ease 0s;
}
.tab_label::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -4px;
  width: 4px;
  height: 1px;
  background: #333;
}
.tab_label:last-of-type::after {display: none;}

.chara-tab-container input:checked + .tab_label {
  color: #fff;
  background: none;
  border: 1px solid #333;
  border-bottom: none;border-bottom-color: transparent;
}
.chara-tab-container ul.side-menu-chara a:hover,
.tab_label:hover {opacity: 0.5;}

.tab_content {
  flex: 100%;
  display: none;
  overflow: hidden;}

input[name="tab_switch"] {display: none;}
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content,
#tab04:checked ~ #tab04_content {display: block;}

.tab_content{
  position: relative;
  animation: fadeIn 1s ease;
}


.chara-tab-container ul.side-menu-chara {
border: 1px solid #333;
    border-top: none;
    line-height: 0;
    list-style: none;
    display: flex;
    gap: 1rem 0.4rem;
    flex-wrap: wrap;
    margin: 0;
    padding:1rem 0.5rem;
}

.chara-tab-container ul.side-menu-chara li {width: calc(25% - 3px);}

.chara-tab-container ul.side-menu-chara a {
	text-align:center;
    display: inline-block;
    font-size: 0.8rem;
    text-decoration: none;
    padding: 0.5rem 0.3rem;
    background: #2A2324;
    border-radius: 0.5rem;
    line-height: 1.2;
    width: 100%;
}







/************************************
** Menu icon animation
************************************/
#open-menu {
  position: fixed;
  top: 0.8rem;
  right: 1.5rem;
  cursor: pointer;
  z-index: 9999;
}
body.menu-open .menu-toggle-btn {background: #ffffff20;}

/* ボタンの土台（指定のサイズ） */
.menu-toggle-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000;
  padding: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 2rem;
  transition: all 0.4s ease-in-out;
}



.menu-toggle-btn:hover {background: #ffffff20;}

/* 3本の線の共通スタイル */
.menu-toggle-btn span {
  position: absolute;
  left: 0;
  width: 1.5rem;
  height: 0.1rem;
  background-color: #fff;
  transition: all 0.4s ease-in-out;}

/* 初期位置の計算（19pxの中で均等に配置） */
.menu-toggle-btn span:nth-child(1) {
  top: 1.1rem;
  left: calc(50% - 0.75rem);}

.menu-toggle-btn span:nth-child(2) {
  top: 1.6rem;
  left: calc(50% - 0.75rem);}


.menu-toggle-btn span:nth-child(3) {
  top: 2.1rem;
  left: calc(50% - 0.75rem);}

/* 1本目：中央に移動して1回転＋45度 */
body.menu-open .menu-toggle-btn span:nth-child(1) {transform: translateY(0.5rem) rotate(405deg);}

/* 2本目：透明にして消す */
body.menu-open .menu-toggle-btn span:nth-child(2) {opacity: 0;}

/* 3本目：中央に移動して1回転ー45度 */
body.menu-open .menu-toggle-btn span:nth-child(3) {transform: translateY(-0.5rem) rotate(315deg);}


/************************************
** footer
************************************/
.site-footer {
  padding: 1rem;
  background: rgba(0, 0, 0);
  bottom: 0;
  position: fixed;
  width: 100%;}

#footer {
  width: 100%;
  position: relative;
  bottom: 0;
}

.footer-in {text-align:center;}


/************************************
** index css
************************************/
/* キャラ一覧 */
ul.chara_list {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  padding-left: 0;
}

ul.chara_list li {
  font-size: 1.4rem;
  line-height: 1.4;
  min-height: 4.8rem;
  display: flex;
  align-items: center;
  padding: 1rem;
  margin: 1rem;
  border: 0.1rem solid #ffffff40;
  width: calc((100% / 5) - 2rem);
  border-radius: 1rem;
}

ul.chara_list li div {}
ul.chara_list li a {}
ul.chara_list li img {
  float: left;
  width: 4.8rem;
  height: 4.8rem;
}

/* --- キャラリスト略 --- */

.more-check {display: none;}

.chara_list {
  position: relative;
  max-height: 300px; 
  overflow: hidden;
  transition: max-height 0.5s ease-in-out; 
  -webkit-mask-image: linear-gradient(to bottom, #fff 0%, #fff 60%, #fff0 100%);
  mask-image: linear-gradient(to bottom, #fff 0%, #fff 60%, #fff0 100%);
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 3. チェックが入ったら全表示＆マスク解除 */
.more-check:checked + .chara_list {
  max-height: 8000px;
  -webkit-mask-image: none;
  mask-image: none;
}

.more-label {
  display: block;
  width: 200px;
  margin: 2rem auto;
  padding: 0.8rem;
  text-align: center;
  background: #00000080;
  color: #fff;
  border-radius: 2rem;
  cursor: pointer;
}

.more-label::before {
  content: "もっと見る";
}
.more-check:checked ~ .more-label::before {
  content: "閉じる";
}

/* --- ここまで --- */




/* その他ボタン設定 */
ul.sub_menu {
  padding: 1rem;
  width: 100%;
  list-style: none;
  display: flex;
	gap: 1rem 1rem;
	flex-wrap: wrap;
}

.sub_menu li {width: calc((100% / 4) - 1rem);}
.sub_menu a {font-size: 1.8rem;
  list-style: none;
  text-decoration: none;
  font-weight: bold;
  text-shadow: 0 0 1rem #000;
}

.link-worldview,
.link-love,
.link-q,
.link-ss,
.link-matome,
.link-others {
  height: 10rem;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.link-worldview:hover,
.link-love:hover,
.link-q:hover,
.link-ss:hover,
.link-matome:hover,
.link-others:hover {
  border-radius: 1rem;
  opacity: 0.7;
  transition: all 0.3s ease;
  color: #fff !important;
}

/* 背景画像の設定 */
.link-worldview {
  background-image: url("/wp-content/uploads/muterua.png");
  background-size: cover;
  background-position: center;
}

.link-love {
  background-image: url("/wp-content/uploads/love.png");
  background-size: cover;
  background-position: center;
}

.link-q {
  background-image: url("/wp-content/uploads/interview.png");
  background-size: cover;
  background-position: center;
}

.link-ss {
  background-image: url("/wp-content/uploads/ss.png");
  background-size: cover;
  background-position: center;
}

.link-matome {
  background-image: url("/wp-content/uploads/matome.jpg");
  background-size: cover;
  background-position: center;
}

.link-others {
  background-image: url("/wp-content/uploads/others.png");
  background-size: cover;
  background-position: center;
}

/* CM-link */
.charama_link {
  list-style: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
	gap:1rem 1rem;
}
.charama_link li {
	margin:0;}

.charama_link a {
	width:100%;
  background: rgb(0, 0, 0, 0.4);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-size: 1.4rem;
  display: inline-block;
}



/*誕生日おめでとう*/
.bd-chara-wrapper {
  display: flex;
  align-items: center;
}

/* 吹き出し本体 */
.bd-chara-bubble {
  opacity: 0.9;
  font-size: 1.2rem;
  position: relative;
  background: rgba(255, 255, 255, 1);
  border-radius: 1.5rem;
  padding: 1rem 1.5rem 0.8rem 1.5rem;
  color: #333;
  display: block;width: fit-content;
}

/* 吹き出しの三角部分（しっぽ） */
.bd-chara-bubble::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: -0.8rem;
  border-style: solid;
  border-width: 0.5rem 1rem 0.5rem 0;
  border-color: transparent rgb(255 255 255) transparent transparent;
}

/* アイコン周り */
.bd-chara-icon {
  width: 4.8rem;
  flex-shrink: 0;
  text-align: center;
  margin-right: 1rem; 
}

.bd-chara-icon img {
  width: 4.8rem;
  height: 4.8rem;
  object-fit: cover;
}



/************************************
** お知らせ回り
************************************/

/* お知らせ枠 */
.news-section {}
ul.news-list {
  list-style: none;
  font-size: 1.4rem;
  line-height: 1.4;
  padding: 1rem;
  max-height: 10rem;
  border: 0.1rem solid #ffffff30;
  overflow: auto;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}
ul.news-list li {margin-bottom: 1rem;}

.news-item {
  display: flex;
  margin-bottom: 1rem;
}

.news-date {
  width: fit-content;
  display: flex;
  background: #00000050;
  padding: 0.5rem 1rem 0.3rem;
  height: 2.3rem;
  line-height: 0;
  justify-content: center;
  align-items: center;
  border-radius: 0.3rem;
}

.news-text {padding: 0 1rem;}

/* 過去のお知らせを見るリンク */
.news-more-btn {
  background: #ffffff20;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  color: #ffffff95;
  margin-left: auto;
  display: block;
  cursor: pointer;
  border-radius: 0.5rem;
  line-height: 1;
}

/* ポップオーバーの見た目 */
.pop-header {display: flex;}

.pop-header h3 {
  background: rgb(0, 0, 0, 0.5);
  color: #ddd;
  font-size: 1.4rem;
  padding: 1rem 1rem 0.9rem 1.4rem;
  border-radius: 0.5rem;
  margin: 0 1.5rem 1.5rem 0;
  width: 100%;
  border: none;
}

ul.news-list-all {
  line-height: 1.4;
  font-size: 1.4rem;
  list-style: none;
  padding: 0 1.5rem;
}

ul.news-list-all li {
  margin-bottom: 1rem;
  display: flex;
}

.close-btn {
  background: #c9bda9;
  width: 3.5rem;
  height: 3.5rem;
  min-width: 3.5rem;
  min-height: 3.5rem;
  font-size: 3rem;
  border-radius: 50%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
  cursor: pointer;
  padding: 0;
	color:#333;
}


.news-pop-content {
  color: #ffffff90;
  margin: auto;
  width: 90%;
  max-width: 80rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 2rem;
  border-radius: 1rem;
  border: none;
  background: #453a28;
}
/* 背景を暗くして浮かび上がらせる */
.news-pop-content::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

/* ポップオーバーが開いている間、背後のスクロールを禁止する */
body:has(:popover-open) {overflow: hidden;}



/************************************
** 新着記事
************************************/

.new-posts-wrapper {}
.new-posts-wrapper .archive-container {
  display: flex;
  flex-wrap: wrap;
	padding:1rem;
  gap: 2rem 1.5rem;
  justify-content: flex-start;
}

.more {
  margin-top: 0.3rem;
  font-size: 70%;
  opacity: 0.7;
  text-decoration: none;
  display: inline-block;
  float: right;
}





/************************************
** 検索
************************************/
.search-area h2 {
  background: rgb(0, 0, 0, 0.5);
  font-size: 1.8rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 3.5rem 0 3rem 0;
}

/* フォーム全体（div）の見た目調整 */
.search-area div {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom:2rem;
}

/* 入力欄のスタイル反映 */
.searchform {width:100%;}
.searchform input[type="text"] {
  border: 0.1rem solid #ffffff90 !important;
  border-radius: 3rem;
  background-color: #00000080;
  color: #ffffff90;
  transition: all 0.3s;
  outline: none;
  padding: 1rem 2rem;
  width: 100%;
}

/* 選択した時のスタイル */
.searchform input[type="text"]:focus {
  border-color: #ffffff;
  box-shadow: 0 0 1rem #ffffff80;
  background-color: #000000a0;
}

/* プレースホルダーの色 */
.searchform input[type="text"]::placeholder {color: #ffffff80;}

/* 検索ボタンのスタイル */
.searchform input[type="submit"] {
  position: absolute;
  right: 1rem;
  background: none;
  border: none;
  color: #ffffff90;
  cursor: pointer;
}

/************************************
** アーカイブページ
************************************/
.archive-ttl {margin-bottom: 3rem;}

/* アーカイブ・キャラカテゴリ右上の子 */
.archive-icon {
  display: block;
  position: absolute;
  top: 1.5rem;
  right: 1rem;
}

/* アーカイブ・検索結果の枠 */
.archive-wrap,
.search-results-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 1.5rem;
  justify-content: flex-start;
}

/* アーカイブ1記事分 */
.archive-box {
  font-size: 1.2rem;
  line-height: 1.3;
  width: calc(20% - 1.5rem);
}

/* アーカイブのサムネイル */
.post-thumbnail {
  position: relative;
  border-radius: 1rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-bottom: 0.5rem;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}
.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.post-thumbnail:hover img {transform: scale(1.15);}


/*時間*/
.archive-box time { 
  position: absolute;
  font-size: 0.8rem;
  bottom: 0.5rem;
  right: 0.5rem;
  background: #00000050;
  color: #fff;
  padding: 0.3rem 0.5rem 0.2rem;
  border-radius: 0.5rem;
  line-height: 1;
  z-index: 2;
}


/*分類アイコン*/
.archive-box .icon-category {
    display: inline-block;
    background: #00000080;
    padding: 0.2rem 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    vertical-align: 0.1rem;
    border: 0.1rem solid #ffffff50;
    height: 1.8rem;
    word-wrap: normal;
    text-align: center;
    min-width: 4em;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
}



/* アーカイブのアイコンと名前 */
.archive-box .post-info {
  font-size: 1.2rem;
    display: flex;
    align-items: center;
  flex-wrap: wrap;
}

/* アーカイブのキャラアイコン */
.small-chara-icon {
  width: 3rem;
  height: 3rem;
  vertical-align: middle;
} 

/* アーカイブの名前 */
.archive-box .post-info a {
  width:calc(100% - 3.5rem);
  margin-left:0.5rem;}

.archive-box .post-info.no-chara-icon a {
  width:100%;
  margin-left:0.5rem;}


/* 抜粋 */
.archive-excerpt {
  padding-left: 2rem;
  line-height: 1.4;
  font-size: 1rem;
  color: #ffffff85;
  text-indent: -1.2rem;
  margin: 0.3rem 0 0 0;
  }
.archive-excerpt::before {content: "…"}





/************************************
** 基本設定ページcss
************************************/
.ttl-box {
  display: flex;
  width: 100%;
  position: relative;
}

.character-header {}
.name-box {
  width: 100%;
  position: relative;
}


.name-box h1 {border-bottom:none;margin:0;bottom:0;}
p.copy {
  font-size: 1.4rem;
  padding: 0.5rem;
  opacity: 0.6;
  margin: 0.5rem 0 0 0;
}

.view {
  width: auto;
  max-width: 25rem;
  filter: drop-shadow(0rem 0rem 1rem rgba(255, 255, 255, 0.6));
  margin: 1rem;
  float: right;max-height: 30rem;
}

/* spec */
dl.spec, dl.spec-other {
  padding: 3rem 1.5rem 3rem 3rem;
  font-size: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-collapse: separate;
  border-spacing: 1rem;
}
dl.spec-other {
  border-top: 0.1rem solid #cccccc50;
  width: calc(100% - 22.5rem);
}
dl.spec-other.felmina {
  border: none;
}
dl.spec dt, dl.spec dd, dl.spec-other dt, dl.spec-other dd {
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
}
dl.spec dt, dl.spec-other dt {
  width: 10rem;
  margin-right: 0.5rem;
  font-weight: bold;
  background: rgb(255, 255, 255, 0.2);
  text-align: left;
}
dl.spec dd, dl.spec-other dd {
    background: #00000025;
    width: calc(50% - 11rem);
    margin: 0 0.5rem 0.5rem 0;
}
dl.spec dt.name {
  width: 10rem;
}
dl.spec dd.name {
  width: calc(100% - 11rem);
  margin-left: 0;
  margin-right: 0;
}
.character-data {
  width: calc(100% - 22.5rem);
  display: flex;
  flex-wrap: wrap;
}
.character-face {
  margin: 0 0 2rem 2rem;
}
.main_image {
  width: 18.5rem;
  margin: 0;
  border: 0.1rem solid #333;
  border-radius: 1.5rem;
  height: auto;
  float: right;
}


/* ストーリーアコーディオン */
.story-acotext {
  position: relative;
  margin:0;
}
dl.spec-story {
  overflow: hidden;
	clear:both;
}
dl.spec-story > dt {
  clear: both;
  color: #ddd;
  font-size: 1.8rem;
  background: rgb(255, 255, 255, 0.3);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  margin: 3.5rem 0 1rem 0;
  font-weight: bold;
}

.story-inner {
  font-size: 1.4rem;
  height: 6em; /* 3行分 */
  line-height: 1.5;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.story-inner::after {
  content: none;
}

.story-inner.is-open {
  height: auto;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
.story-inner.is-open {
  height: auto; /* 高さを自動にして全部出す */
  overflow: visible;
}
.story-inner.is-open::after {
  opacity: 0; /* 読んでいる最中はグラデ不要 */
}
/* 続きを読むボタン */
.read-more-btn {
  display: block;
  margin: 1rem auto 0;
  padding: .4rem 1.5rem 0.6rem;
  background: #00000050;
  color: #fff;
  border: none;
  border-radius: 5rem;
  cursor: pointer;
  font-size: 1.2rem;
  width: 15rem;
  opacity: 0.5;
  border: 0.1rem solid #cccccc50;
}
/* 補足アコーディオン全体の枠 */
.acotext-unit {
  border: none; /* デフォルトの枠があれば消す */
}
/* 補足アコーディオン */
.acottl {
  font-size: 1.4rem;
  cursor: pointer;
  color: #ccc;
  padding: 0.9rem 1rem 0.7rem 1.5rem;
  border-radius: 0.5rem;
  margin: 2rem 0 1rem 0;
  border: 0.1rem solid #ffffff50;
}
/* 補足の中身 */
.acotext {
  font-size: 1.4rem;
  line-height: 1.8;
  overflow: hidden;
  display: none;
  padding: 1rem;
}
/* detailsが開いているとき */
.acotext-unit[open] .acotext {
  display: block;
  line-height: 1.8;
}

.acotext h3 {
	font-size: 1.5rem;
    position: relative;
    padding: 0;
    margin: 0 0 1rem;
    border-bottom: 0.2rem solid #ffffff35;}


/* 性格 */
.acottl.personality {
  font-size: 1.4rem;
  padding: 0 0 0 1rem;
  margin-bottom: 0.5rem;
  border: none;
  opacity: 0.7;
}
.acotext.personality {
  padding: 0rem 0 0 2.5rem;
  opacity: 0.7;
}
.acotext.personality p {
  font-size: 1.2rem;
  line-height: 1.5;
}
.p-ttl {
  font-size: 1.6rem;
  display: block;
  margin-top: 2rem;
  position: relative;
  margin-bottom: 1.3rem;
}
.p-ttl:after {
  content: "";
  background: linear-gradient(to right, #66666670 50%, rgba(153, 153, 153, 0) 80%);
  height: 0.1rem;
  position: absolute;
  bottom: -0.6rem;
  left: 0.8rem;
  z-index: -2;
  width: calc(100% - 2rem);
}
.p-content {
  font-size: 1.4rem;
  margin-left: 1em;
  display: block;
  margin-bottom: 3rem;
}
/* 関係・まとめ系アコーディオン */
.relation, .matome-box {
  margin: 1rem 0;
}
.relation-box {
  font-size: 1.4rem;
}
p.pt {
  text-indent: -1em;
  margin-left: 1em;
  margin-bottom: 0;
}
p.pt::before {
  content: "◆";
  color: #977;
}
details.relation.pt {
  margin-left: 1em;
}
details.relation.pt .relation-name::before {
  content: "・";
  color: #977;
}
/* summary部分（タイトル）の設定 */
.relation-name, .matome-name {
  color: #fff;
  margin-bottom: 0rem;
  cursor: pointer;
  font-size: 1.4rem;
  position: relative;
  display: inline-block;
  padding-right: 3rem;
  list-style: none;
}
.matome-name {
  display: flex;
  align-items: center;
  width: fit-content;
}
.matome-name div {
  overflow-wrap: break-word;
  word-break: keep-all;
  display: inline-block;
  width: calc(100% - 4.8rem);
  line-height: 1.4;
  margin-left: 1rem;
}
.dashicons, .dashicons-before:before {
  font-size: 1.6rem;
}
h3 .dashicons, .dashicons-before:before {
  font-size: 2rem;
}
/* ブラウザ固有の矢印を消すための記述 */
.relation-name::-webkit-details-marker, .matome-name::-webkit-details-marker {
  display: none;
}
/* 自作の矢印（後ろにつける） */
.relation-name::after, .matome-name::after {
  content: '▼'; /* 好きな記号に変えてOK */
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  transition: transform 0.3s; /* 矢印の回転を滑らかに */
}
/* 開いている時の矢印の向き */
.relation[open] .relation-name::after, .matome-box[open] .matome-name::after {
  transform: translateY(-50%) rotate(180deg);
}
.relation-detail, .matome-detail {
  margin-top: 0.5rem;
  padding: 0 1.5rem;
  font-size: 1.4rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  display: none; /* JS側でスライド制御するならそのままでOK */
  overflow: hidden;
}
.matome-detail {
  margin-top: 0;
  margin-left: 4rem;
}
.matome-box span {
  font-size: 0.8em;
  color: #999;
}
/* open属性がある時の表示維持 */
.relation[open] .relation-detail, .matome-box[open] .matome-detail {
  display: block;
}
/* その他 */
.box {
  font-size: 1.2rem;
  border: 0.1rem solid #555;
  border-radius: 0.5rem;
  background: rgb(0, 0, 0, 0.2);
  padding: 1rem;
  margin: 1rem;
  line-height: 150%;
  color: #999;
}
.box h4 {font-size: 1.4rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #333333;
    padding-bottom: 0.8rem;}

.box h5 {
	font-size: 1.4rem;
    margin-bottom: 1rem;}

.box p {
	color: inherit;
    margin: 0 0 4rem;}
.box .citation {
	width: fit-content;
    font-size: 1.2rem;
    border: 1px solid #ffffff30;
    background: #ffffff10;
    padding: 1.5rem;
    margin: 1rem;
    font-style: italic;
   font-family: "Zen Maru Gothic", sans-serif;}

.box p:last-child {margin-bottom:0;}

/************************************
** ミニキャラ台詞
************************************/
.mini-chara {
  position: relative;
  top: -1rem;
  z-index: 9999;
}

#chara-comment {
  position: absolute !important;
  top: 0.5rem !important;
  right: 6rem !important;
  white-space: nowrap !important;
  background: rgba(255, 255, 255, 1) !important;
  border-radius: 1.5rem;
  padding: 1rem 1.5rem 0.8rem 1.5rem;
  z-index: 999999 !important;
  font-size: 1.2rem;
  color: #333;
  min-width: 5rem;
  transform: translateZ(0);
  /* --- ふわっとさせるための設定（ここが重要！） --- */
  display: block !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}


#chara-comment.is-visible {
  opacity: 1 !important;
  pointer-events: auto;
}

#chara-comment::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  right: -0.8rem;
  left: auto;
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 1rem;
  border-color: transparent transparent transparent rgb(255, 255, 255);
}

.top_icon {
  display: block;
  margin: 0;
  width: 4.8rem;
  height: 4.8rem;
  position: relative;
  top: 0;
  right: 0;
}



/************************************
** SS系ページ
************************************/
p.connection {
  font-size: 1.2rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  background: rgb(255, 255, 255, 0.1);
  padding: 0.5rem 1rem;
  margin-top: 1rem;
}

/* SSページのみ行間広げる */
.type-ss {
  line-height: 2;
  font-size: 1.4rem;
}


/************************************
** 質問系ページ
************************************/
/* QA枠全体 */
.questions-list {}

/* QA 1枠 */
.q-and-a-unit {
  margin-bottom: 3rem;
}

/*Q枠*/
.q-title-band {
  margin: 3.5rem 0 2rem 0;
  color: #ddd;
  font-size: 1.8rem;
  background: rgb(255, 255, 255, 0.3);
  padding: 1rem;
  border-radius: 0.5rem;
}
.content-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* A枠 */
.a-content-wrap {display: flex;}
.a-content-wrap .q_icon {
  width: 4.8rem;
  height: 4.8rem;
}

.speech-bubble {
  position: relative;
  width: fit-content;
  height: auto;
  background: rgba(255, 255, 255, .8);
  padding: 1rem 2rem 0.8rem 1.8rem;
  text-align: left;
  color: #333333;
  font-size: 1.4rem;
  border-radius: 1rem;
  margin: 0 0 0 2rem;
}

.speech-bubble::before {
  border: solid transparent;
  content: '';
  position: absolute;
  border-top-width: 0.7rem;
  border-bottom-width: 0.7rem;
  border-right-width: 1.7rem;
  border-right-color: rgba(255, 255, 255, .8);
  right: 100%;
  top: 1.5rem;
}



/************************************
** ムテルア設定
************************************/
img.muterua_img {
	display:block;
    border-radius: 1rem;
	width: 100%;
	max-width: 80rem;
    height: auto;
	margin:auto;}

img.muterua-place {
	display:block;
	width: 35%;
	max-width: 40rem;
    height: auto;
    float: right;
    margin-left: 2rem;
    border-radius: 1rem;
	margin:auto;}

img.muterua-family-tree_img {
	display:block;
    border-radius: 1rem;
	width: 80%;
	max-width: 80rem;
    height: auto;
	margin:4rem auto 8rem;
}

/* 騎士団ボタン設定 */
ul.knights_link {
  padding: 1rem;
  width: 100%;
  list-style: none;
  display: flex;
	gap: 1rem 1rem;
	flex-wrap: wrap;
}

.knights_link li {width: calc((100% / 3) - 1rem);}
.knights_link a {font-size: 1.8rem;
  list-style: none;
  text-decoration: none;
  font-weight: bold;
  text-shadow: 0 0 1rem #000;
}

.holy-knights,
.royal-guards,
.mage-knights,
.queens-guards,
.gun-knights,
.fairy-knights,
.elder-doctors {
  height: 10rem;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.holy-knights:hover,
.royal-guards:hover,
.mage-knights:hover,
.queens-guards:hover,
.gun-knights:hover,
.fairy-knights:hover,
.elder-doctors:hover {
  border-radius: 1rem;
  opacity: 0.7;
  transition: all 0.3s ease;
  color: #fff !important;
}

/* 背景画像の設定 */
.holy-knights {
  background-image: url("/wp-content/uploads/holy-knights.png");
  background-size: cover;
  background-position: center;
}
.royal-guards {
  background-image: url("/wp-content/uploads/royal-guards.png");
  background-size: cover;
  background-position: center;
}
.mage-knights {
  background-image: url("/wp-content/uploads/mage-knights.png");
  background-size: cover;
  background-position: center;
}
.queens-guards {
  background-image: url("/wp-content/uploads/queens-guards.png");
  background-size: cover;
  background-position: center;
}
.gun-knights {
  background-image: url("/wp-content/uploads/gun-knights.png");
  background-size: cover;
  background-position: center;
}
.fairy-knights {
  background-image: url("/wp-content/uploads/fairy-knights.png");
  background-size: cover;
  background-position: center;
}
.elder-doctors {
  background-image: url("/wp-content/uploads/elder-doctors.png");
  background-size: cover;
  background-position: center;
}

p.author {font-size: 1.2rem;
	display:block;
    color: #999;
    margin-top: 5rem;
    padding-top: 1rem;
    text-align: right;
    border-top: 1px solid #333;}

span.author {font-size: 1.2rem;
	display:block;
    color: #999;
    margin-top: 1rem;
    padding-top: 0.5rem;
    text-align: right;
    border-top: 1px solid #333;}

/************************************
** 404
************************************/
/* Notfound */
.not-found {width:40%;
  display: block;
  margin: auto;
}

.not-talk {
  margin: auto;
  width: fit-content;}

a.t404 {color:#333;
text-decoration: none;}

a.t404:hover {text-decoration: underline;}

/************************************
** 1023px以下
************************************/
@media screen and (max-width: 1023px) {
  ul.chara_list li {width: calc((100% / 4) - 2rem);}
  .content {padding: 6rem 5rem 5rem;}
  
  .post-thumbnail {border-radius: 0.5rem;}
.knights_link li {width: calc((100% / 3) - 1rem);}

}



/************************************
** 834px以下
************************************/
@media screen and (max-width: 834px) {
  
  ul.chara_list li {width: calc((100% / 3) - 2rem);}
  .content {padding: 5rem 1.5rem 5rem;}
  
  h1 {font-size: 2rem;margin-bottom: 2rem;
    padding-bottom: 1rem;}
  h2,
  dl.spec-story > dt {
    font-size: 1.6rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0.3rem;
    margin: 3rem 0 1rem 0;}
  
  .box {
    font-size: 1.2rem;
    line-height: 1.7;}

.sub_menu li {width: calc((100% / 2) - 1rem);}
  .sub_menu a {font-size: 1.4rem;}
	
	
  /* トップへ戻るボタン */
  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 3rem;
    height: 3rem;
    font-size:1rem;
  }
  
  /* indexキャラ一覧調整 */
  ul.chara_list {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    padding-left: 0;
  }
  
  ul.chara_list li {
    font-size: 1.4rem;
    line-height: 1.4;
    min-height: 4.8rem;
    padding: 1rem;
    margin: 0.5rem;
    width: calc((100% / 3) - 1rem);
  }
  
  /* 基本設定調整 */
  p.copy {text-align: left;}
  
  dl.spec, dl.spec-other {
    padding: 3rem 0rem 3rem 0rem;
    font-size: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-collapse: separate;
    border-spacing: 1rem;
    flex-direction: column-reverse;
    align-content: center;
  }
  .character-data {
    width: 100%;
    display: flex;
    flex-wrap: wrap;}
  
  dl.spec-other {
    border-top: 0.1rem solid #cccccc50;
    width: 100%;
    display: flex;
    flex-direction: row;}

  .character-face {margin: 0 auto 2rem;}
  
  .acottl {font-size: 1.4rem;}
  
  
  /* ミニキャラ台詞調整 */
  .mini-chara {
    position: fixed;
    top: auto;
    bottom: 5rem;
    right: 1.5rem;
  }
  
  body #chara-comment {
    top: -4.5rem !important;
    right: -1rem !important;
    font-size: 1rem !important;
  }
  
  #chara-comment::before {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: auto;
    top: auto;
    right: 2.5rem;
    border-style: solid;
    border-width: 1rem 0.5rem 0 0.5rem;
    border-color: rgb(255, 255, 255) transparent transparent transparent;
  }

.knights_link a {font-size: 1.5rem;}
  
  /* アーカイブページ調整 */
  .archive-box {width: calc((100% - 3rem) / 3);}
  .archive-wrap.chara_prof_archive .archive-box {width: calc((100% - 3rem) / 3);}
  .archive-wrap.chara_prof_archive .archive-box .post-info {font-size: 1.2rem;}
  .post-thumbnail {margin-bottom: 0.5rem;}
  .post-thumbnail a {width:100%;}
  
  /*分類アイコン*/
  .archive-box .icon-category { 
    padding: 0.3rem 0.4rem 0.3rem;
    font-size: 0.9rem;
    border-radius: 0.3rem;height: 1.8rem;
  }
  
  /* 404 */
  .not-found {width:80%;}
}






/************************************
** 480px以下 修正版
************************************/
@media screen and (max-width: 480px) {
  .main { padding: 2rem 1.5rem; }
  .content { padding: 5rem 1rem 5rem; }
  
  h1 { font-size: 2rem; }
  h2, .p-ttl { font-size: 1.4rem; }
  
  /* お知らせ調整 */
  .news-item, .news-list-all li { flex-direction: column; }
  .news-date { margin-bottom: 0.5rem; }
  ul.news-list-all, .news-text { padding: 0; }
  
  /* index キャラ一覧調整 */
  ul.chara_list {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    padding-left: 0;
  }
  ul.chara_list li {
    font-size: 1.2rem;
    line-height: 1.4;
    min-height: 4.8rem;
    padding: 1rem 1rem 0.5rem 0.3rem;
    margin: 0.5rem;
    width: calc((100% / 2) - 1rem);
  }
  ul.chara_list li img {
    float: left;
    width: 3.6rem;
    height: 3.6rem;
  }
  
  /* その他ボタン調整 */
  ul.sub_menu {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .sub_menu li {
    width: calc(50% - 1rem);
  }
  .sub_menu a { font-size: 1.2rem; }
  .link-worldview,.link-love,.link-q,.link-ss,.link-matome,.link-others { height: 5rem; }
  
  /* CM-link */
  .charama_link { padding: 0 !important; }
  .charama_link a {
    background: rgb(0, 0, 0, 0.4);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-size: 1.4rem;
  }
  
	
table {
	font-size: 1.2rem;
	line-height:1.5;}

table caption {
    padding: 0.1rem 1rem 0;
    margin-bottom: 0.5rem;}

table thead th {
    padding: 0.3rem 1rem 0.2rem;
    font-size: 1.1rem;}

table tbody th {
    padding: 0.5rem 1rem 0.3rem;
    font-size: 1.1rem;}

table tbody td {padding:0.4rem 1rem 0.3rem;}

	li {font-size: 1.2rem;}

.notes {
	font-size: 1rem;
    line-height: 1.3;}
	
  /* 基本設定ページ最適化 */
  dl.spec-story > dt { font-size: 1.4rem; }
  .acottl { font-size: 1.3rem; }
	.acotext {font-size: 1.2rem;line-height: 1.7;}
	
  dl.spec dt.name { width: 10rem; }
  dl.spec dd.name, dl.spec dd, dl.spec-other dd {
    width: calc(100% - 10.5rem);
    margin-left: 0;
    margin-right: 0;
  }
  dl.spec dt, dl.spec-other dt { margin-right: 0.5rem; }
  .view {
    width: auto;
    max-width: 14rem;
    margin: auto;
    float: right;
    display: block;
  }
  p, .p-content, .relation-name, .story-inner, .relation-detail, .relation-box,.acotext, .acotext-unit[open] .acotext {
    font-size: 1.2rem;
    line-height: 1.7;
  }

  /* フォントサイズ調整 */
  .custom-talk-bubble, .q-title-band { font-size: 1.4rem; }
  
  /* アーカイブページ調整 */
  .archive-box { width: calc(50% - 0.8rem); font-size: 1.1rem; }
  .post-thumbnail { margin-bottom: 0.3rem; }
  .archive-wrap.chara_prof_archive .archive-box { width: calc(50% - 0.8rem); }
  .archive-wrap.chara_prof_archive .archive-box .post-info { font-size: 1.2rem; }
  
	

/* ムテルア設定 */
img.muterua_img,
img.muterua-family-tree_img {
	width: 100%;
	max-width: 100%;
    height: auto;}

img.muterua-place {
	width: 100%;
	max-width:100%;
    height: auto;
    float: none;
    margin-left:0;}
	
.knights_link li {width: calc((100% / 2) - 1rem);}
.knights_link a {font-size: 1.2rem;height:7rem;}
	
  /* 404 */
  .not-found { width: 100%; }

  .new-posts-wrapper .archive-box:nth-of-type(5) {
    display: none !important;
  }
}