@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* インラインコードの装飾を強調 */
:not(.shiki.nord.hljs, .shiki.nord.hljs ~ p) code {
    color: #9f1b14; /* 濃い赤文字 */
    font-weight: bold;
    border-radius: 3px;
    font-size: 1.1em;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* =========================================================
   折りたたみ表示（応用情報技術者試験の章ページ用）
   ========================================================= */

/* 操作ボタンの帯 */
.fold-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1.5em;
  font-size: 14px;
}
.fold-toolbar button {
  padding: 6px 12px;
  border: 1px solid rgba(128, 128, 128, 0.6);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
}
.fold-toolbar button:hover {
  background: rgba(128, 128, 128, 0.12);
}

/* 開閉アイコン（▶ → 開くと下向き） */
.fold-icon {
  display: inline-block;
  width: 1em;
  margin-right: 0.35em;
  font-size: 0.75em;
  transition: transform 0.15s ease;
  vertical-align: middle;
}
.fold-open > .fold-head > .fold-icon,
.fold-open > .fold-term > .fold-icon {
  transform: rotate(90deg);
}

/* 見出しセクション */
.fold-head {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.fold-sec:not(.fold-open) > .fold-sec-body {
  display: none;
}

/* 用語リスト */
.fold-term {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fold-item:not(.fold-open) > .fold-item-body {
  display: none;
}
.fold-item-body > ul,
.fold-item-body > ol {
  margin-top: 0.3em;
}

/* キーボード操作時の枠 */
.fold-head:focus-visible,
.fold-term:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 2px;
}

/* =========================================================
   おすすめカードを小さめの横長バナーにする
   ========================================================= */
.recommended .navi-entry-cards a.navi-entry-card-link {
  width: 100%;
  max-width: 560px;           /* カード全体の横幅の上限 */
  margin: 0 16px;
}
.recommended .navi-entry-card {
  display: flex;
  align-items: center;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.recommended .navi-entry-card-thumb {
  flex: 0 0 160px;            /* 画像の横幅 */
  width: 160px;
}
.recommended .navi-entry-card-thumb img {
  width: 160px;
  height: 90px;               /* 画像の高さ（16:9） */
  object-fit: cover;
}
.recommended .navi-entry-card .card-content {
  position: static;
  inset: auto;
  height: auto;
  max-height: none;
  padding: 0 16px;
  background: none;
  color: #333;
  text-align: left;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5;
  opacity: 1;
}
.recommended .navi-entry-card .card-title {
  color: #333;
  background: none;
  padding: 0;
  border: 0;
}

/* スマホ */
@media screen and (max-width: 480px) {
  .recommended .navi-entry-card-thumb {
    flex-basis: 112px;
    width: 112px;
  }
  .recommended .navi-entry-card-thumb img {
    width: 112px;
    height: 63px;
  }
  .recommended .navi-entry-card .card-content {
    font-size: 14px;
    padding: 0 12px;
  }
}