/* [ -- Master Stylesheet -- ]

------------------------------------------------------
:: Template Name: World - Blog & Magazine Template
:: Author: Colorlib
:: Author URL: https://colorlib.com
:: Version: 1.0.0
:: Created: March 21, 2018
:: Last Updated: March 21, 2018
-------------------------------------------------- */
/* :: Base CSS */
* {
  margin: 0;
  padding: 0; }

body {
  font-family: Arial,Helvetica,"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color: #8d8d8d;
  font-size: 14px;
  line-height: 1.4; }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #333;
  font-weight: 500;
  line-height: 1.3; }


a {
  transition-duration: 500ms;
  text-decoration: none;
  outline: none;
  font-size: 14px;
  font-weight: 400;
  font-family: "Ubuntu", sans-serif;
  color: #8d8d8d; }
  a:hover, a:focus {
    color: #0000ff; }

.svg-icon-sprite {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0; }

.svg-icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  width: 1.25em; }

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

.mt-30 {
  margin-top: 30px; }

.mt-70 {
  margin-top: 70px; }

.mb-30 {
  margin-bottom: 30px; }

.mb-50 {
  margin-bottom: 50px; }

.mb-70 {
  margin-bottom: 70px; }

.mb-100 {
  margin-bottom: 100px; }

.bg-img {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat; }

.hero-area.hero-area--adaptive-bg {
  background-image: var(--hero-bg-desktop, none);
}
@media (max-width: 767px) {
  .hero-area.hero-area--adaptive-bg {
    background-image: var(--hero-bg-mobile, none);
  }
}

.welcome-intro {
  align-items: center;
  animation: welcome-intro-fade 2000ms ease-out forwards;
  background-color: rgba(35, 35, 35, 0.35);
  display: flex;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  z-index: 1; }

.welcome-intro__spinner {
  animation: welcome-intro-spin 2400ms linear infinite;
  border: 3px solid transparent;
  border-radius: 50%;
  border-top-color: #f1f1f1;
  height: 70px;
  position: relative;
  width: 70px; }
.welcome-intro__spinner::before,
.welcome-intro__spinner::after {
  border: 3px solid transparent;
  border-radius: 50%;
  border-top-color: #f1f1f1;
  content: '';
  position: absolute; }
.welcome-intro__spinner::before {
  animation: welcome-intro-spin 2700ms linear infinite;
  inset: 7.5px; }
.welcome-intro__spinner::after {
  animation: welcome-intro-spin 1800ms linear infinite;
  inset: 20px; }

@keyframes welcome-intro-fade {
  0%, 45% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }

@keyframes welcome-intro-spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .welcome-intro {
    display: none; }
}

.height-250 {
  height: 250px !important; }

.height-400 {
  height: 400px !important; }

.section-padding-50 {
  padding: 50px 0; }

.background-overlay {
  position: relative;
  z-index: 2; }
  .background-overlay:after {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-color: rgba(0, 0, 0, 0.7); }

/* :: Header Area CSS */
.header-area {
  position: fixed;
  top: 0;
  width: 100%;
  margin-top: 20px;
  left: 0;
  z-index: 300;
  transition-duration: 500ms; }
  .header-area .navbar {
    border-bottom: 1px solid;
    border-color: #ffffff;
    transition-duration: 500ms;
    height: 45px; }
    .header-area .navbar .navbar-nav {
      margin-right: 50px; }
      .header-area .navbar .navbar-nav .nav-link {
        color: #8d8d8d;
        align-items: center;
        background: transparent;
        border: 0;
        display: flex;
        gap: 6px;
        min-height: 44px;
        padding: 0.5em 1em;
        text-align: left;
        width: 100%;
        font-weight: 500; }
        .header-area .navbar .navbar-nav .nav-link:hover, .header-area .navbar .navbar-nav .nav-link:focus {
          color: #ffffff; }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          .header-area .navbar .navbar-nav .nav-link {
            padding: 0.5em; } }
      .header-area .navbar .navbar-nav .nav-link.active {
        color: #ffffff; }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .header-area .navbar .navbar-nav {
          margin-right: 30px; } }
  .header-area.sticky {
    background-color: #000000;
    margin-top: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); }
    .header-area.sticky .navbar {
      border-color: #000000; }

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  cursor: pointer; }

.navbar-toggler {
  min-height: 44px;
  min-width: 44px; }

/* 992px 未満のヘッダの、 TAGS と YEARS の icon のボタンです。色はヘッダのナビゲーションにそろえます。 */
.header-shortcuts {
  display: flex;
  margin-left: auto;
  margin-right: 4px; }
.header-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8d8d8d;
  font-size: 20px; }
.header-shortcut.active {
  color: #ffffff; }
@media (hover: hover) {
  .header-shortcut:hover {
    color: #ffffff; } }
.header-shortcut:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px; }
/* NOTE: Bootstrap の focus の影はボタンの外側に広がりヘッダからはみ出すため、キーボード操作のときだけ内側に線を引きます。 */
.navbar-toggler:focus {
  box-shadow: none; }
.navbar-toggler:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px; }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #worldNav {
    background-color: #000000;
    padding: 30px; } }
@media only screen and (max-width: 767px) {
  #worldNav {
    background-color: #000000;
    padding: 15px 15px 30px 15px; } }

@media only screen and (max-width: 991px) {
  #worldNav {
    border-radius: 8px;
    margin-top: 8px;
    max-height: calc(100vh - 70px);
    overflow-y: auto; }
  .header-area .navbar .navbar-nav {
    margin-right: 0; }
  .header-area .navbar .navbar-nav .nav-link {
    padding: 10px 12px; }
  .header-area .navbar .navbar-nav .dropdown-toggle:after {
    margin-left: auto; }
  /* ヘッダの高さ (45px) の中に、 44px のハンバーガーボタンとロゴを収めます。 */
  .header-area .navbar {
    padding-top: 0;
    padding-bottom: 0; } }

/* ハンバーガーメニューは、 Bootstrap の collapse の高さのアニメーションをせず、すぐに開閉します。
   NOTE: 開閉の途中 (.collapsing) は高さ 0 でも padding が見えるため、表示しません。
         transition を止めないと、 Bootstrap が transitionend を待つ間、開くのが遅れます。 */
#worldNav.collapsing {
  display: none;
  transition: none; }

.hero-area {
  z-index: 1; }

/* Blog Content Area CSS */
.world-catagory-area .nav-tabs {
  padding: 10px 0;
  border-bottom: 2px solid #f1f1f1; }
  .world-catagory-area .nav-tabs .title {
    font-size: 18px;
    color: #000000;
    margin-bottom: 0;
    margin-right: auto;
    font-family: "Ubuntu", sans-serif;
    font-weight: 700; }
.world-catagory-area .tab-content {
  padding-top: 30px; }

/* 記事の終わりの、共有ボタンと © です。関連記事のカードと被リンクの間に置きます。 */
.post-share {
  margin: 24px 0 40px; }

/* タグ別・年別の一覧のページの見出しと件数です。 */
.list-heading__title {
  margin: 0;
  color: #000000;
  font-family: "Ubuntu", sans-serif;
  font-size: 22px;
  font-weight: 700; }
.list-heading__count {
  margin: 4px 0 0;
  color: #6b6b6b;
  font-size: 14px; }
/* 年や月のまとまりの見出しは、 h2 にしても見た目を変えません。 */
.list-group__title {
  margin: 0;
  color: inherit;
  font: inherit; }

.world-latest-articles .title {
  margin-top: 50px;
  margin-bottom: 30px; }
  .world-latest-articles .title h5 {
    display: block;
    font-size: 18px;
    color: #000000;
    margin-bottom: 0;
    margin-right: auto;
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    padding: 10px 0;
    border-bottom: 2px solid #f1f1f1; }

.post-sidebar-area {
  border-left: 2px solid #f1f1f1; }

.sidebar-widget-area {
  position: relative;
  z-index: 1;
  border-bottom: 2px solid #f1f1f1; }
  .sidebar-widget-area .title {
    display: block;
    font-size: 18px;
    color: #000000;
    margin-bottom: 0;
    margin-right: auto;
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    padding: 12px 0;
    border-bottom: 2px solid #f1f1f1;
    padding-left: 30px; }
  .sidebar-widget-area .widget-content {
    padding: 30px 0 30px 30px; }
    @media only screen and (max-width: 767px) {
      .sidebar-widget-area .widget-content {
        padding: 30px 0 30px 15px; } }
    .sidebar-widget-area .widget-content .social-area a {
      width: 36px;
      height: 36px;
      border: 1px solid;
      border-color: #f1f1f1;
      display: block;
      border-radius: 50%;
      text-align: center;
      line-height: 32px; }
  .sidebar-widget-area:last-of-type {
    border-bottom: none; }

.single-blog-content .post-meta {
  border-bottom: 2px solid;
  border-color: #f1f1f1;
  margin-bottom: 30px; }
  .single-blog-content .post-meta p {
    margin-bottom: 0;
    font-size: 14px;
    padding: 10px 0; }
    .single-blog-content .post-meta p a {
      font-size: 14px; }
.single-blog-content .post-content {
  padding: 0px 55px 60px 55px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); }
  @media only screen and (max-width: 767px) {
    .single-blog-content .post-content {
      padding: 0px 5px 30px 5px; } }
  .single-blog-content .post-content iframe[data-responsive-embed] {
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--embed-aspect-ratio, 16 / 9); }
  .single-blog-content .post-content h6 {
    line-height: 1.8;
    margin-bottom: 30px;
    color: #8d8d8d;
    font-family: "Ubuntu", sans-serif; }
  .single-blog-content .post-content blockquote {
    border-left: 2px solid;
    border-color: #0000ff;
    padding-left: 30px; }
    .single-blog-content .post-content blockquote h6 {
      margin-bottom: 10px;
      color: #000000; }
    .single-blog-content .post-content blockquote p {
      margin-bottom: 0; }

.comment_area .comment-content {
  padding: 30px 50px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); }
  @media only screen and (max-width: 767px) {
    .comment_area .comment-content {
      padding: 20px 15px; } }
  .comment_area .comment-content .comment-meta {
    margin-bottom: 30px; }
    .comment_area .comment-content .comment-meta p {
      flex: 0 0 calc(100% - 110px);
      border-bottom: 2px solid;
      border-color: #f1f1f1;
      margin-bottom: 0;
      font-size: 14px;
      padding: 10px 0; }
      .comment_area .comment-content .comment-meta p a {
        font-size: 14px; }
  .comment_area .comment-content .comment-body {
    white-space: pre-wrap; }
.comment_area .single_comment_area {
  list-style: none;
  margin-bottom: 30px; }
  .comment_area .single_comment_area:last-of-type {
    margin-bottom: 0; }

/* Header search: 検索欄は常に表示します。アニメーションや遅れはありません。 */
.header-search {
  position: relative;
  display: flex;
  align-items: center; }
.header-search__icon {
  position: absolute;
  left: 14px;
  color: #8d8d8d;
  pointer-events: none; }
.header-search__input {
  padding: 0 14px 0 38px;
  border: 1px solid #8d8d8d;
  border-radius: 1000px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  /* NOTE: iOS Safari は 16px 未満の入力欄で画面を拡大するため、 16px にします。 */
  font-size: 16px;
  outline: none; }
.header-search__input::placeholder {
  color: rgba(255, 255, 255, 0.6); }
/* focus のときは、枠を白く太くします (内側に 1px 足すので、外へは広がりません) 。 */
.header-search__input:focus {
  border-color: #ffffff;
  box-shadow: inset 0 0 0 1px #ffffff; }
@media only screen and (min-width: 992px) {
  .header-search__input {
    width: 220px;
    height: 36px; } }
@media only screen and (max-width: 991px) {
  .header-search {
    width: 100%;
    margin-top: 8px; }
  .header-search__input {
    width: 100%;
    height: 44px; } }

/* Footer Area CSS */
.footer-area {
  padding: 70px 0;
  position: relative;
  z-index: 1; }
  .footer-area .footer-single-widget .copywrite-text p {
    margin-bottom: 0; }
  .footer-area .footer-single-widget .footer-menu {
    flex-wrap: wrap; }
    .footer-area .footer-single-widget .footer-menu li {
      flex: 0 0 33.3333%;
      min-width: 33.3333%; }
      .footer-area .footer-single-widget .footer-menu li a {
        padding: 7.5px 5px;
        display: block; }
    @media only screen and (max-width: 767px) {
      .footer-area .footer-single-widget .footer-menu {
        margin: 50px 0; } }

/* Custom */
.centering {
  text-align: center; }
.navbar-brand img {
  width: auto;
  height: 25px; }

/* Post List */
.post-list-row {
  margin-bottom: 5px; }
  .post-list-row:last-of-type {
    margin-bottom: 0; }

/* Post Meta */
.post-meta .single-title {
  padding: 0;
  font-size: 1.4em; }
  .post-meta .post-tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding-left: 0; }
    .post-meta .post-tags li {
      list-style: none; }
    .post-meta .post-tags a {
      display: block;
      padding: 0 15px;
      line-height: 28px;
      height: 30px;
      border: 1px solid;
      border-color: #f1f1f1;
      margin: 5px 5px 5px 0; }

.post-meta .post-publish-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 4px; }

.copy-markdown-control {
  display: inline-flex;
  align-items: center; }
.copy-markdown-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #8d8d8d;
  cursor: pointer; }
.copy-markdown-button:hover,
.copy-markdown-button:focus-visible {
  color: #0000ff; }
.copy-markdown-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px; }
.copy-markdown-button.is-copied {
  color: #198754; }
.copy-markdown-error {
  margin-left: 4px;
  color: #b02a37;
  font-size: 0.85em; }

/* Color */
.custom-footer-area {
  background-color: #99CC66; }
  .custom-footer-area p,
  .custom-footer-area a {
    color: black; }
  .custom-footer-area li {
    list-style: none; }

/* Change visited links' color */
/* Try to change link color on top and list pages for now. */
a:visited h5,
a:visited .text-card__heading {
  color: #5a1ea5;
}

/* 投稿詳細ページのカラム幅をカスタムするためのクラスです */
@media (min-width: 992px) {
  .col-lg-main {
    flex: 0 0 80%;
    width: 80%;
    max-width: 80%;
  }
  .col-lg-toc {
    flex: 0 0 20%;
    width: 20%;
    max-width: 20%;
  }
}

/* TOC wrapper */
#toc-wrapper {
  max-height: calc(100vh - 50px);   /* ヘッダ分 (50px) を引いた高さに制限する */
  overflow-y: auto;                 /* 高さ超過時にスクロール可能にする */
  overscroll-behavior-y: contain;   /* scroll chaining を防止する */
  margin-bottom: 16px;              /* TOC ボックス下部に余白を設けます */
}
#toc-wrapper .markdown-body {
  padding-top: 16px;
  padding-bottom: 16px;                          /* 下部の窮屈さを解消するために追加します */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

/* TOC modal: 992px 未満で、右カラムの TOC の代わりに表示します。 */
.toc-modal-button {
  display: flex;
  align-items: center;
  gap: 8px;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 24px;
  /* ヘッダ (.header-area.sticky) と同じ色にします。 */
  background-color: #000000;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-family: "Ubuntu", sans-serif;
  font-size: 15px; }
/* NOTE: タッチ端末ではタップ後に :hover が残るため、 hover できる端末だけ色を変えます。 */
@media (hover: hover) {
  .toc-modal-button:hover {
    background-color: #0000ff; } }
.toc-modal-button:focus-visible,
.site-dialog__close:focus-visible {
  outline: 3px solid #99CC66;
  outline-offset: 2px; }

/* Site dialog: 目次、 TAGS 、 YEARS で共通のモーダルです。 */
/* NOTE: 共通の * { margin: 0; } がブラウザ標準の中央寄せを打ち消すため、 margin: auto を明示します。 */
.site-dialog {
  width: min(100vw - 32px, 480px);
  max-width: none;
  max-height: min(100vh - 96px, 600px);
  max-height: min(100dvh - 96px, 600px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  /* ヘッダ (.header-area.sticky) と同じ色にします。 */
  border-top: 4px solid #000000;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  animation: site-dialog-fade-in 150ms ease-out; }
.site-dialog[open] {
  display: flex;
  flex-direction: column; }
.site-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  animation: site-dialog-fade-in 150ms ease-out; }
.site-dialog__header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 4px 20px;
  border-bottom: 1px solid #f1f1f1; }
.site-dialog__title {
  margin: 0;
  color: #000000;
  font-family: "Ubuntu", sans-serif;
  font-size: 18px; }
.site-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #8d8d8d;
  font-size: 28px;
  line-height: 1; }
.site-dialog__close:hover {
  color: #0000ff; }
/* リスト部分だけをスクロールさせます。 */
.site-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 0 12px;
  overflow-y: auto;
  overscroll-behavior: contain; }
.site-dialog__body ul {
  margin: 0;
  padding-left: 0;
  list-style: none; }
/* 目次: 見出しのリンクです。 */
.site-dialog--toc .site-dialog__body a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 20px;
  color: #0366d6;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4; }
.site-dialog--toc .site-dialog__body a:hover,
.site-dialog--toc .site-dialog__body a:focus-visible {
  background-color: #f6f8fa;
  color: #0000ff; }
/* モーダルを開いている間は、背景の本文をスクロールさせません。 */
html:has(.site-dialog[open]) {
  overflow: hidden; }

@keyframes site-dialog-fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .site-dialog,
  .site-dialog::backdrop {
    animation: none; } }

/* 目次: 入れ子の見出しを字下げします。 */
.site-dialog--toc .site-dialog__body ul ul {
  padding-left: 16px; }

/* TAGS と YEARS: トップの「yyyy年一覧」と同じ more-card を、 1 列のボタンとして並べます。
   名前をボタンの中央に、件数を右端に表示し、ボタン全体がひとつのリンクだと分かるようにします。 */
.site-dialog__body .site-dialog__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 16px; }
/* NOTE: 左右の列を同じ幅にして、件数の幅に関係なく名前をボタン全体の中央に置きます。
         左右の列は最低 48px を確保し、長い名前や狭い画面でも名前と件数が重ならないようにします。 */
.site-dialog__link.more-card {
  display: grid;
  grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr);
  align-items: center;
  column-gap: 8px;
  /* 高さは、スマホで親指で押しやすいよう 52px 以上にします (WCAG 2.5.5 の 44px 、 web.dev の 48px より大きめ) 。 */
  min-height: 52px;
  margin: 0;
  padding: 14px 16px; }
.site-dialog__label {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center; }
.site-dialog__count {
  grid-column: 3;
  justify-self: end;
  min-width: 32px;
  padding: 0 7px;
  border-radius: 999px;
  background-color: #f1f1f1;
  color: #686868;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: center; }

/* Lower anchor link's destination position by header's height */
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  padding-top: 50px;
  margin-top: -50px; }

/* Components (BEM) */

/* ----- overlay-card ----- */
.overlay-card {
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.3s ease; }
.overlay-card:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
.overlay-card__thumbnail {
  position: relative;
  z-index: 1;
  overflow: hidden; }
.overlay-card__thumbnail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: auto; }
.overlay-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  box-sizing: border-box;
  padding: 15px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2; }
.overlay-card__image {
  width: 100%;
  transition: all 0.3s ease; }
.overlay-card:hover .overlay-card__image {
  transform: scale(1.05);
  opacity: 0.7; }
.overlay-card__tag {
  position: relative;
  z-index: 2; }
.overlay-card__tag a {
  display: inline-block;
  padding: 0 10px;
  height: 20px;
  line-height: 20px;
  background-color: #ffffff;
  color: #0000ff;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.75px; }
.overlay-card__tag a:hover,
.overlay-card__tag a:focus {
  background-color: #0000ff;
  color: #ffffff; }
.overlay-card__title::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1; }
.overlay-card__title:focus-visible::after {
  box-shadow: inset 0 0 0 2px #0000ff; }
.overlay-card__title h5,
.overlay-card__title:visited h5 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #ffffff; }
.overlay-card__meta p {
  margin-bottom: 0;
  font-size: 12px; }
.overlay-card__meta p a {
  font-size: 14px; }

/* ----- media-card ----- */
.media-card {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.3s ease; }
.media-card:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
.media-card__thumbnail {
  position: relative;
  z-index: 1;
  overflow: hidden;
  flex: 0 0 200px;
  min-width: 200px;
  margin-right: 20px; }
.media-card__image {
  width: 100%;
  transition: all 0.3s ease; }
.media-card:hover .media-card__image {
  transform: scale(1.05);
  opacity: 0.7; }
.media-card__body {
  padding: 5px 30px 5px 5px; }
.media-card__title::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1; }
.media-card__title:focus-visible::after {
  box-shadow: inset 0 0 0 2px #0000ff; }
.media-card__title h5 {
  font-size: 18px;
  margin-bottom: 10px; }
.media-card__meta p {
  margin-bottom: 0;
  font-size: 12px; }
.media-card__meta p a {
  font-size: 14px; }
.media-card__tag {
  position: relative;
  z-index: 2; }

@media only screen and (max-width: 767px) {
  .media-card {
    flex-wrap: wrap; }
  .media-card__thumbnail {
    flex: 0 0 100%;
    min-width: 100%; }
  .media-card__body {
    padding: 30px; } }

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .media-card {
    flex-wrap: nowrap; }
  .media-card__thumbnail {
    flex: 0 0 250px;
    min-width: 250px; }
  .media-card__body {
    padding: 5px; } }

/* ----- widget-card ----- */
.widget-card {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.3s ease; }
.widget-card:last-of-type {
  margin-bottom: 0; }
.widget-card:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
.widget-card:focus-visible {
  outline: 2px solid #0000ff;
  outline-offset: -2px; }
.widget-card__thumbnail {
  position: relative;
  z-index: 1;
  overflow: hidden;
  flex: 0 0 70px;
  min-width: 70px;
  margin-right: 15px; }
.widget-card__image {
  width: 100%;
  transition: all 0.3s ease; }
.widget-card:hover .widget-card__image {
  transform: scale(1.05);
  opacity: 0.7; }
.widget-card__body {
  padding: 5px; }
.widget-card__title h5 {
  font-size: 15.5px;
  margin-bottom: 0; }

/* ----- text-card ----- */
.text-card {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-bottom: 5px;
  transition: all 0.3s ease; }
.text-card:last-of-type {
  margin-bottom: 0; }
.text-card--clickable {
  cursor: pointer; }
.text-card--clickable:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
.text-card__body {
  padding: 5px; }
/* 一覧の行: 左にサムネイル、右にタイトルと日付 (とタグ) を並べます。
   サムネイルは、トップのカードと同じく行の縁にぴったり付けるため、余白は文字の側だけにとります。 */
.text-card--list .text-card__body {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0; }
/* 文字の余白は、関連記事のカードの本文 (.overlay-card__body) と同じ 15px です。
   行の方がサムネイルより高くなったときは、サムネイルを切り抜かずに上下の中央に置きます。 */
.text-card--list .text-card__main {
  flex: 1;
  min-width: 0;
  padding: 15px 15px 15px 0; }
/* 既存のサムネイル (360 × 195px) を、同じ比率のまま小さく表示します。 */
.text-card__thumbnail {
  flex: none;
  width: 96px;
  height: auto;
  aspect-ratio: 360 / 195;
  object-fit: cover; }
@media only screen and (min-width: 576px) {
  .text-card__thumbnail {
    width: 128px; } }
.text-card--clickable .text-card__title::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1; }
.text-card--clickable .text-card__title:focus-visible::after {
  box-shadow: inset 0 0 0 2px #0000ff; }
.text-card__heading {
  font-size: 15.5px;
  margin: 12px 0 4px;
  overflow-wrap: anywhere; }
/* 日付は補足なので小さめにし、白い背景とのコントラストは 4.5:1 以上にします。 */
.text-card__date {
  margin: 0 0 12px;
  color: #6b6b6b;
  font-size: 13px; }
.text-card--list .text-card__heading {
  margin: 0 0 4px; }
.text-card--list .text-card__date {
  margin: 0; }
/* 日付とタグのラベルは、 1 行に並べ、幅が足りないときは折り返します。 */
.text-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px; }
.text-card__tag {
  position: relative;
  z-index: 2;
  padding: 0 10px;
  height: 26px;
  line-height: 24px;
  border: 1px solid;
  border-color: #f1f1f1;
  font-size: 13px; }
/* 年別の一覧: タグのラベルを行の右下 (文字の余白 15px の内側) に寄せます。
   日付は左のままで、幅が足りず折り返したときもラベルは右端に付きます。 */
.text-card--tag-corner .text-card__meta {
  justify-content: space-between; }
.text-card--tag-corner .text-card__tag {
  margin-left: auto; }

/* ----- pickup-card ----- */
.pickup-card {
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.3s ease; }
.pickup-card:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
.pickup-card__thumbnail {
  position: relative;
  overflow: hidden; }
.pickup-card__image {
  width: 100%;
  transition: all 0.3s ease; }
.pickup-card:hover .pickup-card__image {
  transform: scale(1.05);
  opacity: 0.7; }
.pickup-card__tag {
  position: absolute;
  top: 15px;
  left: 30px;
  z-index: 10; }
.pickup-card__tag a {
  display: inline-block;
  padding: 0 10px;
  height: 20px;
  line-height: 20px;
  background-color: #ffffff;
  color: #0000ff;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.75px; }
.pickup-card__tag a:hover,
.pickup-card__tag a:focus {
  background-color: #0000ff;
  color: #ffffff; }
.pickup-card__body {
  padding: 20px 30px; }
.pickup-card__title::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1; }
.pickup-card__title:focus-visible::after {
  box-shadow: inset 0 0 0 2px #0000ff; }
.pickup-card__title h5 {
  font-size: 18px;
  margin-bottom: 10px; }
.pickup-card__meta p {
  margin-bottom: 0;
  font-size: 12px; }
.pickup-card__meta p a {
  font-size: 14px; }

/* ----- banner-card ----- */
.banner-card {
  display: block;
  position: relative;
  z-index: 1;
  max-width: 232px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease; }
.banner-card:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
.banner-card:focus-visible {
  outline: 2px solid #0000ff;
  outline-offset: -2px; }
.banner-card__thumbnail {
  position: relative;
  z-index: 1;
  overflow: hidden; }
.banner-card__image {
  width: 100%;
  height: auto;
  transition: all 0.3s ease; }
.banner-card:hover .banner-card__image {
  transform: scale(1.05);
  opacity: 0.7; }

/* ----- more-card ----- */
.more-card {
  display: block;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-top: 1rem;
  margin-bottom: 5px;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease; }
.more-card:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
.more-card:focus-visible {
  outline: 2px solid #0000ff;
  outline-offset: -2px; }