@charset "UTF-8";

/* ==========================================================================
   style.css (cleaned & organized)
   - Keep this file as the single source of truth for global styles.
   - Sections are grouped by responsibility. Responsive overrides are at the end.
   ========================================================================== */

/* ===== External libraries (Font Awesome 4.7) ===== */
/*!
*  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
*  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/

@font-face {
  font-family: 'FontAwesome';
  src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.fa-chevron-up:before {
  content: "\f077"
}

.fa-calendar:before {
  content: "\f073"
}

.fa-refresh:before {
  content: "\f021"
}


/* ===== Reset / Base ===== */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-style: normal;
  background: 0 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

#share_plz, .hentry, #single-main .post-sub, #breadcrumb, .navigation, .wrap-post-title, .pickup-cat-wrap, .maintop-widget, .mainbottom-widget, .post-box-contents, #main-wrap .pickup_post_list, .sticky-post-box, .p-entry__tw-follow, .p-entry__push, .catpage_content_wrap, #cta {
  -webkit-box-shadow: 0 0 0 5px rgba(150, 150, 150, .2);
  -moz-box-shadow: 0 0 5px rgba(150, 150, 150, .2);
  box-shadow: 0 0 5px rgba(150, 150, 150, .2)
}

.post-box-contents, #main-wrap #pickup_posts_container img, .hentry, #single-main .post-sub, .navigation, .single_thumbnail, .in_loop, #breadcrumb, .pickup-cat-list, .maintop-widget, .mainbottom-widget, #share_plz, .sticky-post-box, .catpage_content_wrap, .cat-post-main {
  background: #fff
}

.widget.widget_block .block-group h2:first-child, .widget.widget_block .block-group h3:first-child, .widgettitle {
  color: #000;
  background: #ff78d2;
}

.bigfooter_wrap, .footer_content {
  width: 70%;
}

/* ===== Base elements ===== */
a {
  color: #335;
  text-decoration: none;
  transition: all .25s ease-out
}

a:hover, a:focus {
  color: #6495ed;
  text-decoration: none;
}

button, input[type=submit], input[type=reset], input[type=button] {
  display: inline-block;
  padding: 10px 40px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
  background-color: #4c8eaf;
  text-decoration: none;
  font-size: 15px;
  line-height: normal;
  cursor: pointer;
}

body {
  margin: 0;
  padding: 0;
}

html {
  margin: 0;
  padding: 0;
  overflow-y: scroll;
}

h1, h2, h3, h4, h5 {
  line-height: 2;
  display: block
}

h1 {
  position: relative;
  background-color: #ff78d2;
  color: #000;
  padding: .5em 1em;
  font-size: 1.8em;
  margin: 1.5em 0 1em;
  line-height: 1.5;
  font-weight: bold;
}

h2 {
  position: relative;
  background-color: #ff78d2;
  color: #000;
  padding: .5em 1em;
  font-size: 1.6em;
  margin: 1.5em 0 1em;
  line-height: 1.5;
  font-weight: bold;
}

h3 {
  position: relative;
  background-color: #ffbee6;
  padding: .5em 1em;
  font-size: 1.2em;
  margin: 1em 0 1em;
  line-height: 1.5;
  font-weight: bold;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

iframe {
  max-width: 100%;
}

input[type=text], input[type=password], input[type=email], input[type=search], input[type=url], input[type=tel], input[type=number], input[type=date], textarea {
  margin: 0;
  padding: 8px 4px;
  max-width: 100%;
  width: 80%;
  outline: 0;
  border: 1px solid #ddd;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  color: #777;
  vertical-align: bottom;
  font-size: 13px;
  background-color: #f7f7f7
}

input[type=submit], input[type=button] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul ul {
  margin-left: 1em;
}

/* ===== Content ===== */
.content {
  font-size: 16px;
  line-height: 1.8;
  color: #FFF;
  background-color: #000;
  margin-bottom: 1em;
  position: relative;
  word-break: normal;
  width: 100%;
  padding-top: 2em;
}

.content img {
  max-width: 95%;
  height: auto;
}

.content a {
  color: #0061bc;
  word-break: break-all;
}

.content p {
  padding: 0 0 1em;
}

.content h2 {
  padding: 10px 40px;
  background: #ff78d2;
  margin-right: -50px;
  margin-left: -50px;
  box-shadow: 0 1px 3px #777;
  border-radius: 0
}

.content h2:after, .content h2:before {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top: 5px solid #666
}

.content h2:after {
  left: 0;
  border-right: 5px solid #666
}

.content h2:before {
  right: 0;
  border-left: 5px solid #666
}

.content .post-box-thumbnail__wrap img, .post-box-thumbnail__wrap img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  font-family: 'object-fit:cover;';
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

/* ===== Layout helpers ===== */
#container:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: " ";
  font-size: 0
}

/* ===== Headings ===== */
h1.single-post-title {
  margin: 10px 0
}

/* ===== Utilities: clearfix ===== */
.clearfix {
  display: block;
}

.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: " ";
  font-size: 0
}

/* ===== Utilities: row ===== */
.row {
  display: block;
}

.row:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: " ";
  font-size: 0
}

/* ===== Drawer navigation ===== */
.drawer-nav {
  color: #000;
  background: #fff;
  height: 100%;
  transition: .35s ease-in-out;
  overflow-y: scroll;
  position: fixed;
  margin: 0;
  padding: 0;
  list-style: none;
  top: 0;
  width: 80%;
  max-width: 300px;
  left: -100%;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
}

.drawer-nav.active {
  left: 0px;
  z-index: 9999999999999;
}

.drawer-nav a {
  color: #000;
}

.drawer-nav .widget>ul:first-of-type, .drawer-nav .widget ul:first-child {
  margin: 0;
  margin-top: -10px
}

.drawer-nav-btn-wrap {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 55px;
  height: auto;
  z-index: 10;
}

.drawer-nav-btn {
  display: block;
  width: 40px;
  height: 40px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.drawer-nav-btn span,
.drawer-nav-btn:before,
.drawer-nav-btn:after {
  content: "";
  position: absolute;
  display: block;
  width: 80%;
  height: 4px;
  background-color: #fff;
  left: 10%;
  border-radius: 2px;
}

/* 中央線 */
.drawer-nav-btn span {
  top: 50%;
  transform: translateY(-50%);
}

/* 上の線 */
.drawer-nav-btn:before {
  top: 8px;
}

/* 下の線 */
.drawer-nav-btn:after {
  bottom: 8px;
}

.drawer-nav-btn:before, .drawer-nav-btn:after, .drawer-nav-btn span {
  display: block;
  width: 80%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  border-radius: 5px
}

.drawer-overlay {
  transition: all 0.4s ease 0s;
}

.drawer-overlay.active {
  cursor: pointer;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}

.drawer_content_title {
  padding: 10px;
  margin-bottom: 10px;
  background: #ff78d2;
  color: #fff
}

.footermenu_col .drawer-nav-btn span {
  background: 0 0;
  border: 0
}

.footermenu_col .drawer-nav-btn:before {
  background: 0 0;
  border: 0
}

.footermenu_col .drawer-nav-btn:after {
  background: 0 0;
  border: 0
}

.searchbox_content_title {
  background: #ff78d2;
  color: #000;
}

/* ===== Footer ===== */
footer {
  font-size: 0.9em;
  font-weight: bold;
  clear: both;
  background: #ff78d2;
  text-align: center;
  padding: 1em 1em 10em 1em;
}

.article_footer {
  padding: 1em 20px;
}

/* ===== Pagination ===== */
.pager {
  margin-top: 1.5em;
  text-align: center;
}

.pager_num {
  margin-bottom: 1em;
  text-align: center;
}

.page_list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 1em 0;
  margin: 0;
}

.pagination li {
  margin: 0 5px;
  padding: 0;
  width: 70px;
  height: 55px;
  text-align: center;
  border: 2px solid #999;
  border-radius: 10px;
  background-color: #FFF;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}

.pagination li a:hover {
  background-color: #f0f0f0;
}

.pagination li.active {
  border: 3px solid #ff73b2;
}

.pagination li.disable {
  background-color: #777;
  border: 1px solid #999;
}

.pager_img {
  display: flex;
  text-align: center;
  justify-content: center;
}

.inner_pager_img {
  width: 45%;
  border: 3px solid #ff0073;
  background-color: #000;
  margin: 0.6em;
}

.inner_pager_img img {
  display: block;
  height: 450px;
  object-fit: cover;
  width: 100%;
}

.inner_pager_img span {
  color: aqua;
  font-size: 1.3em;
  font-weight: bold;
  text-decoration: underline;
}

.wrap-post-title {
  color: #fff;
  background: #ff78d2;
  padding: 10px 20px;
  font-size: 1.3em;
  margin-top: 2em;
  margin-bottom: 0.5em;
  position: relative;
  font-weight: 700;
}

.wrap-post-title a {
  color: #fff;
}

.widget .wrap-post-title {
  background: #ff78d2;
}

.wrap-grid-post-box {
  margin: -3px;
  margin-bottom: 10px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -js-display: flex
}

/* ===== Post cards ===== */
.post-box-contents {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  transition: .4s
}

.post-box-thumbnail {
  background: #eee;
  position: relative
}

.post-box-thumbnail__wrap {
  overflow: hidden;
  position: relative
}

.post-box-thumbnail__wrap:before {
  content: "";
  padding-top: 61.8%;
  display: block;
  height: 0
}

/* ===== Post grid ===== */
.grid-post-box {
  width: 33.333%;
  position: relative;
  padding: 4px;
  letter-spacing: normal;
  vertical-align: top;
}

.post-cat {
  pointer-events: none;
  padding: 3px 5px;
  display: inline-block;
  color: #fff;
  position: relative;
  background: #c7025a;
  font-size: 0.6em;
  border-radius: 2px;
  vertical-align: middle;
}

.post-cat a{
  color: #fff;
}

.premium-badge {
  color: #FFD700; /* ゴールド */
  font-size: 12px; /* アイコンサイズ */
  margin-left: 6px;
  margin-bottom: 6px;
  vertical-align: middle;
  background: #000000;
  padding: 4px 6px;
  border-radius: 5px;
}

.post-cat .premium-badge {
  margin-left: 8px;
}

.grid-post-box:hover .post-box-contents {
  box-shadow: 0 0 5px rgba(0, 0, 0, .3)
}

.grid_post_thumbnail {
  width: 100%;
}

.grid-post-box .post-meta-all {
  padding: 10px
}

.grid-post-box .post-title {
  font-weight: 700;
  font-size: 0.9em;
  padding: 5px 0;
  margin-top: 5px;
}

.grid-post-box .post-substr {
  font-size: 12px
}

.post-meta-all {
  word-wrap: break-word
}

/* ===== FANZA ===== */
.fanza_api_img {
  margin-bottom: 3.5em;
}

.fanza_api_img img {
  width: 135px;
  height: 17px;
  float: right;
}

.fanza_img_link {
  text-align: right;
  font-size: 0.8em;
  padding-bottom: 2.5em;
}

.fanza_img_link a, .fanza_img_link a:visited {
  color: #969696;
  font-weight: bold;
  text-decoration: underline;
}

.fanza-av {
  padding: 1em 0 2em 0;
  background: #f682b6;
}

/* ===== Tag page ===== */
.tag-info-text {
  background: #ffc4df;
  margin-top: 1em;
  line-height: 2.5;
}

.tag-info-text a {
  color: #0366D6;
  text-decoration: none;
  transition: initial;
}

.tag-info-text a:hover {
  color: orange;
  text-decoration: underline;
}

/* ===== Header / Navigation ===== */
.header-wrap {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  aspect-ratio: 8 / 3;
  width: 100%;
}

#logo {
  height: 100%;
  width: 100%;
}

#logo a {
  display: block;
  height: 100%;
  width: 100%;
}

.header-logo {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  -js-display: flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.header-logo #nav ul {
  position: relative;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  z-index: 999;
}

.header-logo #nav ul li {
  position: relative;
  float: left;
}

.header-logo #nav ul li:not(:first-child) {
  border-left: none;
}

.header-logo #nav ul:after {
  display: block;
  clear: both;
  content: '';
}

.header-logo #nav ul ul {
  visibility: hidden;
  opacity: 0;
  transition: .2s ease-in-out;
  transform: translateY(-20px);
}

.header-logo #nav ul li:hover>ul {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.header-logo #nav ul ul {
  z-index: 999;
  min-width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: .2s ease-in-out;
  transform: translateY(-20px);
}

.header-logo #nav ul li a {
  display: inline-block;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
  font-weight: 700;
  vertical-align: bottom;
  font-size: .9em;
}

.header-logo #nav ul li ul a {
  font-size: .9em;
  padding: 1em;
}

.header-logo #nav ul li:last-child ul {
  right: 0;
}

.header-logo #nav ul ul li {
  float: none;
  margin: 0;
}

.header-logo #nav ul ul li:not(:first-child) {
  border-top: none;
}

.header_small_menu {
  padding: 5px;
  font-size: 12px;
  background: #e2498e;
  color: #fff;
}

.header_small_menu_right {
  float: right
}

.header_small_content {
  width: 90%;
  margin: 0 auto
}

#header_search {
  background: #fff;
  color: #000;
}

#header_search a {
  color: #000;
}

/* ===== Article (hentry) ===== */
.hentry {
  background: #fff;
  position: relative;
}

.hentry .post-meta {
  display: inline-block;
  width: 100%;
  padding: 1em 20px;
}

.hentry .post-meta-bottom {
  float: left;
  font-size: .85em;
  margin-bottom: 12px;
  margin-right: 5px;
}

.hentry .post-meta-bottom i {
  margin-right: 5px;
}

.hentry .single-post-tag {
  font-size: 0.9em;
  padding-right: 1em;
  padding-bottom: 1em;
  margin: 2px;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  font-weight: 700;
}

/* ===== Breadcrumb ===== */
#breadcrumb {
  font-size: 13px;
  padding: 10px 20px;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: auto;
}

#breadcrumb li {
  display: inline-block;
}

#breadcrumb li:not(:first-child):before {
  content: '\f0da';
  color: #aaa;
  margin: 0 .6rem;
  position: relative;
  top: 1px;
  font-family: 'FontAwesome';
}

#single-main .post-sub {
  padding: 1em 20px;
  background: #fff;
  position: relative;
}

#single-main .post-sub {
  margin-top: 0
}

/* ===== Page main ===== */
#page-main {
  width: 100%;
}

/* ===== Search form ===== */
form.searchform {
  position: relative;
}

input[type=submit].searchsubmit {
  text-align: center;
  background-color: #ff78d2;
  background-size: 17px;
  border-radius: 0;
  border-left: none;
  width: 20%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 0;
}

/* ===== Page top button ===== */
#page-top {
  position: fixed;
  bottom: 10px;
  right: 20px;
  font-size: 77%;
  z-index: 998
}

#page-top a {
  background: rgba(0, 0, 0, .6);
  color: #fff;
  text-decoration: none;
  width: 70px;
  font-size: 25px;
  line-height: 1;
  padding: 22px 0;
  text-align: center;
  display: block;
  border-radius: 50%
}

#page-top a:hover {
  text-decoration: none;
  opacity: .7
}

/* ===== Single post ===== */
.single-post-date {
  margin-right: 8px;
}

.single-post-date.published {
  color: #999;
}


/* ===== Post meta ===== */
.post-meta-bottom span {
  margin-right: 8px
}

/* ===== Widgets ===== */
.widget.widget_tags ul li, .widget.widget_nav_menu li, .widget.widget_pages li, .widget.widget_archive li, .widget.widget_mytagorder li {
  margin: 0;
  padding: 0;
}

.widget.widget_tags li a, .widget.widget_recent_entries li, .widget.widget_nav_menu li a, .widget.widget_pages li a, .widget.widget_archive li a, .widget.widget_mytagorder li a, .widget.widget_meta li a {
  display: block;
  padding: .8em 1em;
  margin: 0;
  position: relative;
  font-size: .9em;
}

.widget {
  margin-bottom: 10px;
  padding: 10px;
  position: relative
}

.widget>ul:first-of-type, .widget ul:first-child, .d_tab_tab>ul:first-of-type {
  margin: -10px
}

.widget>ul:first-of-type>li, .widget ul:first-child>li, .d_tab_tab>ul:first-of-type>li {
  border-bottom: 1px solid rgba(50, 50, 50, .2)
}

.widgettitle {
  position: relative;
  font-size: 16px;
  padding: 8px 15px;
  margin: -10px;
  margin-bottom: 10px
}

.diver_widget_adarea {
  margin-bottom: 30px;
  text-align: center;
}

.diver_widget_adlabel {
  font-size: .8em;
  text-align: center;
}

.under_line {
  text-decoration: underline;
  color: #0245ff;
  cursor: pointer;
}

.aligncenter {
  clear: both;
  display: block;
  margin: auto;
  text-align: center;
}

#comment-area .comment_title {
  background: 0 0;
  padding: 10px;
  border-radius: 0;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  margin-top: 15px;
  margin-bottom: 10px;
}

/* ===== Header message (legacy) ===== */
.header_message {
  padding-top: 0.3em;
  background: #eee;
  text-align: center;
  font-weight: 700;
  position: relative
}

.header_message_badge {
  display: inline-block;
  background: red;
  color: #fff;
  padding: .4em .6em;
  border-radius: 3px;
  font-size: .7em;
  margin-right: 8px;
  vertical-align: middle
}

.header_message_text {
  display: inline-block;
  vertical-align: middle;
  font-size: .9em;
  transition: .4s
}

.header_message .header_message_wrap {
  padding: 10px;
  display: block
}

a.header_message_wrap:hover .header_message_text {
  opacity: .7
}

/* ===== Item / Ad blocks ===== */
.item_area {
  padding: 0.5em;
  width: 100%;
  text-align: center;
  border: 1px solid #FFF;
  margin-bottom: 2em;
}

.item_text {
  color: #00aaff;
  font-weight: bold;
  text-decoration: underline;
}

.item_campaign_text {
  color: #fd7700;
  font-weight: bold;
  animation: flash 3s linear infinite;
}

.item_title_text {
  color: #ecfd00;
  font-weight: bold;
}

.item_info_text {
  margin-top: 1em;
  text-align: left;
  color: #FFF;
}

.item_ranking_text {
  color: red;
  font-weight: bold;
  text-decoration: underline;
}

.item_sample_video {
  position: relative;
  padding-bottom: min(75%, 490px);
  height: 0;
  overflow: hidden;
  margin-bottom: 1em;
  border: 4px double #ddd;
}

.item_sample_video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.item_title {
  font-weight: bold;
}

@keyframes flash {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.article_description {
  margin-top: 1em;
  margin-bottom: 2em;
  line-height: 1.8em;
  padding: 0.5em;
  background-color: #faf1f6;
  border: 2px solid #fd52bc;
}

#mokuji_area {
  color: black;
  margin-top: 1em;
  margin-bottom: 2em;
  line-height: 1.8em;
  padding: 0.5em;
  background-color: #faf1f6;
  border: 2px solid #fd52bc;
}

.ranking_header {
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}

.weekly {
  background-color: #eb240e;
}

.monthly {
  background-color: #a21add;
}

.yearly {
  background-color: #095c2b;
}

.Ranking-Count figure::before {
  font-size: 1.3rem;
  background-color: #333;
  color: #fff;
  counter-increment: ranking 1;
  content: counter(ranking);
  font-weight: bold;
  line-height: 32px;
  position: absolute;
  text-align: center;
  top: -4px;
  width: 32px;
  z-index: 3
}

.Ranking-Count div.grid-post-box:nth-of-type(1) figure::before {
  background-color: #fa0
}

.Ranking-Count div.grid-post-box:nth-of-type(2) figure::before {
  background-color: #bbb
}

.Ranking-Count div.grid-post-box:nth-of-type(3) figure::before {
  background-color: #930
}

.small_h1 {
  background-color: #eee;
  color: #000;
  font-size: 0.8em;
  margin: 0em;
  padding: 0em;
}

.heart_on {
  font-size: 230%;
  color: red;
  text-shadow: 1px 1px 3px red, -1px 1px 3px red, 1px -1px 3px red, -1px -1px 3px red;
  position: absolute;
  top: 0em;
  right: 0.4em;
  display: none;
  cursor: pointer;
}

.heart_off {
  font-size: 230%;
  color: white;
  text-shadow: 1px 1px 3px red, -1px 1px 3px red, 1px -1px 3px red, -1px -1px 3px red;
  position: absolute;
  top: 0em;
  right: 0.4em;
  cursor: pointer;
}

.modalBox {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.modalInner {
  font-weight: bold;
  padding: 0.5em;
  text-align: center;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

.index_tag_link {
  text-align: center;
  width: 100%;
  margin: 2.5em 0;
}

.grid-post-box_tag {
  display: flex;
  flex-direction: column;
  width: calc(33%); /* 3列表示の場合。gapと合わせて調整 */
  position: relative;
  padding: 4px;
  letter-spacing: normal;
  vertical-align: top;
}

.tag_header {
  font-weight: bold;
  text-align: center;
  background-color: #ffbee6;
  min-height: 3.7em;
  display: flex;
  align-items: center;
  line-height: 1.6em;
  padding: 0 5px; /* 横詰まりを防止 */
  box-sizing: border-box;
  justify-content: center;
  padding: 4px;
  word-break: break-word;
}

.menu-icon {
  display: inline-block;
  margin-right: 5px; /* アイコンとテキストの間隔 */
  font-size: 1.2em; /* アイコンサイズ */
  vertical-align: middle; /* テキストとの整列 */
}

.content .article_img {
  padding-bottom: 2em;
  position: relative;
}

/* ===== Badge: NEW ===== */
.new-badge {
  display: inline-block;
  background-color: #ff0000; /* 赤背景 */
  color: #ffffff; /* 白文字 */
  font-size: 0.8em;
  font-weight: bold;
  padding: 5px;
  border-radius: 3px;
  margin: 0 10px; /* テキストとの間隔 */
  line-height: 1;
  vertical-align: middle;
}

/* ===== Button-like link ===== */
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  font-size: 18px; /* ボタンの文字を大きめに */
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(to bottom, #ff914d, #d35400); /* オレンジ系のグラデーション */
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

/* ホバーアクション */
.link-button:hover {
  background: linear-gradient(to bottom, #d35400, #a84400);
  transform: translateY(-3px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

/* アイコンのスタイル */
.link-button i {
  margin-right: 10px;
  font-size: 20px;
}

/* 訪問済みリンクのスタイル（クリック後も色を保持） */
.link-button:visited {
  color: #fff; /* 文字色を白に固定 */
  background: linear-gradient(to bottom, #ff914d, #d35400); /* 元の背景色を保持 */
}

/* ===== Badge: X ===== */
.x-badge{
  display:inline-block;
  width: 1.1em;
  height: 1.1em;
  line-height: 1.1em;
  text-align:center;
  font-weight: 800;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  letter-spacing: -0.02em;
  color:#fff;
  background:#000;
  border-radius:4px;
  font-size: .95em;
  transform: translateY(-1px); /* 行揃えの微調整 */
}

/* ===== Rectangle ads ===== */
/* 横並び＆中央寄せ。幅が足りない場合は折り返し */
.rect-ads-row{
  display:flex; justify-content:center; align-items:flex-start;
  margin: 3em 0;
  gap:3em; flex-wrap:wrap; row-gap:3em;
}
/* 2つとも同じサイズの箱に固定（ここを変えれば基準サイズ変更可） */
.rect-ads-item{
  flex:0 0 300px; max-width:300px; min-width:300px;
  aspect-ratio:300/250;
  display:flex; justify-content:center; align-items:flex-start;
  overflow:hidden;   /* はみ出し防止 */
  background:#fff;   /* 広告が小さいときの余白色（任意） */
}
/* 画像/iframe/ins系は箱にフィットさせる */
.rect-ads-item img,
.rect-ads-item iframe,
.rect-ads-item ins{
  max-width:100% !important; display:block;
}
.rect-ads-item ins{ width:100% !important; }

/* ===== Header message (new) ===== */
.header-message {
    background: #fdbbe6;
    border-bottom: 1px solid #f1d0d0;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.25rem;            /* 下のパンくずと少し離す */
}

.header-message-link {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 0.7em;
    text-decoration: none;
    color: #222;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ラベルをピンク → 赤系に */
.header-message-label {
    font-size: 0.75rem;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    background: #e53935;               /* 赤 */
    color: #fff;
    flex-shrink: 0;
}

/* 本文2行 */
.header-message-lines {
    line-height: 1.3;
}

.header-message-line1 {
    display: block;
}

/* 今すぐ探す */
.header-message-line2 {
    display: flex;
    align-items: center;
    gap: 0.25em;
    font-weight: 700;
    color: #0366D6;                 /* サイト内リンクと同系の青 */
    text-decoration: underline;     /* 常に下線を付ける */
    text-underline-offset: 0.15em;
}

/* ▶アイコン */
.header-message-line2::after {
    content: "▶";
    font-size: 0.7rem;
    color: inherit;
}

/* ===== Chips / keyword links (reusable) ===== */
.chip-section{
  margin: 1.5em 0 2em;
  padding: 0.9em 0.9em 1em;
  background: #faf1f6;
  border: 2px solid #fd52bc;
  border-radius: 12px;
}

h2.chip-section__title{
  /* Compact “section title” (overrides global h2 / .content h2) */
  margin: 0 0 0.8em;
  padding: 0.6em 0.9em;
  background: #ff78d2;
  color: #000;
  font-size: 1.2em;
  line-height: 1.35;
  border-radius: 10px;
  box-shadow: none;
  position: relative;
}

/* Remove decorative triangles from .content h2 styles */
h2.chip-section__title::before,
h2.chip-section__title::after{
  content: none !important;
}

.chip-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.chip{
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 0.9em;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(253, 82, 188, 0.55);
  color: #222;
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.chip::before{
  content: "🔎";
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.9;
}

.chip:hover{
  background: #ffbee6;
  border-color: rgba(253, 82, 188, 0.9);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.chip:active{
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.16);
}

.chip:focus-visible{
  outline: 2px solid #6495ed;
  outline-offset: 3px;
}

/* Small screens */
@media (max-width: 768px){
  .chip-section{ padding: 0.8em; }
  h2.chip-section__title{ font-size: 1.05em; padding: 0.55em 0.8em; }
  .chip-list{ gap: 8px; }
  .chip{ font-size: 0.9em; padding: 0.55em 0.8em; }
}

/* ===== Trending pills (Top) ===== */
.trendingPills.sectionWrapper{
  margin: 1.5em 0 2em;
  padding: 0.9em 0.9em 1em;
  background: #faf1f6;
  border: 2px solid #fd52bc;
  border-radius: 12px;
}

.trendingPillsTitle{ margin: 0 0 0.6em; }
h2.trendingPillsHeading{
  margin: 0;
  padding: 0.6em 0.9em;
  background: #ff78d2;
  color: #000;
  font-size: 1.2em;
  line-height: 1.35;
  border-radius: 10px;
}

/* Container */
.trendingPillsContainer{
  position: relative;
}

/* Scroll area */
.scrollableWrapper{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding: 6px 42px; /* 矢印ぶんの左右余白 */
}

.trendingNowWrapper{
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.trendingNow a{
  display: inline-flex;
  align-items: center;
  padding: 0.55em 0.9em;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(253, 82, 188, 0.55);
  color: #222;
  font-weight: 700;
  font-size: 0.95em;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.trendingNow a:hover{
  background: #ffbee6;
  border-color: rgba(253, 82, 188, 0.9);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* ===== Media marquee (reusable, square thumbnails) =====
   - 横に繋がる正方形サムネ
   - is-autoscroll を付けると main.js の自動スクロールが有効
*/
.media-marquee{
  margin: 1.5em 0 2em;
}

.media-marquee__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  background: #000; /* タイルの“境目無し”を黒で統一 */
}

.media-marquee__viewport::-webkit-scrollbar{ display: none; }

.media-marquee__track{
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
}

.media-marquee__item{
  flex: 0 0 auto;
  width: 156px;              /* 小さめサムネ */
  text-decoration: none;
}

.media-marquee__thumb{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

@supports not (aspect-ratio: 1 / 1){
  .media-marquee__thumb{ position: relative; }
  .media-marquee__thumb::before{ content: ""; display: block; padding-top: 100%; }
  .media-marquee__thumb img{ position: absolute; inset: 0; }
}

.media-marquee__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* ホバーで“タップしたくなる”程度に軽く反応 */
@media (hover:hover){
  .media-marquee__item:hover{ opacity: 0.92; }
}

/* PC は少しだけ大きく */
@media (min-width: 769px){
  .media-marquee__item{ width: 156px; }
}

/* ===== media marquee (animation based, cross-browser) ===== */
.media-marquee {
  margin: 1.5em 0 2em;
}

.media-marquee__viewport {
  overflow: hidden;           /* scrollではなく隠す */
  width: 100%;
}

.media-marquee__track {
  display: flex;
  width: max-content;         /* 内容幅に合わせる */
  will-change: transform;
  transform: translate3d(0,0,0);
  animation-name: mediaMarqueeScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--mm-duration, 20s);
}

@keyframes mediaMarqueeScroll {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--mm-distance, 0px)),0,0); }
}


/* Left / Right arrows */
.leftArrowWrapper,
.rightArrowWrapper{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  color: #222;
}

.leftArrowWrapper{ left: 6px; }
.rightArrowWrapper{ right: 6px; }

.leftArrowWrapper.hide,
.rightArrowWrapper.hide{
  display: none;
}

/* Mobile: 矢印は基本非表示でスワイプ優先 */
@media (max-width: 768px){
  .scrollableWrapper{ padding: 6px 8px; }
}


/* ===== Responsive (media queries) ===== */
@media (max-width: 299px) {
  .inner_pager_img img {
    height: 160px;
  }
}

@media (min-width: 300px) and (max-width: 389px) {
  .inner_pager_img img {
    height: 220px;
  }
}

@media (min-width: 390px) and (max-width: 430px) {
  .inner_pager_img img {
    height: 250px;
  }
}

@media (min-width: 431px) and (max-width: 699px) {
  .inner_pager_img img {
    height: 300px;
  }
}

@media (min-width: 700px) and (max-width: 1023px) {
  .inner_pager_img img {
    height: 450px;
  }
}

@media (min-width: 1024px) and (max-width: 1530px) {
  .inner_pager_img img {
    height: 420px;
  }
}

@media (min-width: 1531px) and (max-width: 1699px) {
  .inner_pager_img img {
    height: 300px;
  }
}

@media (hover: hover) {
    /* 全体の下線はナシにする */
    .header-message-link:hover .header-message-lines {
        text-decoration: none;
    }

    /* 今すぐ探す だけ色を少し明るくして“ホバー感”を出す */
    .header-message-link:hover .header-message-line2 {
        color: #6495ed;   /* 少し明るい青 */
    }
}

@media (max-width: 640px){
  .rect-ads-row{
    gap: 1.25rem;       /* 間隔は少し控えめに */
    margin: 2em 0;
  }
  .rect-ads-item{
    flex: 0 1 auto;     /* 固定幅を解除：内容サイズに任せる */
    max-width: 100%;
    min-width: 0;
    aspect-ratio: auto; /* 比率固定も解除 */
    background: transparent;
    overflow: visible;  /* 広告側の自己サイズに追従 */
  }
  .rect-ads-item ins{ width:auto !important; }
}

@media screen and (max-width:1024px) {
  #main {
    margin: 0;
    padding: 0 0.3em
  }

  #single-main, #page-main {
    margin: 0;
    padding: 0
  }

  #nav, #onlynav {
    display: none
  }
  .header_small_menu {
    padding: 0
  }

  .header_small_menu #description {
    float: none;
    text-align: center
  }

  .header_small_menu .header_small_menu_right {
    display: none;
  }

  .content h2 {
    margin-left: -25px;
    margin-right: -25px;
  }

  img {
    max-width: 100%;
  }
}

@media screen and (min-width:769px) and (max-width:1024px) {
  .grid-post-box {
    width: 50%;
    padding: 2px
  }

  .grid-post-box_tag {
    width: 33.333%;
  }
}

@media screen and (max-width:768px) {
  .header-wrap .header-logo, .header_small_content, .bigfooter_wrap, .footer_content {
    width: 100%;
  }

  #main {
    width: 100%
  }

  #single-main {
    width: 100%;
    padding: 0;
  }

  #page-main {
    width: 100%;
    padding: 0;
  }
  .hentry {
    padding: 0;
    margin: 0
  }

  .menu_desc {
    display: none
  }

  h1 {
    font-size: 1.3em;
    margin: 5px 0;
  }

  h1.single-post-title {
    font-size: 1.2em;
    line-height: 1.3;
  }

  h2 {
    font-size: 1.3em
  }

  h3 {
    font-size: 1.2em
  }

  h4 {
    font-size: 1.1em
  }

  .page_title {
    padding: 15px 20px
  }

  .single-post-date {
    font-size: .7em;
    margin-right: 5px
  }

  .post-meta-bottom span {
    font-size: .7em;
    margin-right: 5px
  }

  .post .post-meta {
    padding: 10px
  }

  #single-main .tag {
    padding: 3px 6px;
    font-size: 10px
  }

  #single-main .post-sub {
    padding: 0.5em;
  }

  .article_footer {
    padding: 0.5em;
    margin-top: -5px
  }

  /* post */
  .post-box {
    width: 100%
  }

  .post-box .post-date {
    position: relative;
    bottom: 0;
    font-size: .6em
  }

  .post-box .post-author, .post-meta .post-author, .grid-post-box .post-author {
    display: none;
  }

  .post_thumbnail {
    width: 180px
  }

  .post-title {
    font-weight: 700;
    font-size: 0.8em;
  }

  .grid-post-box {
    width: 100%;
    padding: 10px 4px;
  }

  .grid-post-box .post-meta-all {
    padding: 5px;
    position: relative
  }

  .grid-post-box .post-date {
    font-size: .7em
  }

  .grid-post-box .post-date:before {
    content: none
  }

  #page-top {
    right: 10px;
    bottom: 130px;
  }

  #page-top a {
    width: 45px;
    line-height: 45px;
    padding: 0;
    font-size: 20px
  }

  #comment-area .comment_title {
    font-size: 1em;
    padding: 5px 10px
  }

  .sticky-post-box .post-title {
    font-size: 0.8em;
  }

  .widgettitle {
    padding: 10px
  }

  #breadcrumb {
    padding: 5px 10px;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    margin-bottom: 5px
  }

  .header_message {
    font-size: .9em
  }

  .header_message_text {
    width: 100%
  }

  .pagination li {
    width: 35px;
    height: 35px;
  }

  .pagination_detail li {
    width: 50px;
    height: 35px;
  }

  .grid-post-box_tag {
    width: 50%;
  }
}

@media screen and (max-width:599px) {
  .mini-list-post-box:hover .post-box-contents, .pickup-cat-list:hover, .widget_post_list:hover, .sticky-post-box:hover, .sc_article.list>a:hover {
    transform: translate(3px, 0)
  }
  .grid-post-box:hover .post-box-contents, .widget_post_list.grid:hover, .sc_article.grid>a:hover {
    transform: translate(0, -3px)
  }
}

.Ranking-Count-Reset { counter-reset: ranking 0; }

/* Buttons */
.link_buttons { display: flex; flex-direction: column; gap: 20px; margin-top: 15px; }
.button {
  display: flex; align-items: center; justify-content: center;
  padding: 15px 20px; border-radius: 8px; font-size: 16px; font-weight: bold; text-decoration: none;
  background: linear-gradient(to bottom, #f7f7f7, #cccccc);
  border: 1px solid rgba(0,0,0,0.2); box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all .3s ease;
}
.link_buttons .button { color: #fff !important; }
.button i { margin-right: 10px; font-size: 18px; }

/* ========== Discovery-like Grid ========== */
:root{
  --disc-gap:12px; --disc-radius:12px; --disc-shadow:0 2px 10px rgba(0,0,0,.18);
  --disc-title:#eaeaea; --disc-author:#b7b7b7; --disc-card-bg:#0e0e10; --disc-link-hover:0 6px 22px rgba(0,0,0,.35);
}
.discovery-grid{
  list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(164px,1fr)); gap:var(--disc-gap);
}
.discovery-card{
  background:var(--disc-card-bg); border-radius:var(--disc-radius); overflow:hidden;
  box-shadow:var(--disc-shadow); transition:transform .16s ease, box-shadow .16s ease, opacity .2s ease; cursor:pointer;
}
.thumb-square{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; }
@supports not (aspect-ratio: 1 / 1){
  .thumb-square::before{ content:""; display:block; padding-top:100%; }
  .thumb-square>img,.thumb-square>picture,.thumb-square>picture>img{ position:absolute; inset:0; }
}
.thumb-square img{ width:100%; height:100%; object-fit:cover; object-position:center center; display:block; background:#111; backface-visibility:hidden; transform:translateZ(0); }

.meta{ padding:8px 10px 10px; }
.meta .title{
  font-size:13px; line-height:1.35; color:var(--disc-title);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.meta .author{ margin-top:4px; font-size:12px; color:var(--disc-author); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (hover:hover){ .discovery-card:hover{ transform:translateY(-2px); box-shadow:var(--disc-link-hover); } }
@media (min-width:1536px){ .discovery-grid{ grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); } }
@media (max-width:420px){ .discovery-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); } }

/* Badges */
.badge-count{
  position:absolute; top:6px; right:6px; display:inline-flex; align-items:center; gap:6px;
  height:22px; padding:0 8px; border-radius:999px; font-size:12px; font-weight:700; line-height:1; color:#fff;
  background:rgba(0,0,0,.55); backdrop-filter:saturate(1.2) blur(2px); box-shadow:0 1px 6px rgba(0,0,0,.35); pointer-events:none;
}
.badge-count .badge-icon{ width:14px; height:14px; fill:currentColor; flex:0 0 auto; }
.badge-tags{
  position:absolute; top:6px; left:6px; display:flex; flex-wrap:wrap; gap:6px;
  max-width:calc(100% - 6px - 60px); pointer-events:none;
}
.badge-tag{
  display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:999px;
  font-size:12px; font-weight:700; line-height:1; color:#fff; background:rgba(0,0,0,.55);
  backdrop-filter:saturate(1.2) blur(2px); box-shadow:0 1px 6px rgba(0,0,0,.35);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
}

/* Infinite Scroll Loader */
#io-sentinel{ height:1px; width:100%; }
.io-loader{ display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 0 28px; color:#b7b7b7; }
.io-spinner{ width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.25); border-top-color:rgba(255,255,255,.9); animation:io-spin .8s linear infinite; }
@keyframes io-spin{ to{ transform:rotate(360deg); } }


/* ===== Grid container ===== */
.discovery-grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: var(--disc-gap);
}

@media (min-width: 1536px){
  .discovery-grid{ grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
}
@media (max-width: 768px){
  .discovery-card{
    width: auto;
  }
}
@media (max-width: 420px){
  .discovery-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ===== Card ===== */
.discovery-card{
  background: var(--disc-card-bg);
  border-radius: var(--disc-radius);
  overflow: hidden;
  box-shadow: var(--disc-shadow);
  transition: transform .16s ease, box-shadow .16s ease, opacity .2s ease;
  cursor: pointer;
}
@media (hover:hover){
  .discovery-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--disc-link-hover);
  }
}

/* Square thumbnail */
.thumb-square{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
@supports not (aspect-ratio: 1 / 1){
  .thumb-square::before{ content:""; display:block; padding-top:100%; }
  .thumb-square > img,
  .thumb-square > picture,
  .thumb-square > picture > img{ position:absolute; inset:0; }
}
.thumb-square img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  background: #111;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ===== Tag/List toolbar (Sort select) ===== */
.list-toolbar{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 10px 0 8px;
}

/* PCで幅が小さく見えないように */
.sort-form{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ▼を重ねるためにラッパー化したくなるが、今回は擬似要素で対応する */
.sort-form{
  position: relative;
}

/* ラベル */
.sort-label{
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

/* select本体 */
.sort-select{
  /* PCで横幅を確保（小さすぎを解消） */
  width: 260px;
  max-width: 320px;

  height: 44px;
  padding: 0 44px 0 14px; /* 右側に▼のスペースを確保 */
  border: 2px solid #ff73b2;
  border-radius: 12px;
  background: #fff;

  font-size: 16px;
  font-weight: 700;
  color: #111;

  /* “押せる”見た目 */
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
  cursor: pointer;

  /* ブラウザデフォルト矢印を消して、統一感を出す */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* 右端の▼（クリックできる感を強める） */
.sort-form::after{
  content: "▼";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 900;
  color: #ff2f9a;
  pointer-events: none; /* selectのクリックを邪魔しない */
}

/* hover/focusで“選択できる”感を強化 */
.sort-select:hover{
  box-shadow: 0 4px 0 rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

.sort-select:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,115,178,0.25), 0 2px 0 rgba(0,0,0,0.08);
}

/* SP：横幅いっぱい＋押しやすく */
@media (max-width: 768px){
  .list-toolbar{
    justify-content: center;
  }
  .sort-form{
    width: 100%;
  }
  .sort-label{
    font-size: 13px;
    white-space: nowrap;
  }
  .sort-select{
    width: 100%;
    max-width: none;
    flex: 1;
    min-width: 0;
    height: 46px;
  }
}

.character-filter-toolbar {
  margin-bottom: 12px;
}

/* JSでclass切替にしたい場合に使う（今回は未使用でもOK） */
.is-hidden {
  display: none !important;
}