@charset "UTF-8";
/* ==========================================================================
   ミニPC界隈 — 基本タイポグラフィ / レイアウト / ヘッダー / フッター
   Cocoonの基盤を活かし、上書きは必要な箇所のみ。!important は使用しない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ページ全体
   -------------------------------------------------------------------------- */
body {
  font-family: var(--mpk-font-sans);
  font-size: var(--mpk-fs-body);
  line-height: var(--mpk-lh-body);
  color: var(--mpk-text);
  background-color: var(--mpk-page);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
}

/* 型番・英数字が不自然に折り返されないようにする */
body {
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: normal;
}

/*
  390pxで横スクロールを起こさないための保険。
  overflow-x: hidden はスクロールコンテナを作り position:sticky を壊すため使わない。
  overflow-x: clip はスクロールコンテナを作らないので sticky を維持できる。
*/
body {
  max-width: 100%;
  overflow-x: clip;
}

.entry-content > *,
.mpk-box,
.mpk-front-section {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   2. レイアウト幅（全体1200px / サイドバー304px / 本文実測 約780px）
   -------------------------------------------------------------------------- */
.wrap {
  width: auto;
  max-width: var(--mpk-wrap-max);
  margin-inline: auto;
  padding-inline: var(--mpk-wrap-pad);
  box-sizing: border-box;
}

/*
  .content-in は Cocoon 標準で display:flex。align-items は既定の stretch のまま
  にしておくこと。flex-start にすると .sidebar-scroll / .main-scroll の
  position:sticky が動く余地を失い、Cocoonの追従表示が機能しなくなる。
*/
#content.content {
  padding-block: var(--mpk-space-xl);
}

@media screen and (min-width: 1024px) {
  .content-in {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--mpk-column-gap);
    justify-content: flex-start;
  }

  main.main {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: var(--mpk-space-2xl) var(--mpk-main-pad);
    background-color: var(--mpk-surface);
    border: 0;
    border-radius: var(--mpk-radius-lg);
    box-shadow: var(--mpk-shadow-sm);
  }

  div.sidebar {
    flex: 0 0 var(--mpk-sidebar-width);
    width: var(--mpk-sidebar-width);
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
  }
}

/* 1023px以下は Cocoon 標準どおり1カラム */
@media screen and (max-width: 1023px) {
  #content.content {
    padding-block: var(--mpk-space-lg);
  }

  main.main {
    margin: 0 0 var(--mpk-space-lg);
    padding: var(--mpk-space-lg) var(--mpk-space-md);
    background-color: var(--mpk-surface);
    border: 0;
    border-radius: var(--mpk-radius-md);
    box-shadow: var(--mpk-shadow-sm);
  }

  /* サイドバー自体は素通しにし、白い面はウィジェット側だけに持たせる */
  div.sidebar {
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
  }
}

/* --------------------------------------------------------------------------
   3. 本文タイポグラフィ
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  .entry-content,
  .article .entry-content p {
    font-size: var(--mpk-fs-body-pc);
  }
}

p {
  line-height: var(--mpk-lh-body);
}

/* --------------------------------------------------------------------------
   4. リンク（色だけで区別しない：本文リンクは下線を持たせる）
   -------------------------------------------------------------------------- */
.entry-content a:not(.a-wrap):not(.btn):not(.mpk-btn):not(.blogcard-wrap):not(.wp-block-button__link) {
  color: var(--mpk-link);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 82, 213, 0.4);
  transition: color var(--mpk-transition), text-decoration-color var(--mpk-transition);
}

.entry-content a:not(.a-wrap):not(.btn):not(.mpk-btn):not(.blogcard-wrap):not(.wp-block-button__link):hover {
  color: var(--mpk-link-hover);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   5. キーボードフォーカス
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--mpk-primary);
  outline-offset: 2px;
  border-radius: var(--mpk-radius-sm);
}

.skip-link:focus {
  color: var(--mpk-surface);
  background-color: var(--mpk-primary);
}

/* --------------------------------------------------------------------------
   6. ヘッダー（ブランドカラーの帯・ロゴ左寄せ）
   -------------------------------------------------------------------------- */
.header-container {
  background-color: var(--mpk-header-bg);
  border-bottom: 0;
}

/*
  Cocoon 標準は .header-in { display:flex; flex-direction:column; justify-content:center }。
  flex-direction だけ row に戻すと、justify-content:center が横方向に効いて
  ロゴが中央寄せになる。PCでは左寄せにしたいので justify-content も明示する。
  .logo の text-align:center も左寄せに戻す。
*/
.header-in {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--mpk-space-md);
  min-height: var(--mpk-header-height);
  padding-block: var(--mpk-space-sm);
}

.header .logo,
.header .logo-header {
  order: 1;
  margin: 0;
  line-height: 1;
  text-align: left;
}

/*
  ロゴの <span> の中には <img> のあとに <meta> が入っており、
  その間の改行が空白文字として約19pxの幅を生んでいた。
  インラインの整形をやめて、画像の実寸ぴったりにする。
*/
.logo-header.logo-image .site-name-text {
  display: block;
  font-size: 0;
  line-height: 0;
}

/*
  キャッチフレーズは吹き出し画像の中に入っているため、テキスト側は隠す。
  文言は吹き出し画像の alt から読める。
*/
.header-in .tagline {
  display: none;
}

/* --- ロゴ右のマスコット（ネコ + 吹き出し） --- */
.mpk-header-mascot {
  order: 2;
  display: flex;
  align-items: flex-end;
  gap: var(--mpk-space-xs);
  flex: 0 0 auto;
  /* ネコを帯の下端に座らせる。下パディング分だけ食い込ませる */
  align-self: flex-end;
  margin-bottom: calc(var(--mpk-space-sm) * -1);
}

.mpk-header-mascot__cat {
  display: block;
  width: auto;
  height: 46px;
}

/*
  吹き出しは絵の中の余白が広く、文字が絵の6割ほどしか占めていない。
  ネコと同じ高さでは文字が読めないので、ネコより一回り大きく置く。
*/
.mpk-header-mascot__speech {
  display: block;
  width: auto;
  height: 58px;
  /* しっぽが猫の頭のあたりを指すよう浮かせる */
  margin-bottom: 14px;
}

@media screen and (min-width: 768px) {
  .mpk-header-mascot__cat {
    height: 56px;
  }

  .mpk-header-mascot__speech {
    height: 72px;
    margin-bottom: 18px;
  }
}

/*
  1024px以上では、ロゴを左端・マスコットを右端に離す。
  auto マージンで余白をすべて左に寄せるので、絶対配置は要らない。
*/
@media screen and (min-width: 1024px) {
  .mpk-header-mascot {
    margin-left: auto;
  }
}

/*
  1023px以下はタイトルロゴを画面の中央に置く。
  マスコットを通常フローに入れたままだと、その幅のぶんロゴが左へずれるため、
  マスコットだけを絶対配置にして右端へ逃がす。
*/
@media screen and (max-width: 1023px) {
  .header-in {
    position: relative;
    justify-content: center;
  }

  .mpk-header-mascot {
    position: absolute;
    right: var(--mpk-wrap-pad);
    bottom: 0;
    margin-bottom: 0;
  }
}

/*
  幅が狭いと、中央のロゴと右端のマスコットが重なる。吹き出しを畳んでネコだけ残す。
  吹き出しを大きくしたぶん横幅も 63px → 86px に増えたので、
  畳み始める幅を 519px から広げている。
*/
@media screen and (max-width: 599px) {
  .mpk-header-mascot__speech {
    display: none;
  }
}

/* ロゴ画像（ヘッダーは白抜き版） */
.logo-header .site-logo-image,
.header-site-logo-image {
  display: block;
  width: auto;
  height: 32px;
  max-width: 100%;
}

@media screen and (min-width: 768px) {
  .logo-header .site-logo-image,
  .header-site-logo-image {
    height: 38px;
  }
}

/* ロゴ画像が無い場合のテキストロゴ */
.logo-header .site-name-text-link,
.logo-header a {
  color: var(--mpk-header-text);
  text-decoration: none;
}

.logo-header.logo-text .site-name-text {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   7. グローバルナビ（ヘッダーと同じ青帯。PC横型／モバイルはCocoon標準）
   -------------------------------------------------------------------------- */
.navi {
  background-color: var(--mpk-header-bg);
  border-bottom: 0;
}

.navi-in {
  border-top: 1px solid var(--mpk-header-rule);
}

.navi-in > ul {
  justify-content: flex-start;
  gap: 0;
}

/*
  Cocoon 標準は .navi-in > ul li { width:176px; height:60px } の固定幅。
  項目が等間隔に散らばって見えるため、内容に応じた幅へ戻す。
*/
.navi-in > ul > li {
  width: auto;
  height: auto;
  line-height: 1.4;
}

.navi-in > ul > li > a {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 54px;
  padding-inline: var(--mpk-space-lg);
  font-size: var(--mpk-fs-sm);
  font-weight: 700;
  color: var(--mpk-header-text);
  text-decoration: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  transition: background-color var(--mpk-transition);
}

.navi-in > ul > li > a:hover {
  color: var(--mpk-header-text);
  background-color: var(--mpk-header-hover);
}

/* 現在地は下線バーで示す（色だけに頼らない） */
.navi-in > ul > li.current-menu-item > a,
.navi-in > ul > li.current-menu-parent > a,
.navi-in > ul > li.current-menu-ancestor > a,
.navi-in > ul > li.current-post-ancestor > a {
  color: var(--mpk-header-text);
  background-color: var(--mpk-header-active);
}

.navi-in > ul > li.current-menu-item > a::after,
.navi-in > ul > li.current-menu-parent > a::after,
.navi-in > ul > li.current-menu-ancestor > a::after,
.navi-in > ul > li.current-post-ancestor > a::after {
  content: "";
  position: absolute;
  left: var(--mpk-space-lg);
  right: var(--mpk-space-lg);
  bottom: 0;
  height: 3px;
  background-color: var(--mpk-header-text);
  border-radius: 2px 2px 0 0;
}

/* サブメニュー */
.navi-in .sub-menu {
  background-color: var(--mpk-surface);
  border: 0;
  border-radius: 0 0 var(--mpk-radius-sm) var(--mpk-radius-sm);
  box-shadow: var(--mpk-shadow-md);
  overflow: hidden;
}

.navi-in .sub-menu li a {
  font-size: var(--mpk-fs-sm);
  font-weight: 600;
  color: var(--mpk-text);
  background-color: var(--mpk-surface);
}

.navi-in .sub-menu li a:hover {
  color: var(--mpk-primary);
  background-color: var(--mpk-primary-tint);
}

/*
  青帯の中にあるメニューボタンだけ白にする。
  .mobile-menu-buttons（画面下部に固定される白いバー）は対象にしないこと。
  白背景なので白文字にすると読めなくなる。
*/
.navi .navi-menu-button,
.navi .menu-caption,
.header-container .navi-menu-button {
  color: var(--mpk-header-text);
}

/* --------------------------------------------------------------------------
   8. フッター
   -------------------------------------------------------------------------- */
.footer {
  margin-top: 0;
  padding-block: var(--mpk-space-xl);
  background-color: var(--mpk-surface);
  border-top: 1px solid var(--mpk-border);
  color: var(--mpk-text-muted);
}

.footer a {
  color: var(--mpk-text-muted);
  text-decoration: none;
}

.footer a:hover {
  color: var(--mpk-primary);
  text-decoration: underline;
}

.footer .logo-footer .site-logo-image,
.footer-site-logo-image {
  display: block;
  height: 30px;
  width: auto;
  /* width/height属性が付かないためレイアウト領域をCSSで確保する */
  aspect-ratio: 431 / 80;
}

.footer-bottom-content .navi-footer-in > .menu-footer > li > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--mpk-space-sm);
}

.copyright {
  font-size: var(--mpk-fs-xs);
  color: var(--mpk-text-muted);
}

/* 運営情報リンク（該当ページが公開されているときだけ出る） */
.mpk-policy-links {
  max-width: var(--mpk-wrap-max);
  margin-inline: auto;
  padding: var(--mpk-space-md) var(--mpk-wrap-pad) 0;
}

.mpk-policy-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mpk-space-xs) var(--mpk-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpk-policy-links__list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--mpk-fs-sm);
  color: var(--mpk-text-muted);
  text-decoration: none;
}

.mpk-policy-links__list a:hover {
  color: var(--mpk-primary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   9. 印刷
   -------------------------------------------------------------------------- */
@media print {
  .navi,
  .sidebar,
  .mpk-policy-links {
    display: none;
  }

  main.main {
    border: 0;
    padding: 0;
    box-shadow: none;
  }
}