@charset "UTF-8";
/* ==========================================================
   記事詳細(自前実装 / フェーズ3 T-07・T-08)

   移行元:Elementor「Blog Detail」(ID 207)/「Blog Detail(mibot)」(20277)
   値の出典:
     - uploads/elementor/css/post-207.css(Elementorが生成していたCSS)
     - Elementor 207 の各ウィジェットのカスタムCSS(#post_content …)
     - カスタマイザーの追加CSS(X-11)のパンくず部分(.elementor-widget-shortcode …)を
       Elementor のクラスに依存しない形に書き換えたもの
     - 本番の計算済みスタイル(mibot-baseline/shot-single.js で実測)

   ブレークポイントは Elementor の既定に合わせる。
     スマホ     〜767px
     タブレット  768〜1024px
     PC        1025px〜

   カードの見た目は post-card.css。カルーセル本体は Swiper(CDN)の CSS。
   ========================================================== */

/* ---- Elementor の frontend.css が .elementor 配下に当てていた既定値 ----
   本文(the_content)の見た目はこれに依存していたので、同じものを自前の枠に当てる。 */
.l-single *,
.l-single *::before,
.l-single *::after {
  box-sizing: border-box;
}

.l-single a {
  box-shadow: none;
  text-decoration: none;
}

.l-single hr {
  margin: 0;
  background-color: transparent;
}

.l-single img {
  height: auto;
  max-width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.l-single embed,
.l-single iframe,
.l-single object,
.l-single video {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: none;
  line-height: 1;
}

/* ---- 全体 ---- */
.l-single {
  display: block;
  font-family: "M PLUS 1", Jeko, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
}

/* ---- 本文の列(幅900) ---- */
.l-single__head {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 0 10px;
}

.l-single__headInner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 20px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 0;
}

/* ---- パンくず(Yoast)。X-11 の .elementor-widget-shortcode 向けの記述を移植 ---- */
.l-single__breadcrumb {
  margin: 10px 0 30px;
}

.c-breadcrumb span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #999;
}

.c-breadcrumb span span a {
  color: #999;
  text-decoration: none;
}

.c-breadcrumb span span a:hover {
  color: #313636;
}

.c-breadcrumb .breadcrumb_last {
  color: #313636;
}

.c-breadcrumb span + span::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1px;
  margin-right: 10px;
  margin-left: 10px;
  background-color: #ddd;
}

/* ---- 日付 + カテゴリ ---- */
.l-single__meta {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.l-single__date,
.l-single__category {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.l-single__category {
  background-color: #222222;
}

.l-single__dateText,
.l-single__categoryText {
  display: block;
  padding: 6px 10px;
  font-family: "M PLUS 1", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;
  text-align: center;
}

.l-single__dateText {
  line-height: 12px;
  color: #343434;
}

.l-single__categoryText {
  line-height: 14px;
  color: #ffffff;
}

.l-single__categoryText a {
  color: #ffffff;
}

/* Elementor 207 のカスタムCSS: selector :hover { color:#F6BE00 !important } */
.l-single__category :hover {
  color: #f6be00 !important;
}

/* ---- タイトル ---- */
.l-single__title {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Jeko", "M PLUS 1", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  color: #333333;
}

/* ---- 罫線 ---- */
.l-single__divider {
  display: block;
  width: 100%;
  height: 1px;
  border-top: 1px solid #333333;
}

/* ---- 本文 ---- */
.l-single__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

#post_content {
  width: 100%;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.8;
  color: #333333;
}

/* 記事 14163(heat-test)だけ本文を Elementor のエディタで作ってあり、本番では本文が
   Elementor のコンテナ(e-con-boxed、既定の padding 10px)の中に入っていた。Elementor 停止後は
   post_content(同じ本文のプレーン HTML)を出すので、その 10px を同じ記事だけに再現する
   (docs/decisions.md「Elementor 製の記事本文(14163 heat-test)」)。 */
.postid-14163 #post_content {
  padding: 10px;
}

/* 見出しは Jeko 優先(style.css の [class*="elementor-"] h2 … と同じ) */
#post_content h1,
#post_content h2,
#post_content h3,
#post_content h4,
#post_content h5,
#post_content h6 {
  font-family: "Jeko", "M PLUS 1", sans-serif;
}

/* Elementor 207 theme-post-content のカスタムCSS(原文どおり) */
#post_content h2:first-child {
  margin-top: 0 !important;
}

#post_content a {
  color: #333;
  font-weight: bold;
  text-decoration: underline !important;
}

#post_content img {
  vertical-align: bottom;
}

#post_content h2 {
  margin-top: 2.5rem;
  font-size: 26px;
  line-height: 1.5;
  font-weight: bold;
}

#post_content h3 {
  margin-top: 2.5rem;
  font-size: 22px;
  line-height: 1.5;
  font-weight: bold;
}

#post_content h4 {
  margin-top: 1.5rem;
  font-size: 20px;
  line-height: 1.5;
  font-weight: bold;
}

#post_content ul {
  margin-bottom: 0.9rem;
}

#post_content blockquote {
  position: relative;
  color: #333;
  margin: 1.5rem 0;
  padding: 20px;
  background-color: #dddddd;
}

#post_content blockquote p:last-child {
  margin-bottom: 0;
}

/* ---- 関連記事(幅1300) ---- */
.l-related {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin: 80px 0 50px;
  padding: 0 15px;
}

.l-related__inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 20px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.l-related__head {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.l-related__title {
  flex: 0 0 auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Jeko", "M PLUS 1", sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.8px;
  text-align: left;
  color: #000000;
}

.l-related__carouselWrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.l-related__carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: fit-content;
}

.l-related__swiper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.l-related__swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

/* Swiper 初期化前もカードが縦に積まれないようにしておく */
.l-related__swiper:not(.swiper-initialized) .swiper-wrapper {
  gap: 20px;
  overflow: hidden;
}

.l-related__swiper:not(.swiper-initialized) .swiper-slide {
  max-width: calc((100% - 2.6 * 20px) / 3.6);
}

/* スライド内のカードは高さを揃える(Elementor: .swiper-slide > .elementor-element { height:100% }) */
.l-related__swiper .swiper-slide > .c-postCard {
  height: 100%;
}

/* 矢印。Elementor loop-carousel の設定値:
   prev = 右端基準 -100px / 上 -60px、next = 右 30px / 上 -60px、大きさ 40px */
.l-related__prev,
.l-related__next {
  position: absolute;
  top: -60px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 40px;
  color: #000000;
  cursor: pointer;
  transition-duration: 0.25s;
}

.l-related__prev {
  left: calc(100% - 100px);
  transform: translate(-100%, 0);
}

.l-related__next {
  right: 30px;
}

.l-related__prev svg,
.l-related__next svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: #000000;
}

.l-related__prev:hover,
.l-related__next:hover {
  color: #f6be00;
}

.l-related__prev:hover svg,
.l-related__next:hover svg {
  fill: #f6be00;
}

.l-related__prev.swiper-button-disabled,
.l-related__next.swiper-button-disabled {
  opacity: 0.3;
}

/* ================= タブレット(〜1024px) ================= */
@media (max-width: 1024px) {
  .l-single__head {
    margin-top: 20px;
    padding: 0 15px;
  }

  .l-single__headInner {
    padding: 0;
  }

  .l-related__inner {
    max-width: 900px;
  }

  .l-related__swiper:not(.swiper-initialized) .swiper-slide {
    max-width: calc((100% - 20px) / 2);
  }
}

/* ================= スマホ(〜767px) ================= */
@media (max-width: 767px) {
  .l-single__head {
    margin-top: 0;
    padding: 0 20px;
  }

  .l-single__headInner {
    max-width: 100%;
  }

  .l-single__breadcrumb {
    margin: 10px 0 20px;
  }

  .l-single__meta,
  .l-related__head {
    flex-wrap: wrap;
  }

  .l-single__title {
    font-size: 20px;
  }

  .l-single__body {
    gap: 20px;
  }

  #post_content {
    font-size: 14px;
  }

  /* Elementor 207 theme-post-content のカスタムCSS(原文どおり) */
  #post_content h2 {
    font-size: 20px;
  }

  #post_content h3 {
    font-size: 16px;
  }

  #post_content h4 {
    font-size: 14px;
  }

  .l-related {
    margin: 60px 0 50px;
    padding: 0 20px;
  }

  .l-related__inner {
    max-width: 100%;
  }

  .l-related__title {
    font-size: 28px;
  }

  .l-related__swiper:not(.swiper-initialized) .swiper-slide {
    max-width: 100%;
  }
}

/* X-11 のパンくず:375〜767px の指定(原文どおり) */
@media screen and (min-width: 375px) and (max-width: 767px) {
  .c-breadcrumb span {
    font-size: 8px;
  }

  .c-breadcrumb span span a {
    white-space: nowrap;
  }

  .c-breadcrumb span + span::before {
    width: 1rem;
    margin-right: 4px;
    margin-left: 4px;
  }

  .c-breadcrumb span span {
    margin-top: 5px;
  }
}