@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** サイト共通の水色パレット
** サイト全体の装飾で使い回す変数
************************************/
:root {
  --aqua-50:  #f0f9ff;
  --aqua-100: #e0f4fc;
  --aqua-200: #c4eaf7;
  --aqua-300: #9bdaf0;
  --aqua-400: #5fc4e6;
  --aqua-500: #36b3dd;
  --aqua-600: #1d96c4;
  --aqua-700: #157a9f;
}

/************************************
** 記事本文の可読性改善
** 行間・段落余白・本文左右パディング・文字色の調整
************************************/
/* 本文テキストの行間を広く取り読みやすくする */
.entry-content {
  line-height: 2.1;
  color: #333;
  padding-left: 1.4em;
  padding-right: 1.4em;
}
/* 段落（ブロックエディタ含む）の行間と余白 */
.entry-content p,
.entry-content .wp-block-paragraph {
  line-height: 2.1;
  margin-bottom: 2.2em;
}
/* リストの行間も合わせる */
.entry-content ul,
.entry-content ol {
  margin-bottom: 1.8em;
}
/* 画像ブロック前後の余白を本文段落と同等以上に確保する */
.entry-content .wp-block-image {
  margin-top: 2em;
  margin-bottom: 2em;
}
/* 記事タイトルと日付の間に余白を確保 */
.article-header .entry-title {
  margin-bottom: 0.6em;
}
/* アイキャッチ画像を中央に配置する */
.eye-catch-wrap {
  justify-content: center;
}
.eye-catch img {
  margin-left: auto;
  margin-right: auto;
}

/************************************
** h2見出しデザイン（パターン4: フラスコアイコン＋やわらか破線下線）
** 本文中のh2に自動適用される
** 左のフラスコはインラインSVG（サイト名「たちつてラボ」にちなむピクトグラム）
** 除外したい場合は対象のh2に .no-deco クラスを付与する
************************************/
.entry-content h2 {
  position: relative;
  margin: 2.5em 0 1em;
  padding: 6px 6px 12px 40px;
  font-size: 1.35rem;
  color: inherit;
  line-height: 1.5;
  border-bottom: 2px dashed var(--aqua-300);
  /* Cocoon標準のh2装飾を打ち消す */
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}

/* 左に添えるフラスコのピクトグラム（インラインSVG・外部依存なし） */
.entry-content h2::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-58%);
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231d96c4'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%203%20H15%20M10%203%20V9%20L5%2020%20H19%20L14%209%20V3%20M8%2015%20H16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.entry-content h2::after {
  content: none;
}

/* 除外用: このクラスが付いたh2は素の見た目に戻す */
.entry-content h2.no-deco {
  padding: 0;
  border: none;
}
.entry-content h2.no-deco::before {
  content: none;
}

/************************************
** サイト全体の水色装飾（シンプル・控えめ）
** ヘッダー帯／グローバルメニュー／フッターは対象外
************************************/

/* --- サイドバー見出し（Recent Posts / Archives 等） --- */
/* 灰色背景を薄水色にし、左に水色アクセントを添える */
.sidebar h2,
.sidebar h3 {
  background-color: var(--aqua-50);
  border-left: 4px solid var(--aqua-500);
  border-radius: 6px;
}

/* --- 本文リンク --- */
.entry-content a {
  color: var(--aqua-600);
}
.entry-content a:hover {
  color: var(--aqua-700);
}

/* --- テーブルの見出し行 --- */
.entry-content table th {
  background-color: var(--aqua-50);
}

/* --- 引用 --- */
.entry-content blockquote {
  background-color: var(--aqua-50);
  border-left: 4px solid var(--aqua-300);
  border-radius: 6px;
}

/* --- ページネーション（現在ページを水色に） --- */
.pagination .page-numbers.current {
  background-color: var(--aqua-500);
  border-color: var(--aqua-500);
  color: #fff;
}
.pagination a.page-numbers:hover {
  background-color: var(--aqua-100);
}

/* --- 区切り線（hr）をさりげない水色グラデに --- */
.entry-content hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, var(--aqua-300), var(--aqua-100));
}

/* --- 記事カード/エントリーカードのホバーを水色寄りに --- */
.entry-card:hover,
.a-wrap:hover {
  background-color: var(--aqua-50);
}

/* --- 目次（Cocoon標準）を薄水色トーンに --- */
.toc {
  background-color: var(--aqua-50);
  border-color: var(--aqua-200);
  border-radius: 8px;
}
.toc-title {
  color: var(--aqua-700);
}
/* 目次直後のh2との間に十分な余白を確保する */
.toc + h2,
.toc + * h2:first-child {
  margin-top: 2.5em;
}

/************************************
** グローバルメニュー（案A: ホバー/現在地のみ水色・最小限）
************************************/
/* ホバー時の背景を薄水色に */
.navi-in a:hover {
  background-color: var(--aqua-50);
}
/* 現在表示中のメニュー項目を水色アクセントで示す */
.navi-in .current-menu-item > a,
.navi-in .current_page_item > a,
.navi-in .current-menu-parent > a {
  background-color: var(--aqua-50);
  box-shadow: inset 0 -3px 0 var(--aqua-500);
}

/************************************
** グローバルメニューの2段表示（メイン日本語＋英語サブ）
** メニューラベル＝日本語、各項目の「説明」欄＝英語 を前提
** 説明欄が空の項目は従来どおり1段で表示される（無害）
************************************/
/* 縦並びにして中央寄せ */
.navi-in > ul .caption-wrap {
  flex-direction: column;
  line-height: 1.3;
}
/* メイン（日本語）ラベル */
.navi-in .item-label {
  font-size: 16px;
}
/* サブ（英語）を小さく薄く表示 */
.navi-in .item-description {
  display: block;
  width: 100%;
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-top: 2px;
  text-transform: uppercase;
}

/************************************
** 検索フォームを水色基調に
************************************/
.search-box .search-edit {
  border: 1px solid var(--aqua-300);
  border-radius: 6px;
}
.search-box .search-edit:focus {
  border-color: var(--aqua-500);
  outline: none;
  box-shadow: 0 0 0 2px var(--aqua-100);
}
/* 検索ボタンを塗りの水色ボタンに */
.search-box .search-submit {
  color: #fff;
  background-color: var(--aqua-500);
  border-radius: 6px;
  padding: 0 12px;
}
.search-box .search-submit:hover {
  background-color: var(--aqua-600);
}

/************************************
** カテゴリラベルを水色基調に
************************************/
.cat-label {
  background-color: var(--aqua-600);
  border-color: var(--aqua-600);
}

/************************************
** SNSシェア／フォローボタンを水色基調に統一
** 各SNSの色変数(--cocoon-sns-color)を水色で上書きする
** Cocoonのブランド色指定に勝てるよう優先度を確保する
************************************/
.sns-share-buttons a[class*="-button"],
.sns-follow-buttons a[class*="-button"] {
  --cocoon-sns-color: var(--aqua-500);
}
/* 主要ボタンに軽く濃淡を付けてのっぺりさせない */
.sns-share-buttons a.facebook-button,
.sns-follow-buttons a.facebook-button {
  --cocoon-sns-color: var(--aqua-600);
}
.sns-share-buttons a.copy-button {
  --cocoon-sns-color: var(--aqua-400);
}
/* ホバーはCocoon標準のopacityに任せる */

/************************************
** トップへ戻るボタン
** 水色基調にしつつ、コピーライトと重ならないよう上にずらす
************************************/
.go-to-top {
  bottom: 48px;
}
.go-to-top-button {
  background-color: var(--aqua-500);
  color: #fff;
  border-radius: 8px;
}
.go-to-top-button:hover {
  background-color: var(--aqua-600);
  color: #fff;
}

/************************************
** ブロックエディタの画像をデフォルトで中央ぞろえにする
** 個別に左/右寄せした画像（alignleft/alignright）はそのまま尊重する
************************************/
.entry-content .wp-block-image {
  text-align: center;
}
.entry-content .wp-block-image img {
  margin-left: auto;
  margin-right: auto;
}
/* 図のキャプションも中央に */
.entry-content .wp-block-image figcaption {
  text-align: center;
}
/* 左寄せ・右寄せ・全幅指定は従来通り（中央寄せを打ち消す） */
.entry-content .wp-block-image.alignleft {
  text-align: left;
}
.entry-content .wp-block-image.alignleft img {
  margin-left: 0;
  margin-right: auto;
}
.entry-content .wp-block-image.alignright {
  text-align: right;
}
.entry-content .wp-block-image.alignright img {
  margin-left: auto;
  margin-right: 0;
}

/* 固定ページの作成日・更新日を非表示にする
   （HOMEやAbout等の固定ページに日付は不要なため） */
.page .date-tags {
  display: none;
}

/************************************
** アーカイブ見出し（カテゴリページのタイトル）
** 「フォルダアイコン＋Tech」を水色のおしゃれな見出しに
************************************/
.archive-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--aqua-700);
  background: linear-gradient(135deg, var(--aqua-50), #fff);
  border-left: 6px solid var(--aqua-500);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(29, 150, 196, 0.08);
}
/* フォルダアイコンを水色の丸バッジに */
.archive-title .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 0;
  font-size: 18px;
  color: #fff;
  background: var(--aqua-500);
  border-radius: 50%;
  flex: 0 0 auto;
}

/* --- カテゴリごとにアイコンを差し替える --- */
/* Cocoonがbodyに付与する category-スラッグ クラスで出し分ける        */
/* 元のFontAwesome文字(::before)を隠し、SVGを背景として中央に表示する */
.category-tech .archive-title .fa::before,
.category-notes .archive-title .fa::before,
.category-gallery .archive-title .fa::before,
.category-tools .archive-title .fa::before {
  content: "";
}
.category-tech .archive-title .fa,
.category-notes .archive-title .fa,
.category-gallery .archive-title .fa,
.category-tools .archive-title .fa {
  background-color: var(--aqua-500);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}
/* 技術: コード記号 */
.category-tech .archive-title .fa {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14.7%206.3a4%204%200%200%200-5.4%205.4L3%2018l3%203%206.3-6.3a4%204%200%200%200%205.4-5.4l-2.5%202.5-2.1-2.1Z'/%3E%3C/svg%3E");
}
/* 雑記: ペン */
.category-notes .archive-title .fa {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020h9'/%3E%3Cpath%20d='M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4Z'/%3E%3C/svg%3E");
}
/* 創作: 画像 */
.category-gallery .archive-title .fa {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'%20ry='2'/%3E%3Ccircle%20cx='8.5'%20cy='8.5'%20r='1.5'/%3E%3Cpolyline%20points='21%2015%2016%2010%205%2021'/%3E%3C/svg%3E");
}
/* ツール: コード記号 */
.category-tools .archive-title .fa {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='16%2018%2022%2012%2016%206'/%3E%3Cpolyline%20points='8%206%202%2012%208%2018'/%3E%3C/svg%3E");
}

/************************************
** 記事カード（一覧）の水色装飾
** Cocoon設定でカードタイプ/カラム数/日付表示を選んだ上に重ねる装飾
************************************/
.entry-card-wrap {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.entry-card-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(29, 150, 196, 0.18);
}
/* カード内タイトル */
.entry-card-title {
  color: #2a3b44;
}
.entry-card-wrap:hover .entry-card-title {
  color: var(--aqua-700);
}
/* 日付などのメタ情報を水色に */
.entry-card-meta .post-date,
.entry-card-meta .post-update {
  color: var(--aqua-600);
}
/* サムネにさりげない角丸 */
.entry-card-thumb img,
.card-thumb img {
  border-radius: 8px;
}

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

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

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

/************************************
 * ツール配布ブロック（[tachi_tool]）
 * 水色パレットに合わせた配布カード
 ************************************/
.tachi-tool {
  margin: 32px 0;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--aqua-200);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(29, 150, 196, 0.08);
}

/* 見出し行（名前＋バージョン） */
.tachi-tool-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
/* ツール名（h3ではなくpで出力。見出し扱い・目次・枠装飾を回避） */
.entry-content .tachi-tool .tachi-tool-name,
.tachi-tool .tachi-tool-name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--aqua-700);
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
}
.tachi-tool-version {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--aqua-600);
  background: var(--aqua-50);
  padding: 2px 8px;
  border-radius: 6px;
}

/* 説明文 */
.tachi-tool-desc {
  margin-bottom: 16px;
  line-height: 1.8;
}
.tachi-tool-desc p:last-child {
  margin-bottom: 0;
}

/* メタ情報（動作環境・サイズ・DL数） */
.tachi-tool-meta {
  list-style: none;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--aqua-50);
  border-radius: 10px;
  display: grid;
  gap: 8px;
}
.tachi-tool-meta li {
  display: flex;
  gap: 12px;
  font-size: 0.92rem;
}
.tachi-tool-meta-key {
  flex: 0 0 88px;
  font-weight: 700;
  color: var(--aqua-700);
}
.tachi-tool-meta-val {
  flex: 1 1 auto;
  color: #333;
}

/* ダウンロードボタン */
.tachi-tool-action {
  text-align: center;
  margin-top: 18px;
}
.tachi-tool-btn,
.entry-content a.tachi-tool-btn,
.entry-content a.tachi-tool-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--aqua-500);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.1s ease;
}
.tachi-tool-btn:hover,
.entry-content a.tachi-tool-btn:hover {
  background: var(--aqua-600);
  color: #fff;
}
.tachi-tool-btn:active {
  transform: translateY(1px);
}
.tachi-tool-btn svg {
  flex: 0 0 auto;
}
.tachi-tool-btn-disabled {
  background: #b9c4c9;
  cursor: not-allowed;
}
.tachi-tool-btn-disabled:hover {
  background: #b9c4c9;
}

/* 利用規約への注意書き */
.tachi-tool-license {
  margin: 0;
  font-size: 0.82rem;
  color: #666;
  text-align: center;
}

/* 編集者向けのエラー表示 */
.tachi-tool-error {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: #c0392b;
  text-align: center;
}

/* スマホ */
@media screen and (max-width: 480px) {
  .tachi-tool {
    padding: 20px 18px;
  }
  .tachi-tool-meta-key {
    flex-basis: 72px;
  }
  .tachi-tool-btn {
    width: 100%;
    justify-content: center;
  }
}

/************************************
** コードブロックの余白調整
** 上を詰めて直前の説明文との結びつきを強め、
** 下を広く取って次のセクションとの区切りを明確にする
************************************/
.entry-content .wp-block-code,
.entry-content pre.hljs {
  margin-top: -1em !important;
  margin-bottom: 2.8em !important;
}

/************************************
** コードブロックのシンタックスハイライト調整
** Cocoonのhighlight.jsテーマ（暗め）の上で
** ・コメントが暗すぎて読めない → 明るいグレーに
** ・print等の組み込み関数が無色 → 水色に
** highlight.jsのテーマ指定に勝てるよう !important で上書きする
************************************/
/* コメント（# 〜 等）を読みやすい明るさに */
.hljs-comment,
.hljs-quote {
  color: #a9b7c6 !important;
}
/* 組み込み関数（print など）・関数名を水色に */
.hljs-built_in,
.hljs-builtin-name,
.hljs-title.function_,
.hljs-section {
  color: var(--aqua-400) !important;
}

/************************************
** 付箋風ボックス（Cocoonの sticky-box ブロック）を水色基調に
** 「動作確認済みバージョン」等で使う付箋を、サイトのイメージ（水色）に合わせる
** 全記事に適用。色付き指定（st-yellow/red/blue/green）を選んだ場合はそちらを尊重する
************************************/
.entry-content .blank-box.sticky:not(.st-yellow):not(.st-red):not(.st-blue):not(.st-green) {
  position: relative;
  border: 1px solid var(--aqua-200);
  border-left: 6px solid var(--aqua-500);
  background-color: var(--aqua-50);
  border-radius: 10px;
  padding: 16px 18px 16px 46px;
  box-shadow: 0 2px 10px rgba(29, 150, 196, 0.08);
}
/* 左に情報アイコン（インラインSVG・外部依存なし） */
.entry-content .blank-box.sticky:not(.st-yellow):not(.st-red):not(.st-blue):not(.st-green)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 17px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231d96c4'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cline%20x1='12'%20y1='16'%20x2='12'%20y2='12'/%3E%3Cline%20x1='12'%20y1='8'%20x2='12.01'%20y2='8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 付箋内の段落の余白を整える */
.entry-content .blank-box.sticky p:last-child {
  margin-bottom: 0;
}

/************************************
** サイドバーのプロフィールカード・検索ボックスをコンパクトにする
** 縦幅・上下余白が広すぎたため、占有スペースを抑える
** アイコン画像は据え置き〜一回り大きくする
************************************/
/* プロフィールカード: 全体の余白を詰める */
#sidebar .author-box,
#slide-in-sidebar .author-box {
  padding: 12px 14px;
}
/* アイコンを一回り大きく（既定100px → 112px）、上下の余白も縮める */
#sidebar .nwa .author-box .author-thumb,
#slide-in-sidebar .nwa .author-box .author-thumb {
  width: 112px;
  margin: 4px auto 6px;
}
/* 本文側コンテンツの内側余白を詰める */
#sidebar .author-box .author-content,
#slide-in-sidebar .author-box .author-content {
  margin: 0;
  padding: 0;
}
/* 名前まわりの余白を詰める */
#sidebar .author-box .author-name,
#slide-in-sidebar .author-box .author-name {
  margin: 4px 0 2px;
}
/* プロフィール文（bio）の行間・余白・文字サイズを抑えて縦幅を圧縮 */
#sidebar .author-box .author-description,
#slide-in-sidebar .author-box .author-description {
  margin: 0.3em 0;
  font-size: 0.85em;
  line-height: 1.5;
}
/* フォローボタン上の余白を詰める */
#sidebar .author-box .profile-follows,
#sidebar .author-box .author-follows,
#slide-in-sidebar .author-box .profile-follows,
#slide-in-sidebar .author-box .author-follows {
  margin-top: 6px;
}

/* 検索ボックス: 上下の余白（外側マージン）を詰める */
#sidebar .search-box,
#slide-in-sidebar .search-box {
  margin: 0.4em 0 0.8em;
}

/************************************
** Terms（利用規約）ページ
** 本文はブロックエディタのネイティブブロック（段落・見出し・リスト・グループ）で構成し、
** 装飾だけをここで当てる。各ブロックの「追加CSSクラス」で紐付ける。
**   .terms-lead          … リード文ボックス
**   .terms-tldr          … 「ざっくりまとめ」カード（グループ）
**   .terms-tldr__title   … カード見出し（段落）
**   .terms-list--ok/--ng … OK/NGチップ（リスト）
**   .terms-updated       … 最終更新日（段落）
** セクション見出しはサイト標準のh2（フラスコ装飾）をそのまま使う。
************************************/
/* リード文（やわらかい水色の導入ボックス） */
.entry-content .terms-lead {
  background: var(--aqua-50);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  line-height: 1.9;
}
.entry-content .terms-lead strong { color: var(--aqua-700); }

/* ざっくりまとめカード */
.entry-content .terms-tldr {
  border: 2px solid var(--aqua-100);
  border-radius: 14px;
  padding: 1.2rem 1.4rem 1.4rem;
}
.entry-content .terms-tldr__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--aqua-700);
  margin: 0 0 0.9rem;
}

/* OK / NG チップ（リストブロックを横並びのチップにする） */
.entry-content .terms-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 0.6rem;
  padding: 0;
}
.entry-content .terms-list li {
  position: relative;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  padding: 0.55rem 0.8rem 0.55rem 2.2rem;
  border-radius: 8px;
}
.entry-content .terms-list li::before {
  position: absolute;
  left: 0.75rem;
  font-weight: 900;
}
.entry-content .terms-list--ok li { background: var(--aqua-50); color: #1f7a52; }
.entry-content .terms-list--ok li::before { content: "○"; color: #2bb673; }
.entry-content .terms-list--ng { margin-bottom: 0; }
.entry-content .terms-list--ng li { background: #fdeef0; color: #b23b4b; }
.entry-content .terms-list--ng li::before { content: "×"; color: #e0566b; }

/* 最終更新日 */
.entry-content .terms-updated {
  font-size: 0.82rem;
  color: #8a979e;
  text-align: right;
  border-top: 1px solid #eee;
  padding-top: 1rem;
  margin-top: 2.6rem;
}

/* ===== Profileページ：基本レイアウト・ヒーロー・紹介 ===== */
/* 旧Custom HTML内の表示を維持しつつ、本文から装飾を分離する */
/* ===== Profile ページ スタイル ===== */

.profile-page-wrap {
  color: #2b3a42;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --- ヒーロー --- */
.profile-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem 0 2.5rem;
}
.profile-hero__image {
  flex: 0 0 200px;
  text-align: center;
}
.profile-hero__image .tachi-profile-image {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #fff;
  box-shadow: 0 8px 22px rgba(29,150,196,0.22);
  background: var(--aqua-50, #eef9fd);
}
.profile-hero__text { flex: 1 1 300px; }
.profile-hero__greeting {
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--aqua-600, #1d96c4);
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.profile-hero__name {
  font-size: 2.7rem;
  font-weight: 800;
  line-height: 1.15;
  color: #1f2d34;
  margin: 0 0 0.4rem;
}
.profile-hero__role {
  font-size: 1.15rem;
  font-weight: 600;
  color: #51626b;
  margin: 0 0 1.1rem;
}
.profile-hero__note {
  font-size: 0.78rem;
  color: #8a979e;
  line-height: 1.7;
  border-left: 3px solid var(--aqua-200, #b5e3f3);
  padding-left: 0.8rem;
  margin: 0;
}

/* --- About Me --- */
.profile-about {
  padding: 0 0 3rem;
}
.profile-about__heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.7rem;
  font-weight: 800;
  color: #1f2d34;
  margin: 0 0 1.3rem;
}
.profile-about__heading::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1.5rem;
  border-radius: 3px;
  background: var(--aqua-500, #36b3dd);
}
.profile-about__catch {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--aqua-700, #16769b);
  line-height: 1.6;
  margin: 0 0 1.2rem;
}
.profile-about p {
  font-size: 1rem;
  line-height: 1.95;
  color: #3a4a52;
  margin: 0 0 1rem;
}

/* --- スキル・実績（資格とツールを統合） --- */
.profile-skills__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8a979e;
  margin: 1.6rem 0 0.6rem;
}
.profile-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.profile-skills li {
  border-radius: 999px;
  padding: 0.38rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--aqua-50, #eef9fd);
  color: var(--aqua-700, #16769b);
  border: 1px solid var(--aqua-100, #d7f0f9);
}
/* 資格・実績は塗りで強調（同じ並びに統合しつつ区別する） */
.profile-skills li.is-badge {
  background: var(--aqua-500, #36b3dd);
  color: #fff;
  border-color: var(--aqua-500, #36b3dd);
}

/* --- レスポンシブ --- */
@media (max-width: 600px) {
  .profile-hero {
    gap: 1.3rem;
    justify-content: center;
    text-align: center;
  }
  .profile-hero__image { flex: 0 0 100%; }
  .profile-hero__note { text-align: left; }
  .profile-hero__name { font-size: 2.1rem; }
}

/* GutenbergのGroupが自動付与するブロック間余白を旧HTMLと同じ0に戻す */
.page-id-72 .profile-page-wrap > .wp-block-group,
.page-id-72 .profile-hero > .wp-block-group {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ===== Profileページ：スキル・資格チップ ===== */
/* 色は共通化し、形状だけでスキルと資格を区別する */
.page-id-72 .profile-skills li,
.page-id-72 .profile-skills li.is-badge {
  background: var(--aqua-50, #eef9fd);
  color: var(--aqua-700, #16769b);
  border-color: var(--aqua-100, #d7f0f9);
}

.page-id-72 .profile-skills li {
  border-radius: 999px;
}

.page-id-72 .profile-skills li.is-badge {
  border-radius: 4px;
}


/************************************
** Gallery（創作）固定ページ ID 79
** ネイティブブロックで作品を追加し、装飾だけをページ限定で適用する
************************************/

.page-id-79 .entry-content {
  margin-top: 0;
}

.page-id-79 .gallery-page {
  max-width: 1080px;
  margin-inline: auto;
}

.page-id-79 .gallery-page.is-layout-constrained > * {
  max-width: none;
}

/* 技術・雑記カテゴリと同じ、丸アイコン＋日英2段見出し */
.page-id-79 .gallery-hero {
  display: flex;
  flex-direction: column;
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
  padding: 0;
  background: none;
  border: 0;
}

.page-id-79 .gallery-hero__head {
  order: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 20px 0 10px;
  border-bottom: 2px solid var(--aqua-100);
}

.page-id-79 .gallery-hero__head::before {
  content: "";
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--aqua-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}

.page-id-79 .gallery-hero__titles {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.page-id-79 .entry-content .gallery-hero__title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--aqua-700);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
}

.page-id-79 .gallery-hero__eyebrow {
  margin: 2px 0 0;
  color: #5a6a72;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  line-height: 1.15;
  text-transform: uppercase;
  opacity: 0.6;
}

/* HTML上は説明文を先頭に置き、SEOの説明文として拾いやすくする */
.page-id-79 .gallery-hero__lead {
  order: 2;
  margin: 10px 0 0;
  color: #5a6a72;
  font-size: 0.9rem;
  line-height: 1.8;
}

.page-id-79 .entry-content .gallery-hero__title::before,
.page-id-79 .entry-content .gallery-section__title::before {
  content: none;
}

/* 作品種別ごとの見出し。作品を増やしても見渡しやすい左揃えにする */
.page-id-79 .gallery-section {
  margin: 0 auto clamp(4rem, 8vw, 6rem);
}

.page-id-79 .entry-content .gallery-section__title {
  margin: 0;
  padding: 0 0 0.65rem;
  border: 0;
  border-bottom: 2px solid var(--aqua-100);
  background: none;
  color: var(--aqua-700);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  letter-spacing: 0.02em;
}

.page-id-79 .gallery-section__intro {
  margin: 0.7rem 0 2rem;
  color: #5a6a72;
  line-height: 1.8;
  text-align: left;
}

/* 作品未登録時だけ表示する、控えめな準備中エリア */
.page-id-79 .gallery-collection {
  padding: clamp(2rem, 5vw, 3rem) 1.25rem;
  border: 1px dashed var(--aqua-200);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--aqua-50), #fff 70%);
  text-align: center;
}

.page-id-79 .gallery-empty__title {
  margin: 0;
  color: var(--aqua-700);
  font-weight: 700;
}

.page-id-79 .gallery-empty__text {
  margin: 0.4rem 0 0;
  color: #6d7b82;
  font-size: 0.9rem;
}

/* 画像・CG・動画を追加した後の標準ブロック */
.page-id-79 .gallery-collection:has(.wp-block-gallery),
.page-id-79 .gallery-collection:has(.wp-block-image),
.page-id-79 .gallery-collection:has(.wp-block-video),
.page-id-79 .gallery-collection:has(.wp-block-embed) {
  padding: 0;
  border: 0;
  background: none;
  text-align: initial;
}

.page-id-79 .gallery-collection .wp-block-gallery {
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.page-id-79 .gallery-collection .wp-block-image,
.page-id-79 .gallery-collection .wp-block-video,
.page-id-79 .gallery-collection .wp-block-embed {
  margin-block: 0 1.5rem;
}

.page-id-79 .gallery-collection .wp-block-image img,
.page-id-79 .gallery-collection .wp-block-video video,
.page-id-79 .gallery-collection .wp-block-embed__wrapper {
  overflow: hidden;
  border-radius: 12px;
}

.page-id-79 .gallery-collection figcaption {
  color: #5a6a72;
  font-size: 0.82rem;
  line-height: 1.6;
}

/* 将来作品リンクを設定した場合も、キーボード操作位置を明確にする */
.page-id-79 .gallery-page a:focus-visible,
.page-id-79 .gallery-page button:focus-visible {
  outline: 3px solid var(--aqua-500);
  outline-offset: 4px;
  border-radius: 4px;
}

@media screen and (max-width: 782px) {
  .page-id-79 .gallery-hero {
    margin-bottom: 3rem;
  }

  .page-id-79 .gallery-section {
    margin-bottom: 4rem;
  }
}

@media screen and (max-width: 480px) {
  .page-id-79 .gallery-hero__lead {
    font-size: 0.88rem;
  }

  .page-id-79 .gallery-collection {
    padding: 1.75rem 1rem;
  }
}


/************************************
** キーボードフォーカスと動きの抑制
************************************/
.navi-in a:focus-visible,
.entry-content a:focus-visible,
.pagination a:focus-visible,
.search-box .search-submit:focus-visible,
.go-to-top-button:focus-visible,
.entry-card-wrap:focus-visible,
.tachi-tool-btn:focus-visible,
.tachi-v2-section-more:focus-visible,
.tachi-v2-post-link:focus-visible,
.tachi-v2-about-btn:focus-visible,
.tachi-v2-about .wp-block-button__link:focus-visible {
  outline: 3px solid var(--aqua-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.tachi-v2-post-link:focus-visible {
  border-color: var(--aqua-400);
  box-shadow: 0 10px 24px rgba(29, 150, 196, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .entry-card-wrap,
  .tachi-tool-btn,
  .tachi-v2-post-link,
  .tachi-v2-thumb-img,
  .tachi-v2-about-btn,
  .tachi-v2-about .wp-block-button__link {
    transition: none !important;
    animation: none !important;
  }

  .entry-card-wrap:hover,
  .entry-card-wrap:focus-within,
  .tachi-v2-post-link:hover,
  .tachi-v2-post-link:focus-visible,
  .tachi-v2-post-link:hover .tachi-v2-thumb-img,
  .tachi-v2-post-link:focus-visible .tachi-v2-thumb-img,
  .tachi-tool-btn:active {
    transform: none !important;
  }
}