@charset "utf-8";

body {
  counter-reset: h2-counter;
  background-color: #fff;
}

strong {
  font-weight: bold;
}

blockquote {
  padding: 10px 20px;
  background-color: #f8f8f8;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

header.header_page {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0;
  height: 100px;
  background: url(/assets/img/bg/page_header_bg.png);
  background-size: unset !important;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 60px 0 0;
}

/* 各ページのスタイル */
.pagination li {
  margin: 0 5px;
}

/* 数字のリンクのスタイル */
.pagination a {
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
  font-weight: 900;
  border-radius: 50%;
  font-size: 30px;

  @media (max-width: 767px) {
    font-size: 14px;
  }
}

/* 現在のページ */
.pagination .current {
  background-color: rgba(198, 46, 38, 0.3);
  padding: 10px 18px;
  font-size: 30px;
  border-radius: 50%;

  @media (max-width: 767px) {
    font-size: 14px;
    padding: 0;
  }
}

/* 前・次ボタンのスタイル */
.pagination .prev,
.pagination .next {
  /* border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  color: #480000;
  font-size: 18px; */
}

/* 無効な前・次ボタン */
.pagination .disabled {
  border: 1px solid #ddd;
  color: #ddd;
  pointer-events: none;
}

/* 次ボタンの強調 */
.pagination .next {
  background-color: #D20000;
  color: white;
}

/* 前ボタンの強調 */
.pagination .prev {
  background-color: white;
  color: #D20000;
}

/* 前・次ボタンのスタイル */
.pagination .prev,
.pagination .next {
  border-radius: 50%;
  background-color: #84330F;
  position: relative;
  /* 擬似要素を使うために相対位置を設定 */
}

/* 矢印 (左) を before で作成 */
.pagination .prev::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-135deg);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(-135deg);
}

/* 矢印 (右) を after で作成 */
.pagination .next::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

/* 「...」 のスタイル */
.pagination .dots {
  pointer-events: none;
}


/* 以下金子記載 */

.inner {
  max-width: 1120px;
  padding-inline: var(--content-padding);
  margin-inline: auto;

  @media (max-width: 767px) {
    max-width: 600px;
  }
}

.topics {
  background-image: none;
  background-color: #fff !important;
  padding-bottom: 140px;
  margin-top: 160px;

  @media (min-width: 768px) and (max-width: 1023px) {
    padding-bottom: 100px;
    margin-top: 100px;
  }

  @media (max-width: 767px) {
    padding-bottom: 80px;
    margin-top: 100px;
  }
}

.topics__wrapper {
  max-width: var(--container-max);
  background-color: #fff;
  border-radius: 24px;
  padding: 0 60px 90px;

  @media (max-width: 767px) {
    padding: 15px 0 50px;
  }
}

.topics__categoryWrapper {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.topics__tabLists {
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;

  @media (max-width: 767px) {
    gap: 10px;
  }
}

.topics__tabList {
  background-color: #fff;
  text-align: center;
  border: 1px solid var(--color-main);
  border-radius: 8px;
  width: 33%;
  transition: background-color 0.3s ease;
}

.topics__tabList.--current {
  background-color: var(--color-main);
  color: #fff;
}

.topics__tabList.--current span {
  color: #fff;
  transition: color 0.3s ease;
}

@media (any-hover: hover) {
  .topics__tabList:hover {
    background-color: var(--color-main);
  }

  .topics__tabList:hover span {
    color: #fff;
  }
}

.topics__tabLink {
  display: block;
  color: var(--color-main);
  padding-block: 10px;
}

.topics__categoryEnglish {
  display: block;
}

.topics__categoryJapanese {
  display: block;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.topics__categoryEn {
  display: block;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.topics__categoryJa {
  display: block;
  line-height: calc(32 / 18);

  @media (max-width: 767px) {
    font-size: 14px;
  }
}

.topics__contentWrapper {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-top: 68px;

  @media (max-width: 1023px) {
    display: block;
  }

  @media (max-width: 767px) {
    margin-top: 30px;
  }
}

.topics__articleList {
  max-width: 720px;
  width: 100%;

  @media (min-width: 1024px) and (max-width: 1100px) {
    max-width: 600px;
  }

  @media (max-width: 1023px) {
    max-width: 100%;
  }
}

.topics__article {
  border-bottom: 3px solid #EDEDED;
  padding-block: 30px;

  @media (max-width: 767px) {
    border-width: 1px;
  }
}

.topics__article:first-child {
  padding-top: 0;
}

.topics__articleLink {
  display: block;
  text-decoration: none;
  color: inherit;
}

.topics__articleInner {
  display: flex;
  gap: 20px;

  @media (max-width: 767px) {
    flex-direction: column;
    gap: 10px;
  }
}

.topics__articleImage {
  max-width: 250px;

  @media (max-width: 767px) {
    max-width: 100%;
    order: 4;
  }
}

.topics__articleImage img {
  aspect-ratio: 250 / 180;
  object-fit: cover;
}

.topics__articleContent {
  flex: 1;

  @media (max-width: 767px) {
    display: contents;
  }
}

.topics__articleTitle {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: calc(40 / 28);
  color: #84330F;

  @media (max-width: 767px) {
    font-size: 24px;
    order: 2;
  }
}

.topics__articleDate {
  display: block;
  font-size: 2.0rem;
  font-weight: 500;

  @media (max-width: 767px) {
    font-size: 13px;
    line-height: 1;
    order: 1;
  }
}

.topics__articleTagLists {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  @media (max-width: 767px) {
    order: 3;
  }
}

.topics__articleTagLists.--single {
  margin-top: 0;
}

.topics__articleTagList {
  background-color: var(--color-text);
  border-radius: 16px;
  padding: 5px 10px 8px;
  line-height: 1;

  @media (max-width: 767px) {
    display: flex;
    align-items: center;
  }
}

.topics__articleTagList span {
  font-size: 13px;
  font-weight: 700;
  color: #fff;

  @media (max-width: 767px) {
    font-size: 10px;
  }
}

.topics__articleTag {
  display: inline-block;
}

.topics__articleEmpty {}

.topics__tagSection {
  margin-top: 60px;
}

.topics__tagHeading {
  font-size: 24px;
  font-weight: 900;
  color: #84330F;
  text-align: left;
  margin-bottom: 30px;

  @media (max-width: 767px) {
    font-size: 20px;
    margin-bottom: 20px;
  }
}

.topics__tagList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;

  @media (max-width: 767px) {
    gap: 1rem;
  }
}

.topics__tagItem {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.3s ease;

  @media (max-width: 767px) {
    font-size: 10px;
  }
}

.topics__tagLink {
  display: block;
  padding: .6rem 2.4rem;
  font-size: 1.4rem;
  text-decoration: none;
  border: 2px solid var(--color-text);
  border-radius: 100vh;
  color: var(--color-text);
  transition: all 0.3s ease;

  @media (max-width: 767px) {
    padding: .4rem 1.8rem;
  }
}

@media (any-hover: hover) {
  .topics__tagLink:hover {
    background-color: var(--color-text);
    color: #fff;
  }
}

.topics__tagEmpty {
  color: #999;
}

.page-numbers {
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #84330F;
  transition: background-color 0.3s ease;

  @media (max-width: 767px) {
    width: 20px !important;
    height: 20px !important;
  }
}

.pagination__item {
  display: flex;
  gap: 20px;
}

@media (any-hover: hover) {
  a.page-numbers:hover {
    background-color: rgba(198, 46, 38, 0.3);
  }
}

.topics__sidebar {
  flex: 1;

  @media(max-width: 1023px) {
    margin-top: 60px;
  }
}

.topics__sidebarInner {}

.topics__sidebarContent {
  margin-top: 40px;
}

.topics__sidebarContent:first-child {
  margin-top: 0;
}

.topics__sidebarTitle {
  background-color: #84330F;
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
}

.topics__sidebarList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.topics__sidebarItem {
  border-bottom: 3px solid #EDEDED;
}

.topics__sidebarLink {
  display: block;
  color: var(--color-text);
  text-align: left;
  padding-block: 20px;
  transition: background-color 0.3s ease;
}

@media (any-hover: hover) {
  .topics__sidebarLink:hover {
    opacity: 0.7;
  }
}

.topics__sidebarItemTitle {
  line-height: calc(20 / 14);
  margin-bottom: 4px;
}

.topics__sidebarItemDate {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.topics__rankingBadge {
  flex-shrink: 0;
  display: block;
  width: 30px;
  height: 30px;
}

.topics__sidebarItem:nth-child(1) .topics__rankingBadge {
  background: url('/assets/img/topics/num1.webp') no-repeat center center / cover;
}

.topics__sidebarItem:nth-child(2) .topics__rankingBadge {
  background: url('/assets/img/topics/num2.webp') no-repeat center center / cover;
}

.topics__sidebarItem:nth-child(3) .topics__rankingBadge {
  background: url('/assets/img/topics/num3.webp') no-repeat center center / cover;
}

/* 週間ランキング用のスタイル */
.topics__sidebarRankingItem {
  border-bottom: 1px solid #ddd;
  padding-block: 20px;
}

.topics__sidebarRankingLink {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 10px;
  text-decoration: none;
}

@media (any-hover: hover) {
  .topics__sidebarRankingLink:hover {
    opacity: 0.7;
  }
}

.topics__sidebarRankingItemTitle {
  flex: 1;
  line-height: calc(20 / 14);
  margin: 0;
  color: var(--color-text);
}

.topics__sidebarRankingItemDate {
  width: 100%;
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-left: 40px;
  color: var(--color-text);
}

.topics__sidebarRankingItem:nth-child(1) .topics__rankingBadge {
  background: url('/assets/img/topics/num1.webp') no-repeat center center / cover;
}

.topics__sidebarRankingItem:nth-child(2) .topics__rankingBadge {
  background: url('/assets/img/topics/num2.webp') no-repeat center center / cover;
}

.topics__sidebarRankingItem:nth-child(3) .topics__rankingBadge {
  background: url('/assets/img/topics/num3.webp') no-repeat center center / cover;
}

/* サイドバー月間アーカイブ */
.topics__sidebarArchive {
  margin-top: 0;
}

.topics__sidebarArchiveDetails {
  border-bottom: 3px solid #EDEDED;
}

.topics__sidebarArchiveDetails:first-of-type {
  border-top: none;
}

.topics__sidebarArchiveYear {
  position: relative;
  padding: 12px 0;
  padding-right: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  transition: opacity 0.3s ease;
  outline: none;
  user-select: none;
  text-align: left;
}

/* summary要素のデフォルトマーカーを非表示 */
.topics__sidebarArchiveYear::-webkit-details-marker {
  display: none;
}

.topics__sidebarArchiveYear::marker {
  display: none;
}

@media (any-hover: hover) {
  .topics__sidebarArchiveYear:hover {
    opacity: 0.7;
  }
}

/* カスタムシェブロンアイコン（V字型） */
.topics__sidebarArchiveYear::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-right: 2px solid #84330F;
  border-bottom: 2px solid #84330F;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.topics__sidebarArchiveMonthList {
  padding-left: 16px;
  padding-bottom: 8px;
  overflow: hidden;
  /* JavaScriptで完全に制御するため、初期値は設定しない */
  opacity: 0;
  transition: height 0.3s ease, opacity 0.3s ease, padding-bottom 0.3s ease;
}

/* detailsが開いた時のスタイル（JavaScriptで制御） */
.topics__sidebarArchiveDetails[open] .topics__sidebarArchiveMonthList {
  opacity: 1;
}

.topics__sidebarArchiveMonthLink {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

@media (any-hover: hover) {
  .topics__sidebarArchiveMonthLink:hover {
    opacity: 0.7;
  }
}

.topics__sidebarArch.recommendation_menu-headiveMonthCount {
  margin-left: 4px;
  color: #999;
}

.category.category-news,
.category.category-blog {
  position: static;
  width: 100%;
  border-radius: initial;
}



/* 投稿記事の本文内のタグスタイル */
.page_container_single_content {
  padding: 0;
}

.page_container_single_content,
.page_container_single_content p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0.5em auto;
}

.page_container_single_content img,
.page_container_single_content p img {
  width: auto;
  height: unset !important;
  margin: 1em auto;
}

.page_container_single_content a,
.page_container_single_content p a {
  color: #3F154B;
  text-decoration: underline;
}

.page_container_single_content a:hover,
.page_container_single_content p a:hover {
  text-decoration: none;
  opacity: 1;
}

.page_container_single_content h1,
.page_container_single_content p h1,
.page_container_single_content h2,
.page_container_single_content p h2,
.page_container_single_content h3,
.page_container_single_content p h3,
.page_container_single_content h4,
.page_container_single_content p h4,
.page_container_single_content h5,
.page_container_single_content p h5 {
  margin: 3em auto 1em;
  font-weight: bold;
}

.page_container_single_content h1,
.page_container_single_content p h1 {
  font-size: 24px;
}

.page_container_single_content h2,
.page_container_single_content p h2 {
  font-size: 22px;
}

.page_container_single_content h3,
.page_container_single_content p h3 {
  font-size: 20px;
  padding: 0.25em 0.5em;
  border-left: solid 5px #3F154B;
}

.page_container_single_content h4,
.page_container_single_content p h4 {
  font-size: 18px;
  background: #3f154b30;
  padding: 0.5em;
}

.page_container_single_content h5,
.page_container_single_content p h5 {
  font-size: 16px;
  color: #3F154B;
}

.page_container_single_content h6,
.page_container_single_content p h6 {
  font-size: 14px;
}

.page_container_single_content strong,
.page_container_single_content b {
  font-weight: bold;
}

.page_container_single_content em,
.page_container_single_content i {
  font-style: italic;
}

.page_container_single_content u {
  text-decoration: underline;
}

.page_container_single_content s,
.page_container_single_content strike,
.page_container_single_content del {
  text-decoration: line-through;
}

.page_container_single_content sub {
  vertical-align: sub;
  font-size: smaller;
}

.page_container_single_content sup {
  vertical-align: super;
  font-size: smaller;
}

.page_container_single_content ul,
.page_container_single_content ol {
  padding-left: 30px;
  margin: 1em 0 1.5rem;
}

.page_container_single_content ul:not([style*="list-style-type:"]) {
  list-style-type: disc;
}

.page_container_single_content ol:not([style*="list-style-type:"]) {
  list-style-type: decimal;
}

.page_container_single_content ul li,
.page_container_single_content ol li {
  list-style-type: inherit;
}

.page_container_single_content blockquote {
  margin: 20px 0;
  padding: 15px 20px;
  border-left: 4px solid #999999;
  background-color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

.page_container_single_content code {
  background-color: rgba(255, 255, 255, 0.3);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: 0.9em;
  border: none !important;
}

.page_container_single_content pre {
  background-color: rgba(255, 255, 255, 0.3);
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  white-space: pre-wrap;
  border: none;
}

.page_container_single_content pre code {
  background: none;
  padding: 0;
}

.page_container_single_content a {
  color: #0073aa;
  text-decoration: underline;
  line-height: 1.5;
}

.page_container_single_content a:hover {
  text-decoration: none;
}

.page_container_single_content a:has(img) {
  display: block;
}

.page_container_single_content a:has(img.aligncenter),
.page_container_single_content p:has(img.aligncenter) {
  text-align: center;
}

.page_container_single_content a:has(img.alignleft),
.page_container_single_content p:has(img.alignleft) {
  text-align: left;
}

.page_container_single_content a:has(img.alignright),
.page_container_single_content p:has(img.alignright) {
  text-align: right;
}

.page_container_single_content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.page_container_single_content table th,
.page_container_single_content table td {
  border: 1px solid #333333;
  padding: 12px;
  text-align: left;
  line-height: 1.5;
}

.page_container_single_content table th {
  background-color: rgba(255, 255, 255, 0.3);
  font-weight: bold;
}

.page_container_single_content table tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.3);
}

.page_container_single_content img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.page_container_single_content hr {
  border: none;
  border-top: 2px solid #333333;
  margin: 30px 0;
}

.page_container_single_content .nbsp-placeholder::before {
  content: '\00a0';
}

.page_container_single_content .wp-block-quote {
  border-left: 4px solid #333333;
  margin: 20px 0;
  padding-left: 20px;
  font-style: italic;
}

.page_container_single_content p+p {
  margin-top: 1em;
}