/* Cocoon レイアウト骨格のみ（親テーマ・スキンCSSの代替） */

:root {
  --cocoon-basic-border-radius: 0;
  --cocoon-basic-border-color: rgba(255, 255, 255, 0.12);
  --cocoon-white-color: #2a3348;
  --cocoon-black-color: #f4f6fa;
  --cocoon-text-color: #333333;
  --cocoon-thin-color: #b4bcc9;
  --cocoon-xx-thin-color: #242b3d;
  --cocoon-sns-color: #444;

  /* 子テーマ cstm-pat 用（旧 Grayish 変数の代替） */
  --white: #fff;
  --LtGray_T0: #6b7280;
  --LtGray_T30: #9ca3af;
  --LtGray_T50: #d1d5db;
  --LtGray_T70: #374151;
  --LtGray_T90: #1f2937;
  --LtGray_T70_A50: rgba(55, 65, 81, 0.5);
  --LtGray_S30: #9ca3af;
  --LtGray_S50: #d1d5db;
  --LtGray_S70: #f3f4f6;
  --LtGray_S90: #ffffff;
  --LtBlue_T0: #38bdf8;
  --LtBlue_T30: #7dd3fc;
  --LtBlue_T50: #bae6fd;
  --LtBlue_T70: #1e3a5f;
  --LtBlue_T90: #0f172a;
  --LtBlue_S30: #38bdf8;
  --LtBlue_S50: #0ea5e9;
  --Blk_Pink_T0: #f472b6;
  --Blk_Pink_T50: #fbcfe8;
  --Blk_Pink_S50: #9d174d;
  --Blk_Beige_T0: #d6b896;
  --Blk_Beige_T50: #ebe0d1;
  --Blk_Beige_S50: #78716c;
  --Blk_Green_T0: #86efac;
  --Blk_Green_T50: #bbf7d0;
  --Blk_Green_S30: #4ade80;
  --Blk_Green_S50: #166534;
  --skin-grayish-style-font: 'DM Sans', 'Noto Sans JP', sans-serif;
  --skin-get-site-font: 'Noto Sans JP', sans-serif;
  --skin-grayish-site-name-txt: #f3f4f6;
  --skin-grayish-site-main-hover: #ff6b4a;
  --skin-grayish-site-main-thin: #242b3d;
  --skin-grayish-site-sub-color: #9aa3b5;
  --skin-grayish-a-wrap-txt: #d1d5db;
  --skin-grayish-gradient: #151922;
  --skin-grayish-cat-txt: #fff;
}

/* Cocoon 親テーマが参照する配色変数（ダークテーマの単一ソース） */
body.theme-abataz,
body.theme-abataz .main,
body.theme-abataz .main .article,
body.theme-abataz .main .entry-content {
  --cocoon-text-color: #f4f6fa;
  --cocoon-pallid-text-color: #b4bcc9;
  --cocoon-white-color: #1c2130;
  --cocoon-xx-thin-color: transparent;
  --cocoon-xxx-thin-color: rgba(255, 255, 255, 0.04);
  --cocoon-x-thin-color: transparent;
  --cocoon-thin-color: rgba(255, 255, 255, 0.14);
  --cocoon-basic-border-color: rgba(255, 255, 255, 0.14);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.wrap {
  width: 100%;
  max-width: 1256px;
  margin: 0 auto;
}

.content {
  margin-top: 12px;
}

.content-in {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

.main {
  width: 860px;
  padding: 36px 29px;
  position: relative;
  z-index: 0;
}

.no-sidebar .content .main {
  margin: 0;
  width: 100%;
}

.sidebar {
  width: 376px;
  padding: 19px;
}

.mobile-menu-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0;
  margin: 0;
  list-style: none;
  display: none;
  align-items: center;
  min-height: 50px;
}

.mobile-menu-buttons .menu-button {
  position: relative;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-menu-buttons .menu-icon {
  display: block;
  text-align: center;
  font-size: 19px;
}

.menu-content {
  overflow: auto;
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
  max-width: 400px;
  height: 100%;
  background: #1c2130;
  transition: 0.3s ease-in-out;
}

.navi-menu-content {
  left: 0;
  transform: translateX(-105%);
}

.sidebar-menu-content {
  right: 0;
  transform: translateX(105%);
}

#navi-menu-input:checked ~ #navi-menu-content,
#sidebar-menu-input:checked ~ #sidebar-menu-content {
  transform: translateX(0);
}

.menu-drawer {
  padding: 0 1em 30px;
  list-style: none;
}

.menu-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-card {
  position: relative;
  height: 100%;
}

.entry-card-thumb,
.widget-entry-card-thumb {
  float: left;
  margin-top: 3px;
  position: relative;
}

.entry-card-content,
.widget-entry-card-content {
  overflow: hidden;
}

.a-wrap {
  display: block;
  text-decoration: none;
  color: inherit;
}

.display-none {
  display: none !important;
}

@media screen and (max-width: 1023px) {
  .mobile-menu-buttons {
    display: flex;
  }

  .mobile-header-menu-buttons {
    top: 0;
    bottom: auto;
    justify-content: space-between;
  }

  .logo-menu-button {
    flex-grow: 1;
  }

  :where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) #container {
    margin-top: 50px;
  }

  .admin-bar:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) #container {
    margin-top: calc(50px - var(--wp-admin--admin-bar--height, 0px));
  }

  .navi-in > .menu-header {
    display: none;
  }
}

@media screen and (max-width: 834px) {
  .main,
  .sidebar,
  .site-sidebar {
    width: 100%;
    padding: 32px 16px;
    margin: 12px 0;
  }

  .content-in,
  .site-content__inner {
    flex-direction: column;
  }
}

/* ── オリジナルHTML構造 ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--accent, #ff6b4a);
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

.site-header {
  position: relative;
  z-index: 10;
}

.site-content {
  position: relative;
}

.site-main {
  min-width: 0;
}

.site-sidebar {
  min-width: 0;
}

.site-mobile-nav {
  position: relative;
  z-index: 200;
  overflow: visible;
}

.site-mobile-nav .mobile-header-menu-buttons {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
}

.site-footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
}

.site-footer-bar__copy {
  margin: 0;
}

.theme-abataz .site-footer {
  margin-top: 48px;
}

/* ── Cocoon 吹き出し（親テーマCSS非読み込み時の骨格） ── */
.speech-wrap {
  --cocoon-custom-background-color: var(--cocoon-white-color);
  --cocoon-custom-text-color: var(--cocoon-text-color);
  --cocoon-custom-border-color: var(--cocoon-basic-border-color);
  display: flex;
  border: 0;
  margin: 1.2em 0;
}

.speech-person {
  width: 12%;
  min-width: 12%;
}

.speech-icon img,
.speech-icon amp-img {
  border-radius: 50%;
  border: 2px solid var(--cocoon-basic-border-color);
  width: 100%;
}

.speech-name {
  text-align: center;
  font-size: 13px;
}

.speech-name:empty {
  display: none;
}

div.speech-balloon {
  height: 100%;
  position: relative;
  padding: 12px 14px;
  background-color: var(--cocoon-custom-background-color);
  border-width: 2px;
  border-style: solid;
  border-color: var(--cocoon-custom-border-color);
  color: var(--cocoon-custom-text-color);
  border-radius: 8px;
  max-width: calc(100% - 14%);
  line-height: 1.7;
}

div.speech-balloon p {
  margin: 0;
}

.speech-balloon::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 12px;
  border-right: 12px solid var(--cocoon-custom-border-color);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.speech-balloon::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -9px;
  top: 12px;
  border-right: 12px solid var(--cocoon-custom-background-color);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.sbp-l:not(.not-nested-style) .speech-balloon {
  margin-left: 20px;
}

.sbp-r {
  flex-direction: row-reverse;
}

.sbp-r:not(.not-nested-style) .speech-balloon {
  margin-right: 20px;
}

.sbp-r:not(.not-nested-style) .speech-balloon::before {
  right: -12px;
  left: auto;
  border-right: none;
  border-left: 12px solid var(--cocoon-custom-border-color);
}

.sbp-r:not(.not-nested-style) .speech-balloon::after {
  right: -9px;
  left: auto;
  border-right: none;
  border-left: 12px solid var(--cocoon-custom-background-color);
}