/* ============================================
   BE LEGACY - Article Detail Styles
   ============================================ */

:root {
  --article-max: 1280px;
  --article-content: 1040px;
  --article-pad-x: 80px;
  --article-color: #303034;
  --article-rule: #ccc;
}

/* ---------- Article Hero ---------- */
.article-hero {
  padding: 38px 0 0;
  color: var(--article-color);
}

.article-hero__inner {
  max-width: var(--article-max);
  margin: 0 auto;
  padding: 0 var(--article-pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.article-hero__catch {
  width: 100%;
  max-width: var(--article-content);
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--article-color);
  margin: 0;
}

.article-hero__thumb {
  width: 100%;
  max-width: var(--article-content);
  margin: 0;
}

.article-hero__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.article-hero__spotify {
  width: 100%;
  max-width: 581px;
  overflow: hidden;
}

.article-hero__spotify iframe {
  width: 100%;
  display: block;
}

.article-hero__author {
  width: 100%;
  max-width: var(--article-content);
  display: flex;
  flex-direction: column;
  gap: 12px;
  @media (max-width: 768px) {
    gap: 8px;
  }
}

.article-hero__name,
.article-hero__role {
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--article-color);
  margin: 0;
  white-space: pre-line;
}

.article-hero__role {
  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.article-hero__profile {
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--article-color);
  margin: 8px 0 0;
}

.article-hero__tags {
  width: 100%;
  max-width: var(--article-content);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Article Body ---------- */
.article-body {
  /* margin-top: 60px; */
  margin-top: 24px;
  padding: 0 var(--article-pad-x) 80px;
}

.article-body__inner {
  max-width: var(--article-content);
  margin: 0 auto;
  color: var(--article-color);
}

/* 段落 */
.article-body__inner p {
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--article-color);
}

.article-body__inner p + p {
  margin-top: 16px;
}

/* 画像 */
.article-body__inner figure,
.article-body__inner .wp-block-image {
  margin: 40px 0;
}

.article-body__inner figure img,
.article-body__inner .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

.article-body__inner {
  /* セクション見出し（目次対象 h2） */
  .content-block__heading {
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
    color: var(--article-color);
    padding: 0 0 12px;
    margin: 80px 0 40px;
    border-bottom: 2px solid var(--article-color);
    scroll-margin-top: 120px;
    @media (max-width: 767px) {
      font-size: 18px;
      margin: 40px 0 24px;
      scroll-margin-top: 60px;
    }
  }

  .content-block__heading:first-child {
    margin-top: 0;
  }

  .content-block__heading-exclusion {
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
    color: var(--article-color);
    padding: 0 0 12px;
    margin: 80px 0 40px;
    border-bottom: 2px solid var(--article-color);
    @media (max-width: 767px) {
      font-size: 18px;
      margin: 40px 0 24px;
    }
  }

  /* ---------- ファシリテーターボックス ---------- */
  .facilitator-box {
    width: 100%;
    max-width: var(--article-content);
    margin: 24px auto;
    padding: 16px;
    border-top: 1px solid var(--article-rule);
    border-bottom: 1px solid var(--article-rule);
    color: var(--article-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .facilitator-box__label,
  .facilitator-box__name {
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0.05em;
    color: var(--article-color);
    margin: 0;
  }

  .facilitator-box > .facilitator-box__name:empty {
    display: none;
  }

  .facilitator-box > p:not(.facilitator-box__label):not(.facilitator-box__name),
  .facilitator-box .wp-block-paragraph {
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.05em;
    color: var(--article-color);
    margin: 0;
    @media (max-width: 767px) {
      font-size: 13px;
    }
  }

  /* ---------- 目次ブロック ---------- */
  .article-toc {
    background: #ecece7;
    padding: 16px 24px;
    margin: 24px auto;
    width: 100%;
    max-width: var(--article-content);
    color: var(--article-color);
  }

  .article-toc__title {
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 0 0 16px;
    @media (max-width: 767px) {
      font-size: 20px;
    }
  }

  .article-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .article-toc__item {
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    @media (max-width: 767px) {
      font-size: 14px;
    }
  }

  .article-toc__link {
    display: inline-flex;
    gap: 8px;
    color: var(--article-color);
    text-decoration: none;
  transition: opacity 0.3s;
    &:hover {
      opacity: 0.7;
    }
  }

  .article-toc__num {
    flex-shrink: 0;
  }

  .article-toc__text {
    text-decoration: underline;
  }

  .article-toc__empty {
    margin: 0;
    font-size: 13px;
    color: #888;
    font-style: italic;
  }

  /* エディタ内のプレースホルダ表示用 */
  .editor-styles-wrapper .article-toc {
    outline: 1px dashed #aaa;
  }

  /* ---------- YouTube ---------- */
  .article-youtube {
    padding: 0 var(--article-pad-x);
    margin: 60px 0 80px;
  }

  .article-youtube__inner {
    max-width: var(--article-max);
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .article-youtube__frame {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
    overflow: hidden;
  }

  .article-youtube__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* ---------- 旧コンテンツブロック互換（カラム配置型） ---------- */
  .content-block {
    display: flex;
    align-items: flex-start;
    gap: 80px;
  }

  .content-block .wp-block-columns {
    display: flex;
    align-items: flex-start;
    gap: 80px;
  }

  .content-block
    .wp-block-columns:not(.is-not-stacked-on-mobile)
    > .wp-block-column {
    flex-basis: initial;
  }

  .content-block + .content-block {
    margin-top: 120px;
  }

  .content-block--reverse {
    flex-direction: row-reverse;
  }

  .content-block__image {
    width: 50%;
    flex-shrink: 0;
  }

  .content-block__image figure img {
    width: 100%;
    object-fit: cover;
  }

  .content-block--offset-left .content-block__image {
    margin-left: -80px;
    width: calc(50% + 80px);
  }

  .content-block--offset-right .content-block__image {
    margin-right: -80px;
    width: calc(50% + 80px);
  }

  .content-block__text {
    flex: 1;
    padding-top: 40px;
    width: 50%;
    flex-basis: initial !important;
  }

  .content-block__body {
    font-size: 14px;
    color: #666;
    line-height: 230%;
    letter-spacing: 0.08em;
    margin-top: 24px;
  }

  /* ---------- Article Back Button ---------- */
  .article-back {
    display: flex;
    justify-content: center;
    padding: 0 var(--article-pad-x) 0px;
    margin-top: 80px;
    @media (max-width: 767px) {
      margin-top: 40px;
    }
  }
}

/* ============================================
   Article Detail - Responsive (max-width: 767px)
   ============================================ */
@media (max-width: 767px) {
  :root {
    --article-pad-x: 20px;
  }

  .article-hero {
    padding: 0;
    margin-top: 24px;
  }

  .article-hero__inner {
    padding: 0 20px;
    gap: 20px;
  }

  .article-hero__catch {
    font-size: 20px;
    line-height: 1.5;
  }

  .article-hero__name {
    font-size: 16px;
  }

  .article-hero__profile {
    font-size: 14px;
    line-height: 1.85;
  }

  .article-body {
    margin-top: 32px;
    padding: 0 20px 60px;
  }

  .article-body__inner p {
    font-size: 14px;
    line-height: 1.85;
  }

  .article-body__inner figure,
  .article-body__inner .wp-block-image {
    margin: 24px 0;
  }

  .content-block__heading {
    font-size: 20px;
    margin: 48px 0 24px;
    padding-bottom: 8px;
    scroll-margin-top: 80px;
  }

  /* 目次 */
  .article-toc {
    padding: 16px 16px;
    margin: 16px auto;
  }

  .article-toc__title {
    font-size: 20px;
  }

  .article-toc__item {
    font-size: 14px;
  }

  /* YouTube */
  .article-youtube {
    padding: 0 20px;
    margin: 40px 0 60px;
  }

  /* 旧パターン互換 */
  .content-block {
    flex-direction: column;
    gap: 24px;
  }

  .content-block .wp-block-columns {
    flex-direction: column;
    gap: 24px;
  }

  .content-block + .content-block {
    margin-top: 60px;
  }

  .content-block--reverse {
    flex-direction: column;
  }

  .content-block--reverse .wp-block-columns {
    flex-direction: column-reverse;
  }

  .content-block--reverse .content-block__image {
    margin-left: auto;
    padding-right: 20px;
  }

  .content-block--pad-left .content-block__image {
    padding-left: 20px;
  }

  .content-block__image {
    width: 90%;
    margin: 0 auto;
  }

  .content-block--offset-left .content-block__image {
    margin-left: 0;
    margin-right: auto;
    width: 90%;
  }

  .content-block--offset-right .content-block__image {
    margin-left: auto;
    margin-right: 0;
    padding: 0;
    width: 90%;
  }

  .content-block__text {
    padding: 0 20px;
    width: 100%;
  }

  .content-block--inset .content-block__text,
  .content-block--offset-right .content-block__text {
    padding: 0 20px;
  }

  .content-block__body {
    font-size: 13px;
    line-height: 1.9;
    margin-top: 16px;
  }

  .article-back {
    padding: 0 20px 60px;
  }
}

/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

.wp-block-flexible-table-block-table {
  th,td {
    font-size: 16px;
    @media (max-width: 767px) {
      font-size: 14px;
    }
  }
  a {
    font-weight: 700;
    text-decoration: underline;
    color: #244992;
    transition: opacity 0.3s;
    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    } 
  }
}