/* =========================================================
  Design Palette TOP Page
  - PC: 1200px~
  - Tablet: 680px~1199px
  - SP: ~679px
  - WordPress front-page.php
========================================================= */


/* =========================
  1. Base
========================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

.top-page {
  font-family: "Noto Sans JP", sans-serif;
  background: #f7f7f7;
  color: #222222;
}

.top-page a {
  color: inherit;
  text-decoration: none;
}

.top-page button,
.top-page input {
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
}

.top-page button {
  cursor: pointer;
}

.top-page img {
  display: block;
  max-width: 100%;
}


/* =========================
  2. Variables
========================= */

:root {
  --color-text: #222222;
  --color-white: #ffffff;
  --color-placeholder-bg: #dddddd;
  --color-placeholder-text: #ffffff;
  --color-line: #cccccc;

  --button-bg: #222222;
  --button-text: #ffffff;

  --transition-default: 0.2s ease;

  --content-pc: 1200px;
  --content-tab: 680px;
  --content-sp: 335px;
  --sp-min-width: 0;
}


/* =========================
  3. TOP Layout
========================= */

.top-page {
  width: 100%;
  min-width: 0;
  background: #f7f7f7;
}

.top-main__inner,
.top-category-area__inner {
  margin-inline: auto;
}

@media (min-width: 1200px) {
  .top-main {
    margin-top: 80px;
  }

  .top-main__inner,
  .top-category-area__inner {
    display: grid;
    grid-template-columns: 220px 940px;
    align-items: start;
    column-gap: 40px;
    width: min(var(--content-pc), calc(100% - 80px));
  }

  .top-main__section-gap,
  .top-category-area__section-gap {
    height: 40px;
  }
}

@media (min-width: 680px) and (max-width: 1199px) {
  .top-main {
    margin-top: 44px;
  }

  .top-main__inner,
  .top-category-area__inner {
    width: min(var(--content-tab), calc(100% - 48px));
  }

  .top-main__section-gap,
  .top-category-area__section-gap {
    height: 40px;
  }
}

@media (max-width: 679px) {
  .top-main {
    margin-top: 32px;
  }

  .top-main__inner,
  .top-category-area__inner {
    width: min(var(--content-sp), calc(100% - 40px));
  }

  .top-main__section-gap,
  .top-category-area__section-gap {
    height: 40px;
  }
}


/* =========================
  4. TOP Carousel
========================= */

:root {
  --carousel-bg: #ffffff;
  --carousel-card-bg: #dddddd;
  --carousel-text-white: #ffffff;
  --carousel-dot-active: #222222;
  --carousel-dot-default: #cccccc;
  --carousel-transition: 0.45s ease;
}

.top-carousel {
  width: 100%;
  background: var(--carousel-bg);
  overflow: hidden;
}

.top-carousel__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.top-carousel__track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  gap: var(--carousel-slide-gap);
  transition: transform var(--carousel-transition);
  will-change: transform;
}

.top-carousel__slide {
  flex: 0 0 var(--carousel-card-width);
  width: var(--carousel-card-width);
  padding-top: var(--carousel-hover-space);
  padding-bottom: var(--carousel-shadow-space);
}

.top-carousel__card {
  display: block;
  width: 100%;
  height: var(--carousel-card-height);
  border-radius: var(--carousel-card-radius);
  overflow: hidden;
  box-shadow: var(--carousel-card-shadow);
  transition: opacity var(--transition-default), transform var(--transition-default);
}

.top-carousel__card:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.top-carousel__thumb {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--carousel-card-bg);
}

.top-carousel__placeholder {
  color: var(--carousel-text-white);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1;
}

.top-carousel__title {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.top-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--carousel-dot-gap);
}

.top-carousel__dot {
  width: var(--carousel-dot-size);
  height: var(--carousel-dot-size);
  border-radius: 50%;
  background: var(--carousel-dot-default);
  transition: background var(--transition-default), transform var(--transition-default);
}

.top-carousel__dot.is-active {
  background: var(--carousel-dot-active);
}

.top-carousel__dot:hover {
  transform: scale(1.1);
}

.top-carousel__arrow {
  position: absolute;
  top: calc(var(--carousel-card-height) / 2);
  z-index: 2;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  transition: opacity var(--transition-default), transform var(--transition-default);
}

.top-carousel__arrow:hover {
  opacity: 0.8;
}

.top-carousel__arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.top-carousel__arrow--prev img {
  transform: rotate(180deg);
}

@media (min-width: 1200px) {
  .top-carousel {
    height: 519px;
    padding-top: 40px;
    padding-bottom: 40px;

    --carousel-card-width: 760px;
    --carousel-card-height: 399px;
    --carousel-slide-gap: 40px;
    --carousel-hover-space: 4px;
    --carousel-shadow-space: 8px;
    --carousel-card-radius: 16px;
    --carousel-card-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    --carousel-dot-size: 16px;
    --carousel-dot-gap: 24px;
  }

  .top-carousel__viewport {
    height: calc(var(--carousel-card-height) + var(--carousel-hover-space) + var(--carousel-shadow-space));
  }

  .top-carousel__dots {
    margin-top: 12px;
  }

  .top-carousel__placeholder {
    font-size: 48px;
  }

  .top-carousel__arrow {
    display: block;
  }

  .top-carousel__arrow--prev {
    left: calc(50% - (var(--carousel-card-width) / 2) - 20px);
  }

  .top-carousel__arrow--next {
    right: calc(50% - (var(--carousel-card-width) / 2) - 20px);
  }
}

@media (min-width: 680px) and (max-width: 1199px) {
  .top-carousel {
    height: 455px;
    padding-top: 32px;
    padding-bottom: 32px;

    --carousel-card-width: min(680px, calc(100% - 48px));
    --carousel-card-height: 357px;
    --carousel-slide-gap: 20px;
    --carousel-hover-space: 4px;
    --carousel-shadow-space: 8px;
    --carousel-card-radius: 12px;
    --carousel-card-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    --carousel-dot-size: 14px;
    --carousel-dot-gap: 20px;
  }

  .top-carousel__viewport {
    height: calc(var(--carousel-card-height) + var(--carousel-hover-space) + var(--carousel-shadow-space));
  }

  .top-carousel__dots {
    margin-top: 8px;
  }

  .top-carousel__placeholder {
    font-size: 40px;
  }

  .top-carousel__arrow {
    display: none;
  }
}

@media (max-width: 679px) {
  .top-carousel {
    min-width: 0;
    height: 252px;
    padding-top: 24px;
    padding-bottom: 24px;

    --carousel-card-width: min(335px, calc(100% - 40px));
    --carousel-card-height: 176px;
    --carousel-slide-gap: 12px;
    --carousel-hover-space: 3px;
    --carousel-shadow-space: 4px;
    --carousel-card-radius: 10px;
    --carousel-card-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    --carousel-dot-size: 12px;
    --carousel-dot-gap: 18px;
  }

  .top-carousel__viewport {
    height: calc(var(--carousel-card-height) + var(--carousel-hover-space) + var(--carousel-shadow-space));
  }

  .top-carousel__dots {
    margin-top: 9px;
  }

  .top-carousel__placeholder {
    font-size: 24px;
  }

  .top-carousel__arrow {
    display: none;
  }
}


/* =========================
  5. Banner
========================= */

.top-banner {
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  background: var(--color-placeholder-bg);
  box-shadow: var(--top-banner-shadow);
  transition:
    opacity var(--transition-default),
    transform var(--transition-default);
}

.top-banner:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.top-banner__placeholder {
  color: var(--color-placeholder-text);
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 1200px) {
  .top-banner {
    height: 160px;
    margin-bottom: 40px;
    border-radius: 12px;
    --top-banner-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
  }

  .top-banner__placeholder {
    font-size: 32px;
  }
}

@media (min-width: 680px) and (max-width: 1199px) {
  .top-banner {
    height: 116px;
    margin-bottom: 40px;
    border-radius: 12px;
    --top-banner-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
  }

  .top-banner__placeholder {
    font-size: 24px;
  }
}

@media (max-width: 679px) {
  .top-banner {
    height: 64px;
    margin-bottom: 32px;
    border-radius: 10px;
    --top-banner-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  }

  .top-banner__placeholder {
    font-size: 16px;
  }
}


/* =========================
  6. Article Section
========================= */

.article-section {
  margin-inline: auto;
}

.article-section__title {
  margin: 0;
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.4;
}

.article-section__grid {
  display: grid;
}

.post-card {
  width: 100%;
}

.post-card__link {
  display: block;
}

.post-card__thumb {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--post-thumb-height);
  overflow: hidden;
  border-radius: var(--post-thumb-radius);
  background: var(--color-placeholder-bg);
  box-shadow: var(--post-thumb-shadow);
  transition: opacity var(--transition-default), transform var(--transition-default);
}

.post-card__link:hover .post-card__thumb {
  opacity: 0.9;
  transform: translateY(-2px);
}

.post-card__placeholder {
  color: var(--color-placeholder-text);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1;
}

.post-card__title {
  width: 100%;
  margin: var(--post-title-margin-top) 0 0;
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--post-title-font-size);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--transition-default);

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  min-height: 4.5em;
  overflow: hidden;
}

.post-card__link:hover .post-card__title {
  text-decoration-color: currentColor;
}

.more-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--more-button-width);
  height: var(--more-button-height);
  margin-inline: auto;
  border-radius: var(--more-button-radius);
  background: var(--button-bg);
  color: var(--button-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--more-button-font-size);
  font-weight: 700;
  line-height: 1;
  transition: opacity var(--transition-default), transform var(--transition-default);
}

.more-button:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.more-button__icon {
  position: absolute;
  top: 50%;
  right: var(--more-button-icon-right);
  width: 9px;
  height: 14px;
  transform: translateY(-50%);
  object-fit: contain;
}

@media (min-width: 1200px) {
  .article-section {
    width: 940px;

    --post-thumb-height: 157px;
    --post-thumb-radius: 8px;
    --post-thumb-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    --post-title-margin-top: 8px;
    --post-title-font-size: 20px;

    --more-button-width: 280px;
    --more-button-height: 60px;
    --more-button-radius: 12px;
    --more-button-font-size: 20px;
    --more-button-icon-right: 16px;
  }

  .article-section__title {
    font-size: 32px;
  }

  .article-section__grid {
    grid-template-columns: repeat(3, 300px);
    gap: 24px 20px;
    margin-top: 24px;
  }

  .post-card__placeholder {
    font-size: 24px;
  }

  .more-button {
    margin-top: 40px;
  }
}

@media (min-width: 680px) and (max-width: 1199px) {
  .article-section {
    width: min(680px, calc(100% - 48px));

    --post-thumb-height: 173px;
    --post-thumb-radius: 10px;
    --post-thumb-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
    --post-title-margin-top: 8px;
    --post-title-font-size: 20px;

    --more-button-width: 330px;
    --more-button-height: 60px;
    --more-button-radius: 12px;
    --more-button-font-size: 20px;
    --more-button-icon-right: 24px;
  }

  .article-section__title {
    font-size: 28px;
  }

  .article-section__grid {
    grid-template-columns: repeat(2, 330px);
    gap: 24px 20px;
    margin-top: 24px;
  }

  .post-card__placeholder {
    font-size: 24px;
  }

  .more-button {
    margin-top: 32px;
  }
}

@media (max-width: 679px) {
  .article-section {
    width: min(335px, calc(100% - 40px));

    --post-thumb-height: 176px;
    --post-thumb-radius: 10px;
    --post-thumb-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    --post-title-margin-top: 8px;
    --post-title-font-size: 18px;

    --more-button-width: min(335px, calc(100% - 40px));
    --more-button-height: 48px;
    --more-button-radius: 10px;
    --more-button-font-size: 16px;
    --more-button-icon-right: 24px;
  }

  .article-section__title {
    font-size: 24px;
  }

  .article-section__grid {
    grid-template-columns: 335px;
    row-gap: 16px;
    margin-top: 16px;
  }

  .post-card__placeholder {
    font-size: 24px;
  }

  .more-button {
    margin-top: 24px;
  }
}


/* =========================
  7. PC Search Sidebar
========================= */

.top-sidebar {
  width: 220px;
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  align-self: start;
}

@media (min-width: 1200px) {
  .top-sidebar {
    position: sticky;
    top: 80px;
  }
}

.top-sidebar__section {
  width: 100%;
}

.top-sidebar__heading {
  margin: 0;
  color: var(--color-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.top-sidebar__section--search .top-sidebar__heading {
  font-size: 32px;
}

.top-sidebar__search-form {
  margin-top: 16px;
}

.top-sidebar__search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.top-sidebar__search-input {
  display: block;
  width: 220px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-text);
  border-radius: 3px;
  background: transparent;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  outline: none;
}

.top-sidebar__search-input::placeholder {
  color: #cccccc;
  opacity: 1;
}

.top-sidebar__search-input:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.top-sidebar__line {
  width: 220px;
  height: 2px;
  margin: 24px 0;
  border: 0;
  background: var(--color-line);
}

.top-sidebar__link-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.top-sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  width: 220px;
  min-height: 24px;
  padding-left: 8px;
  padding-right: 25px;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  transition: opacity var(--transition-default);
}

.top-sidebar__link:hover {
  opacity: 0.7;
}

.top-sidebar__link-arrow {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 9px;
  height: 14px;
  transform: translateY(-50%);
  object-fit: contain;
}

.top-sidebar__section--tags .top-sidebar__heading {
  margin-bottom: 16px;
}

.top-sidebar__tag-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top-sidebar__tag-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.sidebar-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: opacity var(--transition-default);
}

.sidebar-tag:hover {
  opacity: 0.7;
}

.sidebar-tag--outline {
  border: 1px solid var(--color-text);
  background: #f7f7f7;
  color: var(--color-text);
  font-size: 14px;
}

.sidebar-tag--filled {
  border: 1px solid var(--color-text);
  background: var(--color-text);
  color: var(--color-white);
  font-size: 10px;
}

@media (max-width: 1199px) {
  .top-sidebar {
    display: none;
  }
}


/* =========================
  8. Character Section
========================= */

:root {
  --character-bg: #dddddd;
  --character-text: #222222;
  --character-placeholder: #ffffff;
  --character-button-bg: #222222;
  --character-button-text: #ffffff;
}

.character-section {
  width: 100%;
  background: var(--character-bg);
  color: var(--character-text);
}

.character-section__inner {
  position: relative;
  height: 100%;
  margin-inline: auto;
}

.character-section__title {
  position: absolute;
  margin: 0;
  color: var(--character-text);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.4;
}

.character-section__placeholder {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  color: var(--character-placeholder);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.character-section__button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--character-button-bg);
  color: var(--character-button-text);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1;
  transition: opacity var(--transition-default), transform var(--transition-default);
}

.character-section__button:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.character-section__button-icon {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 14px;
  transform: translateY(-50%);
  object-fit: contain;
}

@media (min-width: 1200px) {
  .character-section {
    height: 400px;
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .character-section__inner {
    width: min(1200px, calc(100% - 80px));
  }

  .character-section__title {
    top: 64px;
    left: 0;
    font-size: 32px;
  }

  .character-section__placeholder {
    font-size: 56px;
  }

  .character-section__button {
    right: 0;
    bottom: 64px;
    width: 280px;
    height: 60px;
    border-radius: 12px;
    font-size: 20px;
  }

  .character-section__button-icon {
    right: 16px;
  }
}

@media (min-width: 680px) and (max-width: 1199px) {
  .character-section {
    height: 480px;
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .character-section__inner {
    width: min(680px, calc(100% - 48px));
  }

  .character-section__title {
    top: 48px;
    left: 0;
    font-size: 28px;
  }

  .character-section__placeholder {
    font-size: 56px;
  }

  .character-section__button {
    right: 0;
    bottom: 48px;
    width: 330px;
    height: 60px;
    border-radius: 12px;
    font-size: 20px;
  }

  .character-section__button-icon {
    right: 24px;
  }
}

@media (max-width: 679px) {
  .character-section {
    min-width: 0;
    height: 480px;
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .character-section__inner {
    width: min(335px, calc(100% - 40px));
  }

  .character-section__title {
    top: 40px;
    left: 0;
    font-size: 24px;
  }

  .character-section__placeholder {
    font-size: 48px;
  }

  .character-section__button {
    left: 0;
    bottom: 40px;
    width: min(335px, calc(100% - 40px));
    height: 48px;
    border-radius: 10px;
    font-size: 16px;
  }

  .character-section__button-icon {
    right: 24px;
  }
}


/* =========================
  9. Side Widget Area
========================= */

.side-widget-area {
  width: 220px;
  align-self: start;
}

.side-widget-area__placeholder {
  width: 220px;
  min-height: 1000px;
}

@media (min-width: 1200px) {
  .side-widget-area {
    position: sticky;
    top: 80px;
  }
}

@media (max-width: 1199px) {
  .side-widget-area {
    display: none;
  }
}


/* =========================================================
  WordPress / Responsive Fix
========================================================= */

.top-page {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.top-main__content,
.top-category-area__content {
  min-width: 0;
}

.top-carousel__thumb img,
.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__title {
  display: -webkit-box;
}

@media (min-width: 1200px) {
  .top-main__inner,
  .top-category-area__inner {
    width: min(var(--content-pc), calc(100% - 80px));
  }

  .top-main__content,
  .top-category-area__content,
  .article-section {
    width: 940px;
  }
}

@media (min-width: 680px) and (max-width: 1199px) {
  .top-main__inner,
  .top-category-area__inner {
    width: min(var(--content-tab), calc(100% - 48px));
  }

  .article-section {
    width: 100%;
  }

  .article-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 679px) {
  .top-main__inner,
  .top-category-area__inner,
  .character-section__inner {
    width: min(var(--content-sp), calc(100% - 40px));
  }

  .article-section {
    width: 100%;
  }

  .article-section__grid {
    grid-template-columns: 1fr;
  }

  .more-button,
  .character-section__button {
    width: 100%;
  }
}


/* =========================================================
  TOP Page Fix v2
  - SWELL interference adjustment
  - carousel placeholder / 1-post state
  - button/tag text visibility
  - sidebar sticky/search border
========================================================= */

/* TOPページ内だけ横スクロールを出さない */
.top-page {
  width: 100%;
  min-width: 0 !important;
  overflow-x: hidden;
}

/* 画像入りカード対応 */
.top-carousel__thumb img,
.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 黒背景ボタン・黒背景タグの文字がSWELL側CSSで消える対策 */
.top-page .more-button,
.top-page .more-button:visited,
.top-page .more-button:hover,
.top-page .more-button:focus,
.top-page .character-section__button,
.top-page .character-section__button:visited,
.top-page .character-section__button:hover,
.top-page .character-section__button:focus,
.top-page .sidebar-tag--filled,
.top-page .sidebar-tag--filled:visited,
.top-page .sidebar-tag--filled:hover,
.top-page .sidebar-tag--filled:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  text-decoration: none !important;
}

.top-page .more-button__text,
.top-page .character-section__button-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

/* 白背景タグ・記事タイトルなど */
.top-page .sidebar-tag--outline,
.top-page .sidebar-tag--outline:visited,
.top-page .sidebar-tag--outline:hover,
.top-page .sidebar-tag--outline:focus {
  color: #222222 !important;
  -webkit-text-fill-color: #222222;
  text-decoration: none !important;
}

.top-page .post-card__title {
  color: #222222 !important;
  -webkit-text-fill-color: #222222;
}

/* PC版「探す」検索窓の枠がSWELL側CSSで消える対策 */
.top-page .top-sidebar__search-input {
  border: 1px solid #222222 !important;
  background: transparent !important;
  color: #222222 !important;
  -webkit-text-fill-color: #222222;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}

.top-page .top-sidebar__search-input::placeholder {
  color: #cccccc !important;
  -webkit-text-fill-color: #cccccc;
  opacity: 1;
}

/* PC版サイドバー追従 */
@media (min-width: 1200px) {
  .top-sidebar,
  .side-widget-area {
    position: sticky !important;
    top: calc(var(--current-header-height, 84px) + 40px);
  }
}

/* カルーセル：投稿数が少ない時でも中央基準を崩しにくくする */
.top-carousel__track {
  min-width: 100%;
}

.top-carousel__slide {
  flex-shrink: 0;
}

/* 1枚運用時はJSで .is-single-slide が付きます */
.top-carousel.is-single-slide .top-carousel__track {
  justify-content: center;
  width: 100%;
  transform: none !important;
}

.top-carousel.is-single-slide .top-carousel__slide {
  margin-inline: auto;
}

.top-carousel.is-single-slide .top-carousel__arrow,
.top-carousel.is-single-slide .top-carousel__dots {
  display: none !important;
}

/* カルーセル矢印の表示補正 */
.top-carousel__arrow {
  border-radius: 999px;
}

.top-carousel__arrow img {
  display: block;
}

/* WordPress版ではカードタイトルはpで出す */
.post-card__title {
  display: -webkit-box;
}

/* 表示幅の最終補正 */
@media (min-width: 1200px) {
  .top-main__inner,
  .top-category-area__inner {
    width: min(var(--content-pc), calc(100% - 80px));
  }

  .top-main__content,
  .top-category-area__content,
  .article-section {
    width: 940px;
  }
}

@media (min-width: 680px) and (max-width: 1199px) {
  .top-main__inner,
  .top-category-area__inner {
    width: min(var(--content-tab), calc(100% - 48px));
  }

  .article-section {
    width: 100%;
  }

  .article-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 679px) {
  .top-main__inner,
  .top-category-area__inner,
  .character-section__inner {
    width: min(var(--content-sp), calc(100% - 40px));
  }

  .article-section {
    width: 100%;
  }

  .article-section__grid {
    grid-template-columns: 1fr;
  }

  .more-button,
  .character-section__button {
    width: 100%;
  }
}

/* =========================================================
  TOP Page Fix v3
  - carousel dots
  - footer margin
  - sidebar sticky
========================================================= */

/* =========================
  Carousel dots
========================= */

/* 未選択ドットが消える対策 */
.top-page .top-carousel__dot {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #d9d9d9 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  appearance: none;
  -webkit-appearance: none;
}

.top-page .top-carousel__dot.is-active,
.top-page .top-carousel__dot[aria-current="true"] {
  background: #222222 !important;
}

/* =========================
  Footer before margin
========================= */

/*
  TOPページ最下部とフッターの間の余白。
  直前の「AIとデザイン」セクション下に余白を作る。
*/
.top-page .top-category-area {
  padding-bottom: 80px !important;
}

@media (min-width: 680px) and (max-width: 1199px) {
  .top-page .top-category-area {
    padding-bottom: 64px !important;
  }
}

@media (max-width: 679px) {
  .top-page .top-category-area {
    padding-bottom: 48px !important;
  }
}

/* =========================
  PC sidebar sticky
========================= */

/*
  stickyは、親要素のoverflow指定や高さ不足で効かないことがある。
  PC表示ではTOPページ外枠の横スクロール制御を解除し、
  サイドバー自身を flex-start に固定する。
*/
@media (min-width: 1200px) {
  .top-page {
    overflow-x: visible;
  }

  .top-page .top-main,
  .top-page .top-main__inner,
  .top-page .top-category-area,
  .top-page .top-category-area__inner {
    overflow: visible !important;
  }

  .top-page .top-main__inner,
  .top-page .top-category-area__inner {
    align-items: flex-start;
  }

  .top-page .top-sidebar,
  .top-page .side-widget-area {
    position: sticky !important;
    top: calc(var(--current-header-height, 84px) + 40px) !important;
    align-self: flex-start !important;
    height: fit-content;
  }
}

/* =========================
  Search input / button text safety
========================= */

/* 念のため、検索窓と黒背景ボタンの上書きをさらに強める */
.top-page .top-sidebar__search-input,
.top-page input.top-sidebar__search-input {
  border: 1px solid #222222 !important;
  background-color: transparent !important;
  color: #222222 !important;
  -webkit-text-fill-color: #222222 !important;
  box-shadow: none !important;
  outline: none;
}

.top-page .more-button *,
.top-page .character-section__button *,
.top-page .sidebar-tag--filled * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.top-page .more-button,
.top-page .character-section__button,
.top-page .sidebar-tag--filled {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}