/* =========================================================
   全体の最終的な余白・動き・タイトル・ナビ調整
========================================================= */

/* =========================================================
   Final shared design layer: titles, navigation, motion and responsive rhythm.
========================================================= */

.sf-header {
  background: rgba(253, 252, 249, .97);
  border-bottom-color: rgba(200, 165, 93, .22);
  box-shadow: 0 4px 18px rgba(23, 63, 56, .035);

  transition: background-color .3s ease,
    color .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.sf-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;

  height: 2px;

  background: linear-gradient(90deg, var(--sf-gold) 0 18%, rgba(200,165,93,.22) 18% 100%);

  transition: height .3s ease,
    background .3s ease;
}

.sf-desktop-nav a {
  position: relative;

  padding-block: 29px;
}

.sf-desktop-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 19px;

  height: 1px;

  background: var(--sf-terracotta);

  transition: left .25s ease,
    right .25s ease;
}

.sf-desktop-nav a:hover::after,
.sf-desktop-nav .current-menu-item > a::after,
.sf-desktop-nav .current-menu-ancestor > a::after {
  left: 0;
  right: 0;
}

.sf-header.is-scrolled {
  color: #fff;
  background: rgba(23,63,56,.97);
  border-bottom-color: transparent;
  box-shadow: 0 10px 30px rgba(12,46,40,.2);
}

.sf-header.is-scrolled::after {
  height: 3px;

  background: linear-gradient(90deg, var(--sf-gold-soft), var(--sf-terracotta), var(--sf-gold-soft));
}

.sf-header.is-scrolled .sf-brand__name,
.sf-header.is-scrolled .sf-brand__tagline,
.sf-header.is-scrolled .sf-desktop-nav a,
.sf-header.is-scrolled .sf-icon-button {
  color: #fff;
}

.sf-header.is-scrolled .sf-brand__tagline {
  opacity: .72;
}

.sf-header.is-scrolled .sf-desktop-nav a::after {
  background: var(--sf-gold-soft);
}

.sf-article-header h1,
.sf-single-article .entry-title {
  width: 100%;
  max-width: none;

  margin: 18px 0;

  font-size: clamp(21px, 1.4vw, 26px);
  line-height: 1.45;
  text-align: left;
  text-wrap: pretty;
}

/* =========================================================
   1.18.14 — keep the complete article composition optically centered.
 * Revenue articles have their own full-width layout and are intentionally excluded.
========================================================= */

.sf-single-layout > .sf-single-grid:not(.sf-single-grid--wide-revenue) {
  width: min(calc(100% - 48px), 1240px);
  max-width: 1240px;

  margin-inline: auto;

  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 40px;
}

.sf-single-layout > .sf-single-grid:not(.sf-single-grid--wide-revenue) > .sf-single-main {
  width: 100%;
  min-width: 0;
}

@media (min-width: 901px) and (max-width: 1024px) {
  .sf-single-layout > .sf-single-grid:not(.sf-single-grid--wide-revenue) {
    width: min(calc(100% - 40px), 984px);

    grid-template-columns: minmax(0, 1fr) 280px;
    column-gap: 32px;
  }
}

@media (max-width: 900px) {
  .sf-single-layout > .sf-single-grid:not(.sf-single-grid--wide-revenue) {
    width: min(calc(100% - 32px), 820px);

    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .sf-single-layout > .sf-single-grid:not(.sf-single-grid--wide-revenue) > .sf-article-sidebar {
    display: none;
  }
}

:where(.sf-button, .sf-cta a, .sf-profile-button, .sf-author-card__button,
.sf-related-guide, .sf-related__card, .sf-jc-series__row:not(.is-current),
.sf-sidebar-special a, .sf-sidebar-about a, .sf-theme-links a,
.post-navigation a, .wp-block-button__link) {
  transition: transform var(--sf-motion),
    box-shadow var(--sf-motion),
    background-color var(--sf-motion),
    color var(--sf-motion),
    border-color var(--sf-motion);
}

@media (hover: hover) {
  :where(.sf-button, .sf-cta a, .sf-profile-button, .sf-author-card__button,
	.sf-related-guide, .sf-related__card, .sf-jc-series__row:not(.is-current),
	.sf-sidebar-special a, .sf-sidebar-about a, .sf-theme-links a,
	.post-navigation a, .wp-block-button__link):hover {
    box-shadow: var(--sf-shadow-hover);

    transform: translateY(var(--sf-lift));
  }
}

:where(.sf-button, .sf-cta a, .sf-profile-button, .sf-author-card__button,
.sf-related-guide, .sf-related__card, .sf-jc-series__row:not(.is-current),
.sf-sidebar-special a, .sf-sidebar-about a, .sf-theme-links a,
.post-navigation a, .wp-block-button__link):active {
  transform: translateY(var(--sf-press));
}

:where(a, button):focus-visible {
  outline: 2px solid var(--sf-gold);
  outline-offset: 4px;
}

:where(.sf-button__arrow, .sf-cta__arrow, .sf-profile-button > span:last-child,
.sf-author-card__button > span:last-child, .sf-related-guide__arrow,
.sf-jc-series__arrow, .sf-sidebar-more--button i) {
  transition: transform var(--sf-motion);
}

@media (hover: hover) {
  :where(.sf-button:hover .sf-button__arrow, .sf-cta:hover .sf-cta__arrow,
	.sf-profile-button:hover > span:last-child, .sf-author-card__button:hover > span:last-child,
	.sf-related-guide:hover .sf-related-guide__arrow, .sf-jc-series__row:hover .sf-jc-series__arrow,
	.sf-sidebar-more--button:hover i) {
    transform: translateX(4px);
  }
}

@media (max-width: 767px) {
  .sf-single-layout > .sf-single-grid:not(.sf-single-grid--wide-revenue) {
    width: min(calc(100% - 24px), 720px);

    margin-inline: auto;
  }

  .sf-header__inner {
    width: calc(100% - 28px);
  }

  .sf-header::after {
    height: 2px;
  }

  .sf-header.is-scrolled::after {
    height: 2px;
  }

  .sf-article-header {
    padding: 26px var(--sf-mobile-gutter) 14px;
  }

  .sf-article-header h1,
  .sf-single-article .entry-title {
    width: 100%;
    max-width: none;

    margin: 12px 0 10px;

    font-size: clamp(18px, 5vw, 20px);
    line-height: 1.45;
    text-align: left;
  }

  .sf-article-content {
    padding: 18px var(--sf-mobile-gutter) 28px;

    overflow-wrap: anywhere;
  }

  .sf-article-content > :first-child {
    margin-top: 0 !important;
  }

  .sf-page__header h1 {
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.6;
    text-wrap: balance;
  }

  .sf-single-grid,
  .sf-page-grid {
    min-width: 0;
  }

  .sf-article-content img,
  .sf-page img {
    max-width: 100%;
    height: auto;
  }

  .sf-article-content table {
    display: block;

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
  }

  :where(.sf-button, .sf-cta a, .sf-profile-button, .sf-author-card__button,
	.sf-sidebar-special a, .sf-sidebar-about a, .wp-block-button__link) {
    min-height: 48px;
  }
}

@media (max-width: 380px) {
  :root {
    --sf-mobile-gutter: 18px;
  }

  .sf-single-layout > .sf-single-grid:not(.sf-single-grid--wide-revenue) {
    width: calc(100% - 20px);
  }

  .sf-article-header h1,
  .sf-single-article .entry-title {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    transition-duration: .01ms !important;
  }
}

/* =========================================================
   MOBILE CHECK COLOR
   共通のチェック枠をPCと同じ小さな文字のチェックで表示。
   テキスト表示指定でiPhoneの黒い絵文字化を避ける。
========================================================= */

@media (max-width: 767px) {
  .sf-check-box li::before {
    content: "\2713\FE0E" !important;
    position: absolute !important;
    top: 3px !important;
    left: 0 !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    background: none !important;
    color: #2f5f57 !important;

    -webkit-text-fill-color: #2f5f57 !important;

    font: 700 14px/1.4 Arial, Helvetica, sans-serif !important;
    font-style: normal !important;

    transform: none !important;
  }
}

/* =========================================================
   COMPACT PR DISCLOSURE
========================================================= */

.sf-revenue-disclosure--compact {
  margin: 32px 0 0;

  border: 1px solid rgba(47, 95, 87, 0.15);
  border-top: 2px solid rgba(208, 170, 98, 0.65);
  background: #fffdf8;
}

.sf-revenue-disclosure--compact .sf-revenue-disclosure__notice {
  display: flex;

  align-items: flex-start;
  gap: 16px;

  padding: 18px 22px;

  border: 0;
}

.sf-revenue-disclosure--compact .sf-revenue-disclosure__badge {
  flex: 0 0 auto;

  padding: 5px 12px;

  color: #2f5f57;
  background: #edf3f0;
  border: 1px solid rgba(47, 95, 87, 0.18);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
}

.sf-revenue-disclosure--compact .sf-revenue-disclosure__notice p {
  margin: 0 !important;

  color: #58625f;

  font-size: 13px;
  line-height: 1.85;
}

@media (max-width: 767px) {
  .sf-revenue-disclosure--compact {
    margin-top: 24px;
  }

  .sf-revenue-disclosure--compact .sf-revenue-disclosure__notice {
    gap: 12px;

    padding: 15px 16px;
  }

  .sf-revenue-disclosure--compact .sf-revenue-disclosure__badge {
    padding: 4px 9px;

    font-size: 10px;
  }

  .sf-revenue-disclosure--compact .sf-revenue-disclosure__notice p {
    font-size: 12px;
    line-height: 1.75;
  }
}

/* =========================================================
   PR欄：運営方針リンク
========================================================= */

.sf-revenue-disclosure--compact .sf-revenue-disclosure__notice a {
  display: inline-block;

  margin-left: 8px;

  color: #2f5f57;

  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(47, 95, 87, 0.35);
  text-underline-offset: 3px;
}

.sf-revenue-disclosure--compact .sf-revenue-disclosure__notice a:hover {
  color: #b48a45;

  text-decoration-color: #b48a45;
}

@media (max-width: 767px) {
  .sf-revenue-disclosure--compact .sf-revenue-disclosure__notice a {
    display: block;

    width: fit-content;

    margin: 7px 0 0;

    font-size: 11px;
  }
}

/* =========================================================
   PR欄：文章とリンクの位置を揃える
========================================================= */

.sf-revenue-disclosure--compact .sf-revenue-disclosure__notice p {
  display: flex;

  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 5px;
}

.sf-revenue-disclosure--compact .sf-revenue-disclosure__notice a {
  margin-left: 0;
}