/* T11 layout styles reused from Phase3; T12 preview stylesheet remains unchanged. */
.sk-side-cta p, .sk-ed-card p, .sk-foot p { margin: 0; padding: 0; }
.sk-topic ul, .sk-popular, .sk-foot ul { margin: 0; padding: 0; list-style: none; }
/* ---------------------------------------------------------------------
 * T11 サイドバー: 資料ダウンロード CTA
 * ------------------------------------------------------------------ */
.sk-side-cta {
  padding: 20px 18px 18px;
  border: 2px solid #93cd1c;
  border-radius: 10px;
  background: #f7fbef;
  text-align: center;
  line-height: 1.7;
}

.sk-side-cta__label {
  display: inline-block;
  margin-bottom: 8px !important;
  padding: 2px 10px !important;
  border-radius: 999px;
  background: #93cd1c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.sk-side-cta__title {
  color: #333;
  font-size: 17px;
  font-weight: 700;
}

.sk-side-cta__text {
  margin: 8px 0 14px !important;
  color: #555;
  font-size: 13px;
  text-align: left;
}

.sk-side-cta__button {
  display: block;
  padding: 12px 8px;
  border-radius: 999px;
  background: #ff8000;
  box-shadow: 0 3px 0 #d96c00;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
}

.sk-side-cta__button:hover {
  opacity: .9;
}

.sk-side-cta__sub {
  display: inline-block;
  margin-top: 12px;
  color: #0e80e3 !important;
  font-size: 13px;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * T11 テーマから探す（サイドバー、関連記事3段の3段目）
 * ------------------------------------------------------------------ */
.sk-topic__item + .sk-topic__item {
  border-top: 1px solid #e3e9f0;
}

.sk-topic__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  padding: 10px 4px;
  color: #333 !important;
  text-decoration: none !important;
  line-height: 1.5;
}

.sk-topic__link:hover .sk-topic__name,
.sk-topic__link[aria-current="page"] .sk-topic__name {
  color: #0e80e3;
}

.sk-topic__name {
  font-size: 15px;
  font-weight: 700;
}

.sk-topic__lead {
  grid-column: 1;
  color: #6b7280;
  font-size: 12px;
}

.sk-topic__count {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #6b7280;
  font-size: 12px;
}

.sk-topic__all {
  display: block;
  margin-top: 8px;
  color: #0e80e3 !important;
  font-size: 13px;
  text-align: right;
}

/* 関連記事3段の中では横並びのボタンにする */
.sk-related .sk-topic__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sk-related .sk-topic__item {
  border: 0 !important;
}

.sk-related .sk-topic__link {
  display: block;
  padding: 8px 14px;
  border: 1px solid #c6ddf6;
  border-radius: 999px;
  background: #fff;
}

.sk-related .sk-topic__name {
  font-size: 14px;
}

.sk-related .sk-topic__lead,
.sk-related .sk-topic__count {
  display: none;
}

.sk-related .sk-topic__all {
  text-align: left;
}

/* ---------------------------------------------------------------------
 * T11 よく読まれている記事、記事の小さなカード
 * ------------------------------------------------------------------ */
.sk-popular {
  counter-reset: sk-rank;
}

.sk-popular__item {
  position: relative;
  counter-increment: sk-rank;
}

.sk-popular__item + .sk-popular__item {
  margin-top: 12px;
}

.sk-popular__item::before {
  content: counter(sk-rank);
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0e80e3;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.sk-mini {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  color: #333 !important;
  text-decoration: none !important;
}

.sk-mini__thumb {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 16 / 9;
  background: #eef2f6;
}

.sk-mini__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sk-mini__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.sk-mini:hover .sk-mini__title {
  color: #0e80e3;
}

/* ---------------------------------------------------------------------
 * T11 編集部の紹介（サイドバー）
 * ------------------------------------------------------------------ */
.sk-ed-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  padding: 16px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #f6f9fc;
  line-height: 1.6;
}

.sk-ed-card__logo {
  grid-row: 1 / span 2;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 6px;
  border: 1px solid #dbe3ec;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

.sk-ed-card__name {
  color: #333;
  font-size: 15px;
  font-weight: 700;
}

.sk-ed-card__name span {
  display: block;
  color: #6b7280;
  font-size: 12px;
  font-weight: 400;
}

.sk-ed-card__text {
  grid-column: 1 / -1;
  color: #555;
  font-size: 13px;
}

.sk-ed-card__link {
  grid-column: 1 / -1;
  color: #0e80e3 !important;
  font-size: 13px;
}

/* ---------------------------------------------------------------------
 * T11 フッター
 * ------------------------------------------------------------------ */
.sk-foot__title {
  margin-bottom: 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid currentColor;
  font-size: 15px;
  font-weight: 700;
}

.sk-foot__list li + li {
  margin-top: 6px;
}

.sk-foot__list a {
  color: inherit !important;
  font-size: 14px;
  text-decoration: none;
}

.sk-foot__list a:hover {
  text-decoration: underline;
}


/* Keep long category labels and cards inside the existing Cocoon sidebar. */
.sk-topic__link, .sk-mini, .sk-ed-card { min-width: 0; }
.sk-topic__name, .sk-topic__lead, .sk-mini__title, .sk-ed-card__name {
  min-width: 0;
  overflow-wrap: anywhere;
}
#sidebar .widget:has(.sk-side-cta) { background: transparent; }
@media screen and (max-width: 834px) {
  .sk-side-cta { padding: 18px 14px; }
  .sk-ed-card { grid-template-columns: 48px minmax(0, 1fr); }
  .sk-ed-card__logo { width: 48px; height: 48px; }
}

/* T11 desktop navigation: contain Cocoon category descriptions and submenu sizing.
 * Mobile drawer/slide-in menus retain their existing Cocoon rules.
 */
@media screen and (min-width: 1024px) {
  #navi { position: relative; z-index: 100; overflow: visible; }
  #navi .navi-in { overflow: visible; }
  #navi .navi-in > .menu-header > .menu-item-has-children { position: relative; }
  #navi .navi-in > .menu-header > .menu-item > .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    width: 18rem;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    overflow-y: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #dbe3ec;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
    text-align: left;
    z-index: 1000;
  }
  #navi .navi-in > .menu-header > .menu-item:hover > .sub-menu,
  #navi .navi-in > .menu-header > .menu-item:focus-within > .sub-menu {
    display: block;
  }
  #navi .navi-in > .menu-header > .menu-item > .sub-menu > .menu-item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    margin: 0;
    line-height: 1.5;
  }
  #navi .navi-in > .menu-header > .menu-item > .sub-menu > .menu-item > a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
    color: #333;
    background: transparent;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
  }
  #navi .navi-in > .menu-header > .menu-item > .sub-menu > .menu-item > a:hover,
  #navi .navi-in > .menu-header > .menu-item > .sub-menu > .menu-item > a:focus-visible {
    color: #0e80e3;
    background: #f1f8fe;
  }
  #navi .navi-in > .menu-header > .menu-item > .sub-menu > .menu-item > a > .caption-wrap {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    line-height: 1.5;
    text-align: left;
  }
  #navi .navi-in > .menu-header > .menu-item > .sub-menu .item-label {
    display: block;
    min-width: 0;
    height: auto;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
    text-overflow: clip;
  }
  #navi .navi-in > .menu-header > .menu-item > .sub-menu .item-description {
    display: none;
  }
}

/* T11 responsive header: follow Cocoon's 1023/1024 mobile-button switch.
 * The inline mobile navigation is separate from the checkbox-driven drawer.
 * Only omit the redundant header when Cocoon already supplies the logo bar.
 */
@media screen and (max-width: 1023px) {
  body:is(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons).no-mobile-header-logo #header-container {
    display: none;
  }
  body:is(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) .mobile-header-menu-buttons {
    box-sizing: border-box;
    height: 50px;
    align-items: center;
  }
  .mobile-header-menu-buttons > .navi-menu-button {
    flex: 0 0 52px;
    width: 52px;
  }
  .mobile-header-menu-buttons > .logo-menu-button {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .mobile-header-menu-buttons > .logo-menu-button > a {
    display: flex;
    align-items: center;
    height: 50px;
    padding-inline: 12px;
  }
  .mobile-header-menu-buttons .logo-menu-button img {
    box-sizing: border-box;
    width: auto;
    height: auto;
    max-width: min(100%, 200px);
    max-height: 40px;
    padding: 0;
    margin: 0;
  }
  #navi-menu-content {
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
  }
  #navi-menu-content .menu-drawer a {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media screen and (min-width: 1024px) {
  #header-container-in.hlt-top-menu {
    max-height: none;
    min-height: 80px;
    padding: 10px clamp(16px, 3.5vw, 50px);
  }
  #navi .navi-in > .menu-pc {
    flex-wrap: nowrap;
    gap: clamp(8px, 1.4vw, 20px);
  }
  #navi .menu-pc > .menu-item > a .item-label {
    font-size: clamp(13px, 1.15vw, 16px);
  }
  /* A checked drawer in the hidden mobile bar must not lock desktop scrolling. */
  .body:has(#navi-menu-input:checked):not(:has(#sidebar-menu-input:checked)) {
    overflow: auto;
  }
}

/* T11: keep the following CTA below the existing 80px fixed desktop header. */
@media screen and (min-width: 1024px) {
  #sidebar > #sidebar-scroll {
    top: 92px;
  }
  body.admin-bar #sidebar > #sidebar-scroll {
    top: 124px;
  }
}