@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.2.26
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

@font-face {
  font-family: 'dseg7';
  src: url('https://toiletnozoki.com/wp-includes/fonts/DSEG7ClassicMini-Regular.ttf') format('truetype');
}

a {
	text-decoration:none !important;
}

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

/************************************
** ヘッダー v1.2.26（完成モック基準の再設計）
**
** ・既存ロゴ画像・メニュー項目・スマホドロワー・固定ヘッダーの構造は維持
** ・通常ヘッダー用の大型ロゴ / 英字 / キャッチコピー / 黒ナビパネルは
**   #header-container:not(.fixed-header) に限定し、固定ヘッダーへ入り込ませない
** ・「覗き」の色・英字・キャッチコピーの要素は functions.php
**   （wp_header_logo_before_open / after_open）で出力している
** ・v1.2.26: 点状グローではなく、床面ブルーム＋ロゴ実像の鏡面反射へ強化（固定ヘッダーには入れない）
************************************/
:root {
  --tn-header-accent: #e4007f;
  --tn-header-panel: #08080a;
  --tn-header-line: rgba(255, 255, 255, 0.14);
  --tn-header-divider: rgba(255, 255, 255, 0.2);
}

/* ---- ロゴエリア（通常ヘッダー） ---- */
#header-container:not(.fixed-header) #header,
#header-container:not(.fixed-header) #header-in {
  overflow: visible;
}

#header-container:not(.fixed-header) #header-in {
  position: relative;
  padding-top: 46px;
}

#header-container:not(.fixed-header) .tagline:empty {
  display: none;
}

#header-container:not(.fixed-header) .logo-header {
  margin: 0;
  padding: 0;
  line-height: 1;
  text-align: center;
}

#header-container:not(.fixed-header) .site-name-text-link {
  display: inline-block;
  position: relative;
  max-width: 100%;
  padding: 0;
}

/* ロゴ足元の反射。site-name-text は overflow:hidden のため、親リンクへ置く */
#header-container:not(.fixed-header) .site-name-text-link::before,
#header-container:not(.fixed-header) .site-name-text-link::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* 床へ横に広がるブルーム。点光源ではなく、ロゴ足元の面として見せる */
#header-container:not(.fixed-header) .site-name-text-link::before {
  left: -8px;
  top: 97px;
  width: 150px;
  height: 44px;
  background: radial-gradient(
    ellipse 70% 48% at 38% 18%,
    rgba(228, 0, 127, 0.62) 0%,
    rgba(228, 0, 127, 0.34) 26%,
    rgba(228, 0, 127, 0.13) 52%,
    rgba(228, 0, 127, 0) 78%
  );
  filter: blur(9px);
}

/* logo.png の下半分を反転して、床面へ薄く映り込ませる */
#header-container:not(.fixed-header) .site-name-text-link::after {
  left: 0;
  top: 103px;
  width: 108px;
  height: 54px;
  background-image: url(https://toiletnozoki.com/wp-content/uploads/logo.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 108px 108px;
  transform: scaleY(-1);
  opacity: 0.28;
  filter: blur(1.4px) saturate(1.25) brightness(1.05);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.18) 24%,
    rgba(0, 0, 0, 0.58) 62%,
    rgba(0, 0, 0, 0.88) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.18) 24%,
    rgba(0, 0, 0, 0.58) 62%,
    rgba(0, 0, 0, 0.88) 100%
  );
}

#header-container:not(.fixed-header) .site-name-text {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 108px;
  padding-left: 124px;
  overflow: hidden;
  font-size: 4.2rem;
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #fff;
  background-image: url(https://toiletnozoki.com/wp-content/uploads/logo.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 108px 108px;
}

.site-name-text .site-name-accent {
  color: var(--tn-header-accent);
}

/* 英字サブタイトル: ── TOILET PEEKING GAME MATOME ── */
#header-container:not(.fixed-header) .tn-header-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 100%;
  margin: 10px 0 0;
  padding: 0;
  overflow: hidden;
  color: #909090;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.27em;
  line-height: 1.3;
  white-space: nowrap;
}

#header-container:not(.fixed-header) .tn-header-sub::before,
#header-container:not(.fixed-header) .tn-header-sub::after {
  content: "";
  flex: 0 0 auto;
  width: 64px;
  height: 1px;
  background-color: #6a6a6a;
}

/* 右上キャッチコピー（PCのみ）: ヘッダー中央を基準に、ロゴ右側の空きへ置く */
#header-container:not(.fixed-header) .tn-header-catch {
  position: absolute;
  top: 52px;
  left: calc(50% + 455px);
  margin: 0;
  padding: 0;
  color: var(--tn-header-accent);
  font-size: 1.08rem;
  font-weight: 600;
  font-style: italic;
  font-family: "Hiragino Maru Gothic ProN", "Yu Mincho", "Hiragino Mincho ProN", "Segoe Script", cursive;
  letter-spacing: 0.04em;
  line-height: 1.55;
  white-space: nowrap;
  transform: rotate(-8deg);
  transform-origin: left top;
  pointer-events: none;
}

#header-container:not(.fixed-header) .tn-header-catch .tn-header-catch-line {
  display: block;
  padding-left: 1.6em;
}

/* ---- PCナビ: 横長の1枚黒パネル ---- */
@media screen and (min-width: 1024px) {
  #header-container:not(.fixed-header) #navi {
    padding: 42px 0 36px;
    background-color: transparent;
  }

  /* 横長の1枚パネル。文字幅には縮めない */
  #header-container:not(.fixed-header) #navi .navi-in {
    width: calc(100% - 80px);
    max-width: 1560px;
    margin: 0 auto;
  }

  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    height: 82px;
    margin: 0;
    padding: 0 10px;
    background-color: var(--tn-header-panel);
    border: 1px solid var(--tn-header-line);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li {
    position: relative;
    flex: 1 1 auto;
    width: auto;
    height: auto;
    line-height: normal;
  }

  /* 項目間の細い縦線（セルに見えないよう上下を空ける） */
  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li + li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 50%;
    background-color: var(--tn-header-divider);
    transform: translateY(-50%);
    pointer-events: none;
  }

  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    padding: 0 20px;
    color: #f2f2f2;
    font-size: 1.4rem;
    font-weight: bold;
    background-color: transparent;
  }

  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li > a .caption-wrap {
    position: relative;
    width: auto;
  }

  /* hover / current のピンク下線。文字幅より少し広く、パネル底からは少し浮かせる */
  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li > a .caption-wrap::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: -14px;
    left: -8px;
    height: 4px;
    border-radius: 999px;
    background-color: var(--tn-header-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.18s ease;
    pointer-events: none;
  }

  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li > a:hover .caption-wrap::after,
  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li.current-menu-item > a .caption-wrap::after,
  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li.current_page_item > a .caption-wrap::after,
  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li.current-menu-ancestor > a .caption-wrap::after {
    transform: scaleX(1);
  }
}

/* 1024〜1399px（1366x768 など）: 少し詰める */
@media screen and (min-width: 1024px) and (max-width: 1399px) {
  #header-container:not(.fixed-header) #header-in {
    padding-top: 32px;
  }
  #header-container:not(.fixed-header) .site-name-text {
    min-height: 96px;
    padding-left: 110px;
    font-size: 3.7rem;
    background-size: 96px 96px;
  }
  #header-container:not(.fixed-header) .site-name-text-link::before {
    left: -8px;
    top: 86px;
    width: 132px;
    height: 40px;
  }
  #header-container:not(.fixed-header) .site-name-text-link::after {
    left: 0;
    top: 91px;
    width: 96px;
    height: 48px;
    background-size: 96px 96px;
  }
  #header-container:not(.fixed-header) .tn-header-sub {
    font-size: 0.86rem;
  }
  #header-container:not(.fixed-header) .tn-header-catch {
    top: 44px;
    left: calc(50% + 400px);
    font-size: 0.95rem;
  }
  #header-container:not(.fixed-header) #navi {
    padding: 32px 0 28px;
  }
  #header-container:not(.fixed-header) #navi .navi-in {
    width: calc(100% - 80px);
  }
  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header {
    height: 72px;
    padding: 0 6px;
  }
  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li > a {
    padding: 0 14px;
    font-size: 1.2rem;
  }
  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li > a .caption-wrap::after {
    bottom: -12px;
  }
}

/* 大画面 */
@media screen and (min-width: 2200px) {
  #header-container:not(.fixed-header) #header-in {
    padding-top: 50px;
  }
  #header-container:not(.fixed-header) .site-name-text {
    min-height: 110px;
    padding-left: 126px;
    font-size: 4.3rem;
    background-size: 110px 110px;
  }
  #header-container:not(.fixed-header) .site-name-text-link::before {
    left: -8px;
    top: 100px;
    width: 154px;
    height: 46px;
  }
  #header-container:not(.fixed-header) .site-name-text-link::after {
    left: 0;
    top: 105px;
    width: 110px;
    height: 56px;
    background-size: 110px 110px;
  }
  #header-container:not(.fixed-header) .tn-header-sub {
    margin-top: 12px;
    font-size: 0.95rem;
  }
  #header-container:not(.fixed-header) .tn-header-catch {
    top: 56px;
    left: calc(50% + 470px);
    font-size: 1.12rem;
  }
  #header-container:not(.fixed-header) #navi {
    padding: 44px 0 38px;
  }
  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header {
    height: 82px;
  }
  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li > a {
    padding: 0 24px;
    font-size: 1.4rem;
  }
  #header-container:not(.fixed-header) #navi .navi-in > ul.menu-header > li > a .caption-wrap::after {
    bottom: -14px;
  }
}

/* キャッチコピーは窮屈になる幅では非表示 */
@media screen and (max-width: 1199px) {
  #header-container:not(.fixed-header) .tn-header-catch {
    display: none;
  }
}

/* タブレット〜スマホ: PCナビは Cocoon 側で非表示。ロゴだけ縮めて1行に収める */
@media screen and (max-width: 1023px) {
  #header-container:not(.fixed-header) #header-in {
    padding-top: 28px;
  }
  #header-container:not(.fixed-header) .logo-header {
    padding-bottom: 22px;
  }
  #header-container:not(.fixed-header) .site-name-text {
    min-height: 80px;
    padding-left: 94px;
    font-size: 3rem;
    background-size: 80px 80px;
  }
  #header-container:not(.fixed-header) .site-name-text-link::before,
  #header-container:not(.fixed-header) .site-name-text-link::after {
    display: none;
  }
}

@media screen and (max-width: 834px) {
  #header-container:not(.fixed-header) #header-in {
    padding-top: 22px;
  }
  #header-container:not(.fixed-header) .logo-header {
    padding-bottom: 16px;
  }
  #header-container:not(.fixed-header) .site-name-text {
    min-height: 64px;
    padding-left: 76px;
    font-size: clamp(1.4rem, 6.8vw, 2.4rem);
    background-size: 64px 64px;
  }
  #header-container:not(.fixed-header) .tn-header-sub,
  #header-container:not(.fixed-header) .tn-header-catch {
    display: none;
  }
}

@media screen and (max-width: 360px) {
  #header-container:not(.fixed-header) .site-name-text {
    min-height: 52px;
    padding-left: 58px;
    font-size: clamp(1.25rem, 5.6vw, 1.8rem);
    background-size: 48px 48px;
    background-position: left center;
  }
}

/* ---- 固定ヘッダー（スクロール後のコンパクト表示）: 従来どおり ---- */
.fixed-header {
	padding-right: 100px;
}

.fixed-header .site-name-text {
    font-size: 3rem;
    font-weight: bold;
    background-image: url(https://toiletnozoki.com/wp-content/uploads/logo.png);
    background-position: left 16px center;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    padding-left: 50px;
    padding-top: 10px;
}

.fixed-header .tn-header-sub,
.fixed-header .tn-header-catch,
.fixed-header .site-name-text-link::before,
.fixed-header .site-name-text-link::after {
    display: none;
}

/* グローバルメニュー*/
.fixed-header .navi-in > ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
}

.navi {
    font-weight: bold;
}

.navi-in a:hover {
    background-color: transparent !important;
    /*transition: all 0.3s ease-in-out;*/
    color: var(--cocoon-text-color);
}

.navi-in a {
    position: relative;
    color: var(--cocoon-text-color);
    text-decoration: none;
    display: block;
    font-size: 1.3rem;
    /*transition: all 0.3s ease-in-out;*/
}

.fixed-header .navi-in a {
    font-size: 0.9rem;
	padding-top: 1.0rem;
}

#menu-item-669 a {
	color: #e4007f !important;
}

.menu-item-669 a {
	color: #e4007f !important;
}

body.tn-search-sale-on #menu-item-669 a,
body.tn-search-sale-on .menu-item-669 a {
	color: #ff7eb9 !important;
}

/* カルーセル */
.carousel-in {
    background-color: #000000;
}

.carousel-entry-card-thumb img {
  filter: grayscale(100%) opacity(0.3);
  /*transition: .6s ease-in-out;*/
}

.carousel-entry-card-thumb img:hover  {
  filter: grayscale(0%);
  /*transition: .6s ease-in-out;*/
}

/* エントリーカード */
.entry-card-title {
    font-size: 2rem;
	color:#c8c8c8;
}

.entry-card-thumb img  {
	filter: brightness(20%) blur(5px);
	transition: .6s ease-in-out;
}

.entry-card-thumb img:hover {
	filter: none;
	transition: .6s ease-in-out;
}

.post-date-thumb {
    position: absolute;
    right: 10px;
    bottom: 20px;
    text-align: right;
	color: chocolate;
	font-family: dseg7;
	letter-spacing: 2px;
	opacity: 0.7;
}

figure .cat-label {
	display:none;
}

.cat-link {
    background-color: transparent;
}

.tag-link {
	color: #e4007f;
    border: 0px solid var(--cocoon-x-pallid-text-color);
	font-size: 1.2rem;
}

.cat-link {
    background-color: transparent;
    color: #e4007f;
	font-size: 1.2rem;
}

.entry-card-snippet {
	color: gray;
}

a.entry-card-wrap.a-wrap.border-element.cf {
    padding-bottom: 2em;
}

/* サイドバー */
.tagcloud a {
    border: 0px solid var(--cocoon-x-thin-color);
	color: #e4007f;
}

.widget_categories ul li a {
    color: #e4007f;
}

/* main背景色 */
.main{
background-color: transparent;
}

.a-wrap{ /* インデックスページの記事背景色 */
	background-color: transparent;
	padding:none;
}

/* 次のページへ消す*/
.pagination-next {
	display: none;
}

.page-numbers {
    color: var(--cocoon-text-color);
    text-decoration: none;
    display: inline-block;
    height: 46px;
    width: 46px;
    border: 0px solid var(--cocoon-thin-color);
    margin: 0 4px;
    line-height: 46px;
    text-align: center;
    border-radius: var(--cocoon-basic-border-radius);
}

.page-numbers.dots {
    opacity: 0.6;
    background-color: transparent;
}

.pagination .current {
    background-color: #979797;
    color: #000000;
}

.a-wrap:hover,
.pagination a:hover,
.pagination-next-link:hover,
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.pager-links a:hover span,
.cat-link:hover,
.tag-link:hover,
.tagcloud a:hover {
  background-color: transparent; 
}

.sidebar,
.archive .sidebar {
	background: transparent;
}

.sidebar h2, .sidebar h3 {
    background-color: transparent;
}

.sidebar :hover {
	background: transparent;
}

.widget_block ul li a:hover {
	background: transparent;
}

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, .readmore {
    padding: 11px;
    border: 1px solid #3c3b3b;
    border-radius: var(--cocoon-basic-border-radius);
    font-size: inherit;
    width: 100%;
    color: whitesmoke;
    background-color: #2d2d2d;
}

.search-edit {
    padding: 11px;
    border: 1px solid #0a0a0a !important;
    border-radius: var(--cocoon-basic-border-radius);
    font-size: inherit;
    width: 100%;
    color: whitesmoke;
    background-color: #060606 !important;
}

input[type=submit] {
    -webkit-appearance: none;
    border: 0px solid var(--cocoon-thin-color);
    background-color: #2d2d2d;
    color: #fff;
}

/* フッター */
.copyright {
	color:rgb(150,150,150);
}

/* 記事 */
.entry-title, .archive-title {
    font-size: 3rem;
    margin: 16px 0;
    line-height: 1.3;
}

.entry-content img.alignnone  {
	width:90%;
}

.related-entry-card-title {
	font-weight:normal;
}

/*特集 */
table th {
    background-color: #000;
}

table:not(.has-border-color) :where(th, td) {
    background-color: #000;
}

table:not(.has-border-color) :where(th, td) {
    border: 0px solid var(--cocoon-x-thin-color);
}

/* ブログカード */
.blogcard {
    border-color: #232323;
}



/* アバター */
.avatar {
	filter: opacity(0.2);
}

/* サイドバー */
.internalLink {
	text-decoration: none;
	font-size: x-large;
	white-space:nowrap;
}

div:has(.internalLink) {
	padding-bottom:10px;
}

.internalLink:hover {
    opacity: 0.5;
    color: var(--cocoon-white-color);
}

.internalLinkUnit {
	text-decoration: none;
	font-size: small;
	white-space:nowrap;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* モバイル */
.mobile-menu-buttons {
	background-color: #000000;
	box-shadow: 0 0 0px;
	color: #8b8b8b;
}

.mobile-menu-buttons .menu-button > a {
    color: #8b8b8b;
}

#navi-menu-input:checked ~ #navi-menu-content, #sidebar-menu-input:checked ~ #sidebar-menu-content, #search-menu-input:checked ~ #search-menu-content, #share-menu-input:checked ~ #share-menu-content, #follow-menu-input:checked ~ #follow-menu-content {
    transition:none;
    -webkit-transform: none;
    transform: none;
	background-color:black;
}

.not-found {
	filter:invert(100%);
}

/* ランキング */
.widget-entry-cards.ranking-visible .card-thumb::before {
    content: counter(p-rank);
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px;
    width: 12px;
    height: 12px;
    line-height: 12px;
    background-color: #666;
    color: #fff;
    opacity: 0.9;
    text-align: center;
    font-size: 9px;
    z-index: 1;
}


/* ギャラリー */
.gallery-item img {
    border: 0px !important;
}

/* 管理者パネル */
.admin-panel {
    background-color: #000;
}

.admin-pv, .admin-edit, .admin-amp, .admin-checks, .admin-cresponsive {
    border: 0px;
}

.admin-pv .admin-pv-by {
    background-color: #000;
	color: #000;
}

/* WP ULike */
.wpulike {
	text-align:right;
}

.carousel {
  height: 250px;
	display:block!important;
	overflow-y:hidden;
}
.carousel-content.cf:not(.slick-initialized) {
    visibility: hidden;
}


.related-entry-card-content, .entry-card-content {
    padding-bottom: 0;
}

.tagcloud a {
   flex:none;	
}

.sale {
	color:crimson;
	font-weight:bold;
}

button.simplefavorite-button {
    border: solid 1px #ccc;
    padding: 5px 10px 5px 10px;
    border-radius: 4px;
	display: block;
    margin-left: auto;
	font-size: medium;
    width: 210px;
	background-color: #0a0a0a !important;
	cursor: pointer;
}

.simplefavorite-button.active {
    opacity: 0.9 !important; 
}

li.fav-elem a {
    font-size: xx-large;
}

.menu-icon .fa-star {
	color:#ffca00;
}

.menu-icon .fa-bell {
	color: #e4007f;
}

.post-1504 .date-tags,
.post-1516 .date-tags
{
    display: none;
}

.carousel-entry-card-title.card-title {
    font-size: large;
}

.carousel-entry-card-title {
  margin-bottom: 0.6em;
  font-size: 16px;
  margin-top: 0px;
  height: 3.2em;
  overflow: hidden;
}

button.readmore {
	cursor: pointer;
}


/* filter form */

#filter_form input {
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #3c3b3b;
  background: #2d2d2d;
  outline: none;
  filter: none;
  -webkit-appearance: none;
  color: #9b9b9b;
}
/* checkbox */
#filter_form input:focus {
  outline: none;
}

#filter_form input[type=checkbox] {
  //display: inline-block;
  margin-right: 6px;
}
#filter_form input[type=checkbox] + label{
  display: inline-block;
  margin-right: 12px;
  cursor: pointer;
  line-height: 1.5px;
  position: relative;
  left: 0;
}
 
@media (min-width: 1px) {
  .filter_element input[type=checkbox] {
    display: none;
    margin: 0;
  }

  .filter_element input[type=checkbox] + label {
    padding: 2px 0 0 24px;
  }

  .filter_element input[type=checkbox] + label:before {
    content: "";
    display: block;
    margin-top: -10px;
    width: 18px;
    height: 18px;
    background-color: #2d2d2d;
    position: absolute;
    top: 50%;
    left: 0;
  }

  .filter_element input[type=checkbox] + label:before {
    border: 1px solid #3c3b3b;/* 注)secretコメントチェックボックスボーダー色 */
    border-radius: 2px;
  }

  .filter_element input[type=checkbox]:checked + label:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
  }

  .filter_element input[type=checkbox]:checked + label:after{
    margin-top: -4px;
    width: 8px;
    height: 8px;
    background: rgb(51,51,51);/* 注)secretコメントチェックマーク色(1/3) */
    border-radius: 0px;
    top: 3px;
    left: 5px;
  }

  .filter_element input[type=checkbox]:checked + label:after {
    margin-top: -8px;
    width: 13px;
    height: 8px;
    border-bottom: 3px solid rgb(153, 153, 153);/* 注)secretコメントチェックマーク色(2/3) */
    border-left: 3px solid rgb(153, 153, 153);/* 注)secretコメントチェックマーク色(3/3) */
    left: 3px;
    transform: rotate(-45deg);
  }

}


a#favranking {
	color: #ffca00;
}

li.fav-elem a.tag-link-favs {
	font-size: large;
}


.post_count {
	font-size:xx-large;
	margin-right:0px;
	color:#e4007f;
}

/* wpulike*/
.wpulike-default button.wp_ulike_btn {
    color: #616161;
	background-color: transparent;
    min-height: 30px;
    min-width: 50px;
}

.wpulike-default .count-box {
    position: relative;
    border-radius: .25em;
    font-size: 20px;
    text-decoration: none;
	margin-top: 5px;
    margin-left: -3px;
    line-height: 30px;
    display: inline-block;
    padding: 0 0px;
	box-shadow: none !important;
    color: #c8c8c8;
    vertical-align: middle;
    text-align: center;
	background: transparent;
}

.wpulike-default .count-box:before {
    content: '';
    position: absolute;
    border: 1px solid transparent;
    /*border-bottom-color: #cbcbcb;*/
    left: -5px;
    top: 50%;
    /*border-left-color: #cbcbcb;*/
    transform: rotate(45deg) translatey(-50%);
    width: 5px;
    height: 5px;
    margin: 0;
    box-sizing: content-box;
	background:transparent;
}

.wpulike-default .wp_ulike_put_image.wp_ulike_btn_is_active:after {
    filter: brightness(0) saturate(100%) invert(100%) sepia(22%) saturate(7026%) hue-rotate(63deg) brightness(98%) contrast(77%);
}

.wpulike-default .wp_ulike_put_image:after {
    content: '';
    display: block;
    /* background: url(../img/svg/likeex.svg) no-repeat; */
    background-size: contain;
    width: 32px;
    height: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgb(200,200,200)" aria-hidden="true" data-slot="icon" class="h-6 w-6 text-green-800 dark:text-green-400"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z"></path></svg>') !important;
}

.wpulike-default button.wp_ulike_btn:focus, .wpulike-default button.wp_ulike_btn:hover {
    filter: brightness(0) saturate(100%) invert(100%) sepia(22%) saturate(7026%) hue-rotate(63deg) brightness(98%) contrast(77%);
    background:transparent;
	text-decoration: none;
}

/* Simple GA4 Ranking */
.ranking-img {
  width:250px;
  height:100px;
  /*width: 100px;*/
  /*height: 100px;*/
  /*float: left;*/
  object-fit:cover;
  margin: 3px 15px 10px 0;
}
li.sga-ranking-list {
  line-height: 1.2;
  margin-bottom: 0.3em;
  padding: 8px 0 5px 0;
  word-wrap: break-word;
  float: none;
  clear: both;
}

.sga-ranking {
  counter-reset: rank;
}

.sga-ranking li {
  position: relative;
}

.sga-ranking li::before { /* ラベルと順位のスタイル */
  counter-increment: rank;
  content: counter(rank) ;
  position: absolute;
  padding: 8px 14px;
  font-size: 1.0em;
  color: #fff; /* 文字色 */
  background: rgba(30,30,30,0.8); /* 背景色 */
}

.sga-ranking li {
    list-style-type: none;
}

.sga-ranking-title {
	display:flex;
}

.sga-ranking .sga-ranking-title { /* タイトルのスタイル */
  position: absolute;
  bottom: 0;
  width: 250px; /* 画像の横幅に合わせる*/
  padding: 3px;
  color: #fff;
  background: rgba(0,0,0,0.8);
  font-size: smaller;
}

.sga-ranking li:nth-child(1)::before {
    background: #cca11f;
	opacity: 0.8;
}

.sga-ranking li:nth-child(2)::before {
    background: #7e7e7e;
	opacity: 0.8;
}

.sga-ranking li:nth-child(3)::before {
    background: #b37036;
	opacity: 0.8;
}

blockquote {
    background-color: #000000 !important;
    border: 1px solid #000000 !important;
    padding: 1.4em 1.8em;
    position: relative;
}


/* ranking */
.btn-l, .ranking-item-link-buttons a, .btn-wrap.btn-wrap-l > a {
    padding: 7px 10px;
    font-size: 12px;
    display: initial;
    justify-content: center;
    align-items: center;
}

.btn-blue, .ranking-item-detail a, .btn-wrap.btn-wrap-blue > a {
    background-color: #212121;
}

.btn-l::after, .ranking-item-link-buttons a::after, .btn-wrap.btn-wrap-l > a::after {
    content: "\f105";
    position: absolute;
    right: 0;
    font-size: 20px;
	display: none;
}

.ranking-item-link-buttons {
    padding-top: 10px;
}

.ranking-item, .timeline-box {
    padding: 3%;
    border: 0px solid var(--cocoon-basic-border-color);
    border-radius: var(--cocoon-basic-border-radius);
}

/* download */
.w3eden .card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #000;
    background-clip: border-box;
    border: 0px solid #e5e5e5;
    border-radius: var(--border-radius-regular);
}

.article .media-body h3 {
    border-left: 0px solid var(--cocoon-middle-thickness-color);
    border-right: 0px solid var(--cocoon-thin-color);
    border-top: 0px solid var(--cocoon-thin-color);
    border-bottom: 0px solid var(--cocoon-thin-color);
    font-size: 22px;
    /*padding: 12px 20px;*/
}

.package-title a {
    color: #c8c8c8;
    font-weight: normal;
    font-size: inherit;
	pointer-events: none;
}


/* アコーディオン */
.toggle-button {
    display: block;
    cursor: pointer;
    padding: 3px 10px;
    background-color: #1c1c1c;
    border-width: 0px;
    border-style: solid;
    border-color: #272727;
    text-align: center;
    border-radius: var(--cocoon-basic-border-radius);
    position: relative;
    margin: 0;
    color: var(--cocoon-text-color);
}

.toggle-checkbox:checked ~ .toggle-content {
    visibility: visible;
    opacity: 1;
    height: 100%;
    transition: all 0.3s ease-in-out;
    padding: 1em;
    color: var(--cocoon-custom-text-color);
    background-color: var(--cocoon-custom-background-color);
    border-width: 0px;
    border-style: solid;
    border-color: #272727;
    border-top-width: 0;
    border-bottom-left-radius: var(--cocoon-basic-border-radius);
    border-bottom-right-radius: var(--cocoon-basic-border-radius);
}

/************************************
** トップページ 2026（front-top-page のみ）
** PC 検索 / SALE / RANKING / 見出し: 1680px（1500px の約12%）
** PC 記事一覧本体 #list: 1232px（1100px の約12%）
** スマホ（834px以下）は従来密度を維持
**
** 余白ルール
**  1. 大セクション切替  --tn-space-section
**  2. 見出し → 内容     --tn-space-block
**  3. 見出し内部        --tn-space-inner
************************************/
body.front-top-page {
  overflow-x: hidden;
}
body.front-top-page .header-container-in.wrap,
body.front-top-page .carousel-in.wrap,
body.front-top-page .content-in.wrap,
body.front-top-page .footer-in.wrap {
  width: min(1680px, calc(100% - 48px));
  max-width: 1680px;
}
body.front-top-page .content-in {
  display: block;
}
body.front-top-page .main {
  width: 100%;
  margin: 0;
  padding: 0 0 48px;
}
body.front-top-page #sidebar {
  display: none !important;
}
body.front-top-page #list,
body.front-top-page #readmore,
body.front-top-page #tn-search-more,
body.front-top-page .tn-search-status,
body.front-top-page .pagination {
  width: min(1232px, 100%);
  margin-left: auto;
  margin-right: auto;
}
#tn-search-more[hidden],
.tn-search-status[hidden] {
  display: none;
}
.tn-search-status {
  color: #c0392b;
  padding: 12px 0 4px;
  font-size: 14px;
}
.tn-search-status.is-info {
  color: #777;
}
body.front-top-page #list {
  transition: opacity 180ms ease, transform 180ms ease;
}
body.front-top-page #list.tn-list-loading {
  opacity: 0.55;
  pointer-events: none;
}
body.front-top-page #list.tn-list-leaving {
  opacity: 0.85;
  transform: translateY(6px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.front-top-page #list {
    transition: none;
  }
  body.front-top-page #list.tn-list-leaving {
    opacity: 1;
    transform: none;
  }
}
body.front-top-page .carousel {
  height: 280px;
}
body.front-top-page .carousel-entry-card-title {
  font-size: 18px;
  height: 3.6em;
}
body.front-top-page .entry-card-title {
  font-size: 2.25rem;
}
body.front-top-page a.entry-card-wrap.a-wrap.border-element.cf {
  padding-bottom: 2.25em;
}
.tn-empty-result {
  color: #777;
  padding: 24px 0 8px;
}

.tn-home-tools {
  --tn-pink: #e4007f;
  --tn-pink-hot: #ff0080;
  --tn-line: #1a1a1a;
  --tn-line2: #262626;
  --tn-space-section: 36px;
  --tn-space-block: 16px;
  --tn-space-inner: 9px;
  color: #c8c8c8;
  padding: 28px 0 0;
}
.tn-home-tools .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--tn-space-inner);
  color: var(--tn-pink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1;
}
.tn-home-tools .eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--tn-pink);
}
.tn-home-tools .section-heading {
  margin: 0;
  color: #fff;
  font-size: 1.69rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.25;
}
.tn-home-tools .section-copy {
  max-width: 38rem;
  margin: 8px 0 0;
  color: #6a6a6a;
  font-size: 15px;
  line-height: 1.65;
}

.tn-home-tools .search-head { margin-bottom: var(--tn-space-block); }
.tn-home-tools .search-ribbon {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  border-top: 1px solid var(--tn-line2);
  border-bottom: 1px solid var(--tn-line2);
  background: transparent;
}
.tn-home-tools .search-ribbon::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: var(--tn-pink);
}
.tn-home-tools .search-form {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 76px;
  min-width: 0;
  height: 54px;
  margin: 0;
}
.tn-home-tools .search-mark {
  display: grid;
  place-items: center;
  color: var(--tn-pink);
}
.tn-home-tools .search-mark svg { width: 19px; height: 19px; }
.tn-home-tools .search-form input,
.tn-home-tools .search-form input[type=search],
.tn-home-tools .search-form input.search-edit {
  min-width: 0;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 8px 0 0;
  border: 0 !important;
  outline: 0;
  border-radius: 0 !important;
  background: transparent !important;
  color: whitesmoke;
  font-size: 16px;
  filter: none;
  -webkit-appearance: none;
}
.tn-home-tools .search-form input::placeholder { color: #555; }
.tn-home-tools .search-submit,
.tn-home-tools .detail-toggle {
  border: 0;
  border-left: 1px solid var(--tn-line2);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #d0d0d0;
  position: static;
  width: auto;
  height: auto;
  min-height: 100%;
  box-shadow: none;
}
.tn-home-tools .search-submit:hover,
.tn-home-tools .detail-toggle:hover,
.tn-home-tools .detail-toggle.is-open {
  color: #fff;
  background: rgba(228, 0, 127, .06);
}
.tn-home-tools .detail-toggle {
  min-width: 180px;
  padding: 0 30px;
  white-space: nowrap;
}
.tn-home-tools .detail-toggle .plus {
  display: inline-block;
  margin-left: 8px;
  color: var(--tn-pink);
  transition: transform .25s ease;
}
.tn-home-tools .detail-toggle.is-open .plus { transform: rotate(45deg); }
.tn-home-tools .spoiler-toggle {
  display: flex;
  min-width: 220px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 0 20px;
  border-left: 1px solid var(--tn-line2);
  cursor: pointer;
  user-select: none;
}
.tn-home-tools .spoiler-copy {
  display: grid;
  gap: 2px;
  font-size: 14px;
  font-weight: 700;
  color: #d0d0d0;
  line-height: 1.25;
}
.tn-home-tools .spoiler-state {
  color: #6a6a6a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}
.tn-home-tools .spoiler-toggle.is-on .spoiler-copy { color: #fff; }
.tn-home-tools .spoiler-toggle.is-on .spoiler-state { color: var(--tn-pink); }
.tn-home-tools .spoiler-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}
.tn-home-tools .switch {
  width: 36px;
  height: 18px;
  border: 1px solid #3c3b3b;
  background: #141414;
  position: relative;
  flex: 0 0 auto;
}
.tn-home-tools .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #8b8b8b;
  transition: .2s ease;
}
.tn-home-tools .spoiler-toggle input:checked + .switch {
  border-color: var(--tn-pink);
  background: #1a0010;
}
.tn-home-tools .spoiler-toggle input:checked + .switch::after {
  left: 20px;
  background: var(--tn-pink);
}

.tn-home-tools .detail-panel {
  display: none;
  padding: 20px 0 4px;
  border-bottom: 1px solid var(--tn-line);
  background: transparent;
}
.tn-home-tools .detail-panel.is-open { display: block; }
.tn-home-tools .detail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.tn-home-tools .detail-title {
  margin: 0;
  color: #ddd;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
}
.tn-home-tools .detail-note {
  margin: 0;
  color: #555;
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}
.tn-home-tools .detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 32px;
}
.tn-home-tools .detail-group { min-width: 0; }
.tn-home-tools .detail-label {
  margin: 0 0 10px;
  color: #b8b8b8;
  font-size: 12px;
  font-weight: 700;
}
.tn-home-tools .detail-label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--tn-pink);
}
.tn-home-tools .filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tn-home-tools .filter-chip {
  min-height: 36px;
  padding: 5px 12px;
  border: 1px solid #2a2a2a;
  border-radius: 0;
  background: #000;
  color: #8d8d8d;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.3;
}
.tn-home-tools .filter-chip:hover {
  border-color: #3c3b3b;
  color: #c8c8c8;
}
.tn-home-tools .filter-chip.is-on {
  border-color: var(--tn-pink);
  background: rgba(228, 0, 127, .08);
  color: #e8e8e8;
}
.tn-home-tools .filter-chip:disabled,
.tn-home-tools .filter-chip.is-soon {
  cursor: not-allowed;
  opacity: .45;
}
.tn-home-tools .filter-chip .soon {
  margin-left: 5px;
  color: #666;
  font-size: 10px;
}
.tn-home-tools .filter-chip.is-tag-hidden { display: none !important; }
.tn-home-tools .filter-expand-toggle {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.tn-home-tools .filter-year-extra { display: none; }
.tn-home-tools .filter-year-extra.is-on,
.tn-home-tools #filter-years-toggle:checked ~ .filter-year-extra { display: inline-flex; }
.tn-home-tools .filter-years-toggle-label {
  display: inline-flex;
  align-items: center;
}
.tn-home-tools .filter-years-toggle-label .filter-expand-close { display: none; }
.tn-home-tools #filter-years-toggle:checked ~ .filter-years-toggle-label .filter-expand-open { display: none; }
.tn-home-tools #filter-years-toggle:checked ~ .filter-years-toggle-label .filter-expand-close { display: inline; }
.tn-home-tools .detail-input,
.tn-home-tools #filter_form input.detail-input,
.tn-home-tools input.detail-input[type=search] {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 2px !important;
  border: 0 !important;
  border-bottom: 1px solid #333 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: whitesmoke;
  outline: none;
  font-size: 13px;
  filter: none;
}
.tn-home-tools .detail-input:focus { border-bottom-color: var(--tn-pink) !important; }
.tn-home-tools .detail-input::placeholder { color: #555; }
.tn-home-tools .detail-hint {
  margin: 8px 0 0;
  color: #555;
  font-size: 11px;
  line-height: 1.5;
}
.tn-home-tools .tag-hits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.tn-home-tools .tag-hits:empty { display: none; }
.tn-home-tools .more-tags {
  min-height: 28px;
  padding: 3px 9px;
  border: 0;
  border-bottom: 1px solid #333;
  border-radius: 0;
  background: transparent;
  color: #8a8a8a;
  cursor: pointer;
  font-size: 12px;
}
.tn-home-tools .more-tags:hover { color: #fff; border-bottom-color: var(--tn-pink); }
.tn-home-tools .detail-more {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--tn-line);
}
.tn-home-tools .detail-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--tn-line2);
  min-width: 0;
}
/* Detail search count patch version: 1.2.29 */
.tn-home-tools .filter-result-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 16px;
  min-width: 0;
  max-width: 100%;
  color: #8d8d8d;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
}
.tn-home-tools .filter-result-match {
  min-width: 0;
  white-space: nowrap;
}
.tn-home-tools .filter-result-count strong,
.tn-home-tools #filter-match-count {
  color: var(--tn-pink);
  font-size: 1.2em;
  font-weight: 800;
  margin: 0 3px;
}
.tn-home-tools .filter-result-count.is-loading #filter-match-count {
  opacity: .65;
}
.tn-home-tools .filter-result-count.is-error #filter-match-count {
  color: #c0392b;
}
.tn-home-tools .sale-board.is-counts-loading .sale-count {
  opacity: .45;
}
.tn-home-tools .detail-action-buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.tn-home-tools .detail-actions button {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.tn-home-tools .btn-reset {
  border: 1px solid #2b2b2b;
  background: transparent;
  color: #aaa;
}
.tn-home-tools .btn-reset:hover { color: #fff; }
.tn-home-tools .btn-go {
  border: 1px solid var(--tn-pink);
  background: var(--tn-pink);
  color: #fff;
}
.tn-home-tools .btn-go:hover { background: var(--tn-pink-hot); border-color: var(--tn-pink-hot); color: #fff; }

.tn-home-tools .sale-band { padding: var(--tn-space-section) 0 0; }
.tn-home-tools .sale-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--tn-space-block);
}
.tn-home-tools .sale-head a.more {
  color: var(--tn-pink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  padding-bottom: 2px;
}
.tn-home-tools .sale-board {
  border-top: 1px solid var(--tn-line2);
  border-bottom: 1px solid var(--tn-line2);
}
.tn-home-tools .sale-row {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  min-height: 72px;
  border-bottom: 1px solid var(--tn-line);
}
.tn-home-tools .sale-row:last-child { border-bottom: 0; }
.tn-home-tools .sale-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px 10px 0;
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.tn-home-tools .sale-label small {
  margin-top: 3px;
  color: #4a4a4a;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 700;
}
.tn-home-tools .sale-nums {
  display: grid;
  min-width: 0;
  align-items: stretch;
}
.tn-home-tools .sale-nums.off { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tn-home-tools .sale-nums.price { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tn-home-tools .sale-nums .sale-num {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 16px 4px 14px;
  border-left: 1px solid var(--tn-line);
  color: #e8e8e8;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.tn-home-tools .sale-nums .sale-num strong {
  font-size: clamp(25px, 1.85vw, 32px);
  font-weight: 700;
  letter-spacing: -.03em;
}
.tn-home-tools .sale-nums .sale-num small {
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.tn-home-tools .sale-nums .sale-count {
  margin-left: 5px;
  color: #7a7a7a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tn-home-tools .sale-nums a.sale-num.is-on strong {
  color: var(--tn-pink);
}
.tn-home-tools .sale-nums a.sale-num.is-on small,
.tn-home-tools .sale-nums a.sale-num.is-on .sale-count {
  color: #ff5aad;
}
.tn-home-tools .sale-nums a.sale-num::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 1px;
  background: var(--tn-pink);
  transition: left .2s ease, right .2s ease;
}
.tn-home-tools .sale-nums a.sale-num:hover { color: #fff; }
.tn-home-tools .sale-nums a.sale-num:hover::after { left: 18%; right: 18%; }
.tn-home-tools .sale-nums .sale-num.is-disabled {
  color: #4a4a4a;
  cursor: default;
  pointer-events: none;
}
.tn-home-tools .sale-nums .sale-num.is-disabled small,
.tn-home-tools .sale-nums .sale-num.is-disabled .sale-count {
  color: #3f3f3f;
}

.tn-home-tools .rank-band { padding: var(--tn-space-section) 0 0; }
.tn-home-tools .rank-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--tn-space-block);
}
.tn-home-tools .rank-title { min-width: 0; }
.tn-home-tools .rank-tabs { display: flex; gap: 18px; padding-bottom: 2px; }
.tn-home-tools .rank-tabs button {
  border: 0;
  background: transparent;
  color: #777;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 0 0 6px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
.tn-home-tools .rank-tabs button.is-on {
  color: #fff;
  border-bottom-color: var(--tn-pink);
}
.tn-home-tools .rank-panel[hidden] { display: none !important; }
.tn-home-tools .sga-ranking {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tn-home-tools .sga-ranking li,
.tn-home-tools li.sga-ranking-list {
  position: relative;
  display: block;
  overflow: hidden;
  background: #111;
  aspect-ratio: 5 / 2;
  float: none;
  clear: none;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  word-wrap: break-word;
}
.tn-home-tools .sga-ranking li > a:first-of-type,
.tn-home-tools .sga-ranking li > a:has(img) {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}
.tn-home-tools .ranking-img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  filter: brightness(.7);
  transition: filter .35s ease;
}
.tn-home-tools .sga-ranking li:hover .ranking-img { filter: brightness(1); }
.tn-home-tools .sga-ranking li:nth-child(1) .ranking-img { filter: brightness(.82); }
.tn-home-tools .sga-ranking li:nth-child(1):hover .ranking-img { filter: brightness(1); }
.tn-home-tools .sga-ranking li::before {
  padding: 6px 9px;
  font-size: 12px;
  min-width: 28px;
  width: auto;
  height: auto;
  line-height: 1.2;
  background: rgba(30, 30, 30, .8);
  z-index: 3;
}
.tn-home-tools .sga-ranking li:nth-child(1)::before {
  min-width: 34px;
  padding: 7px 10px;
  font-size: 15px;
  font-weight: 700;
  background: rgba(204, 161, 31, .88);
  opacity: 1;
}
.tn-home-tools .sga-ranking li:nth-child(2)::before {
  background: rgba(126, 126, 126, .85);
  opacity: 1;
}
.tn-home-tools .sga-ranking li:nth-child(3)::before {
  background: rgba(179, 112, 54, .85);
  opacity: 1;
}
.tn-home-tools .sga-ranking .sga-ranking-title {
  display: block;
  width: 100%;
  padding: 5px 9px;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  background: rgba(0, 0, 0, .8);
  z-index: 2;
}

body.front-top-page .tn-index-head {
  width: 100%;
  max-width: none;
  margin: var(--tn-space-section) 0 var(--tn-space-block);
  border-top: 1px solid var(--tn-line);
  padding-top: 22px;
  scroll-margin-top: 80px;
}
.tn-index-head .tn-index-default {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  min-width: 0;
}
.tn-index-head .tn-index-default[hidden],
.tn-index-head .tn-result-head[hidden] {
  display: none !important;
}
.tn-index-head .tn-index-title {
  min-width: 0;
}
.tn-index-head .tn-index-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-bottom: 1px;
  white-space: nowrap;
}
.tn-index-head .count,
.tn-index-head #post_count,
.tn-index-head .post_count,
.tn-index-head #tn-result-count {
  color: #e4007f;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  margin-right: 0;
  letter-spacing: -.02em;
}
.tn-index-head .unit {
  font-size: .88rem;
  font-weight: 700;
  color: #8a8a8a;
  letter-spacing: .04em;
}
.tn-index-head.is-result {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.tn-result-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.tn-result-heading {
  margin: 0;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.45;
  max-width: 100%;
  min-width: 0;
}
.tn-result-terms {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}
.tn-result-terms[hidden] {
  display: none !important;
}
.tn-result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  width: 100%;
  min-width: 0;
}
.tn-result-edit {
  appearance: none;
  margin: 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--tn-pink);
  background: transparent;
  color: var(--tn-pink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  cursor: pointer;
}
.tn-result-edit:hover,
.tn-result-edit:focus {
  color: #fff;
  outline: none;
}
.tn-home-tools #tn-search-title,
.tn-home-tools .search-block,
.tn-home-tools #detail-panel,
.tn-home-tools .sale-band {
  scroll-margin-top: 80px;
}

body.tn-netabare-on .tn-home-tools .ranking-img,
body.tn-netabare-on .carousel-entry-card-thumb img {
  filter: brightness(20%) blur(30px) !important;
}

@media (max-width: 1100px) {
  .tn-home-tools .sga-ranking { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tn-home-tools .sale-nums .sale-num strong { font-size: 22px; }
  .tn-home-tools .sale-label { font-size: 11px; }
  .tn-home-tools .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-home-tools .section-heading { font-size: 1.4rem; }
}
@media (max-width: 834px) {
  /* スマホは従来の密度を維持。PC専用の拡大はここで打ち消す */
  body.front-top-page .header-container-in.wrap,
  body.front-top-page .carousel-in.wrap,
  body.front-top-page .content-in.wrap,
  body.front-top-page .footer-in.wrap {
    width: calc(100% - 24px);
    max-width: none;
  }
  body.front-top-page .main {
    padding-bottom: 40px;
  }
  body.front-top-page .carousel {
    height: 250px;
  }
  body.front-top-page .carousel-entry-card-title {
    font-size: 16px;
    height: 3.2em;
  }
  body.front-top-page .entry-card-title {
    font-size: 2rem;
  }
  body.front-top-page a.entry-card-wrap.a-wrap.border-element.cf {
    padding-bottom: 2em;
  }
  .tn-home-tools {
    --tn-space-section: 28px;
    --tn-space-block: 12px;
    --tn-space-inner: 8px;
    padding-top: 20px;
  }
  .tn-home-tools .eyebrow {
    font-size: 10px;
  }
  .tn-home-tools .eyebrow::before {
    width: 22px;
  }
  .tn-home-tools .section-copy {
    max-width: 34rem;
    font-size: 13px;
  }
  .tn-home-tools .search-ribbon::before {
    width: 72px;
  }
  .tn-home-tools .search-form {
    grid-template-columns: 44px minmax(0, 1fr) 68px;
    height: 48px;
  }
  .tn-home-tools .search-mark svg { width: 17px; height: 17px; }
  .tn-home-tools .search-form input,
  .tn-home-tools .search-form input[type=search],
  .tn-home-tools .search-form input.search-edit {
    height: 48px;
    font-size: 15px;
  }
  .tn-home-tools .search-submit,
  .tn-home-tools .detail-toggle {
    font-size: 13px;
  }
  .tn-home-tools .detail-toggle {
    padding: 0 18px;
  }
  .tn-home-tools .spoiler-toggle {
    padding: 0 16px 0 18px;
  }
  .tn-home-tools .spoiler-copy {
    font-size: 13px;
  }
  .tn-home-tools .spoiler-state {
    font-size: 9px;
  }
  .tn-home-tools .detail-panel {
    padding: 18px 0 4px;
  }
  .tn-home-tools .detail-grid {
    gap: 20px 28px;
  }
  .tn-home-tools .filter-chip {
    min-height: 32px;
    padding: 4px 10px;
  }
  .tn-home-tools .detail-input,
  .tn-home-tools #filter_form input.detail-input,
  .tn-home-tools input.detail-input[type=search] {
    height: 36px;
  }
  .tn-home-tools .sale-nums .sale-num {
    padding: 12px 2px 10px;
  }
  .tn-home-tools .sale-nums .sale-count { font-size: 9px; margin-left: 3px; }
  .tn-home-tools .sga-ranking {
    gap: 6px;
  }
  .tn-home-tools .sga-ranking li::before {
    padding: 5px 8px;
    font-size: 11px;
    min-width: 26px;
  }
  .tn-home-tools .sga-ranking li:nth-child(1)::before {
    min-width: 30px;
    padding: 6px 9px;
    font-size: 13px;
  }
  .tn-home-tools .sga-ranking .sga-ranking-title {
    padding: 4px 8px;
    font-size: 11px;
  }
  .tn-index-head .unit {
    font-size: .78rem;
  }
  .tn-home-tools .search-ribbon { grid-template-columns: 1fr 1fr; }
  .tn-home-tools .search-form {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--tn-line2);
  }
  .tn-home-tools .detail-toggle,
  .tn-home-tools .spoiler-toggle {
    min-width: 0;
    min-height: 48px;
    justify-content: center;
  }
  .tn-home-tools .detail-toggle { border-left: 0; padding: 0 10px; }
  .tn-home-tools .spoiler-toggle { padding: 0 12px; }
  .tn-home-tools .detail-grid { grid-template-columns: 1fr; }
  .tn-home-tools .detail-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .tn-home-tools .detail-note { text-align: left; }
  .tn-home-tools .detail-actions { align-items: flex-start; }
  .tn-home-tools .filter-result-count { font-size: 15px; }
  .tn-home-tools .detail-action-buttons {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
  .tn-home-tools .sale-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .tn-home-tools .sale-row {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 8px;
  }
  .tn-home-tools .sale-label { padding: 0 0 6px; }
  .tn-home-tools .sale-nums.off { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tn-home-tools .sale-nums.price { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-home-tools .sale-nums .sale-num {
    min-height: 56px;
    padding: 12px 2px 10px;
    border-top: 1px solid var(--tn-line);
  }
  .tn-home-tools .sale-nums.off .sale-num:nth-child(4n+1),
  .tn-home-tools .sale-nums.price .sale-num:nth-child(2n+1) { border-left: 0; }
  .tn-home-tools .sale-nums .sale-num strong { font-size: 22px; }
  .tn-home-tools .sale-nums .sale-num small { font-size: 10px; }
  .tn-home-tools .sale-nums .sale-count { font-size: 9px; margin-left: 3px; }
  .tn-home-tools .rank-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tn-home-tools .sga-ranking { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .tn-home-tools .rank-tabs { gap: 12px; width: 100%; justify-content: space-between; }
  body.front-top-page .tn-index-head {
    padding-top: 16px;
  }
  .tn-index-head .tn-index-default {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .tn-result-heading {
    font-size: 1.05rem;
  }
  .tn-result-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tn-index-head .count,
  .tn-index-head #post_count,
  .tn-index-head .post_count,
  .tn-index-head #tn-result-count { font-size: 1.55rem; }
}
@media (max-width: 480px) {
  .tn-home-tools .search-form { grid-template-columns: 40px minmax(0, 1fr) 58px; height: 48px; }
  .tn-home-tools .search-form input { font-size: 13px; height: 48px; }
  .tn-home-tools .detail-toggle,
  .tn-home-tools .spoiler-copy { font-size: 12px; }
  .tn-home-tools .spoiler-state { white-space: normal; letter-spacing: .04em; }
  .tn-home-tools .section-heading { font-size: 1.28rem; }
  .tn-home-tools .sga-ranking { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-home-tools .sale-nums .sale-num strong { font-size: 20px; }
  .tn-home-tools .sale-nums .sale-num small { font-size: 9px; }
  .tn-home-tools .sale-nums .sale-count { font-size: 8px; margin-left: 2px; }
}