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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*##### 基本 #####*/
/* 非表示項目 */
body.home .date-tags,
.page .date-tags {
display: none;
}
/*** Cocoon masterトップメニュー固定時のサブメニュー非表示設定解除 ***/
.fixed-header .has-sub,
.fixed-header .navi-in li.menu-item-has-children:hover .sub-menu {
display: block;
}
.entry-header {
 /* 編集リンク */
 .edit-link {
 text-align: right;
  & a {
  color: #2ca2d4;
  }
 }
}
.entry-content {
 & p:last-child {
 margin-bottom: 20px;
 }
/* 挿入画像 */
 & img.alignleft,
 & img.alignright,
 & img.alignnone {
 /*max-width: 50%;*/
 float: none;
 }
 & img.alignnone {
 /*margin: auto;
 text-align: center;*/
 }
 & img.alignleft,
 & img.alignright {
 /*display: block;*/
 }
 & p {
 /*text-align: center;*/
 margin: 0;
  & a {
  /*display: flex;
  margin: auto;*/
  }
 }
 & p:first-of-type {
 /*margin-top: 20px;*/
 }
 & p:last-of-type {
 margin-bottom: 20px;
 }
 .post-gallery {
 display: flex;
 flex-wrap: wrap; /* アイテムが収まりきらない場合に折り返しを許可 */
 justify-content: center; /* 横方向の中央寄せ */
 align-items: center;
 gap: 15px; /* 各アイテム間のスペース */
 margin: 0 auto 20px; /* コンテナ全体を中央揃え */
 }
 .grid-image {
 /*flex: 0 1 150px;*/ /* 最小幅150px、余白に応じて伸縮 */
 max-width: 50%; /* 最大幅を固定 */
 }
 .grid-image img {
 width: 100%; /* 画像を親コンテナに合わせる */
 height: auto; /* 縦横比を維持 */
 display: block;
 object-fit: cover; /* 必要に応じて画像を調整 */
 }
}
/*##### マップページ #####*/
/* マップエリア凡例 */
#custom_html-4 {
font-size: 80%;
}
.map-area-color {
display: flex;
flex-wrap: wrap; /* 折り返しが必要な場合に備える */
gap: 10px; /* アイテム間のスペースを調整 */
 & div {
  display: flex;
  /*align-items: center;*/ /* 必要なら縦位置を調整 */
  & dt {
  /*width: 50px;
  height: 20px;*/
  margin-right: 5px;
  }
  & dd {
  margin: 0; /* デフォルトのマージンをリセット */
  }
 }
 & div:nth-last-of-type(2) dt {
 background-color: lightblue;
 width: 50px;
 height: 20px;
 }
 & div:nth-last-of-type(3) dt {
 background-color: lightgreen;
 width: 50px;
 height: 20px;
 }
 & div:nth-last-of-type(4) dt {
 background-color: lightcoral;
 width: 50px;
 height: 20px;
 }
 & div:nth-last-of-type(5) dt {
 background-color: yellow;
 width: 50px;
 height: 20px;
 }
}
/* コンパス */
.compass img {
width: 50px;
height: 50px;
transition: transform 0.5s ease;
}
/*body.hiroyama .compass img {
transform: rotate(135deg)
}*/
/* ポップアップのスタイル */
.grid-cell-options {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  /*display: none;*/ /* 初期状態では非表示 */
}

.grid-cell-options a {
  display: inline-block;
  color: #0073aa;
  text-decoration: none;
  margin: .5em 0;
line-height: 130%;
}

.grid-cell-options a:hover {
  text-decoration: underline;
}
/* クリック可能な範囲のマウスオーバー時の背景色 */
div.grid div.hovered-highlight {
    background-color: rgba(255, 255, 0, 0.5) !important;
}

/*### ヘッダー ###*/
/* ヘッダー検索窓 */
.header-search {
width: 300px !important;
 .search-box {
 margin-top: 10px;
 margin-left: 10px;
 }
}
.header-search,
.search-menu-content {
 & input[type="text"] {
 padding: 8px 14px;
 font-size: 14px;
 border-radius: 14px 14px 14px 14px / 50% 50% 50% 50%;
 }
 & input[type="text"]:focus {
 outline-color: #2ca2d4;
 }
 .search-submit {
 color: #2ca2d4;
 }
}

/*##### マス目 #####*/
/* 親要素: 横スクロールを有効化 */
.scroll-wrapper {
  width: 100%; /* 親要素は画面幅いっぱい */
  overflow-x: auto; /* 横スクロールを有効化 */
  overflow-y: hidden; /* 縦スクロールは無効化 */
  margin: 0 auto; /* 中央揃え */
  white-space: nowrap; /* はみ出し防止 */
}
.grid-container {
  display: grid;
  grid-template-columns: auto 1fr; /* 縦目盛り+グリッド */
  grid-template-rows: auto 1fr;  /* 横目盛り+グリッド */
  width: 100%; /* 幅いっぱいに広げる */
  max-width: 100%; /* ウィンドウ幅を超えない */
  height: auto; /* 高さはJavaScriptで調整 */
  margin: 0 auto; /* 中央揃え */
  overflow: hidden; /* はみ出しを隠す */
  position: relative; /* 子要素のposition: absoluteの基準 */
}

.horizontal-labels {
  grid-column: 2; /* 横目盛りをグリッド2列目に配置 */
  grid-row: 1;    /* 横目盛りをグリッド1行目に配置 */
  display: grid;
  grid-template-columns: repeat(100, 1fr);
  height: 2em;
  text-align: center;
  font-size: 0.8em;
  color: #333;
}
.horizontal-labels div {
  display: inline-flex; /* 中央揃え用 */
  justify-content: center;
  align-items: center;
  width: 2em; /* 円の直径 */
  height: 2em; /* 円の直径 */
  border: 1px solid #333; /* 円の枠線 */
  border-radius: 50%; /* 円形にする */
  font-size: 0.9em; /* フォントサイズ */
  text-align: center;
  line-height: 1; /* テキストの高さを調整 */
  margin: 0 auto; /* センター揃え */
}

.vertical-labels {
  grid-column: 1; /* 縦目盛りをグリッド1列目に配置 */
  grid-row: 2;    /* 縦目盛りをグリッド2行目に配置 */
  display: grid;
  grid-template-rows: repeat(100, 1fr);
  width: 2em;
  text-align: center;
  font-size: 0.8em;
  color: #333;
}
.vertical-labels div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(1em); /* マス目サイズに応じたフォントサイズ */
  grid-row: span 2;
  /*width: 100%;*/ /* ラベルの幅 */
  height: auto; /* 各目盛りの高さをマス目に揃える */
  text-align: center;
  line-height: 1; /* テキストの高さを調整 */
  /* ラベルを2マス分の中央に配置 */
  transform: translateY(25%); /* ラベルを上から50%の位置に調整 */
}

div.grid {
  grid-column: 2; /* グリッドを2列目に配置 */
  grid-row: 2;    /* グリッドを2行目に配置 */
  display: grid;
  grid-template-columns: repeat(100, 1fr); /* 横に100マス */
  grid-template-rows: repeat(100, 1fr);    /* 縦に100マス */
  width: 100%;
  /*height: auto;*/ /* 高さはJavaScriptで調整 */
  aspect-ratio: 1 / 1;
  border: 1px solid #000;
}

div.grid div {
  border: 1px solid #ccc;
  background-color: #fff;
  box-sizing: border-box; /* ボーダーがはみ出ないように */
}

div.grid .height-1 {
  background-color: lightblue;
}

div.grid .height-2 {
  background-color: lightgreen;
}

div.grid .height-3 {
  background-color: lightcoral;
}
div.grid .height-4 {
  background-color: yellow;
  z-index: 2;
}
div.grid .related-highlight {
  background-color: rgba(128, 128, 128, 0.3); /* 半透明のグレー */
  z-index: -1; /* 現在の背景色より背面 */
}

div.grid .clickable {
    position: relative;
    cursor: pointer;
}

.center-text {
  position: absolute;
  /*transform: translate(calc(-50% + 2em), -50%);*/ /* テキストを中央揃え */
  background-color: rgba(255, 255, 255, 0.8); /* 半透明の背景色 */
  color: #333;
  /*font-size: 0.8em;*/ /* テキストサイズ */
  white-space: nowrap; /* テキストの折り返しを防ぐ */
  padding: 2px 5px; /* テキストの余白 */
  border-radius: 5px; /* テキスト背景の角丸 */
  pointer-events: none; /* マウスイベントを無効化 */
  text-align: center;
}
/* 外周セルのボーダーをoutlineで表示 */
div.grid .border-top {
  /*outline: 2px solid red;
  outline-offset: -2px;*/
  border-top: 3px solid red;
}

div.grid .border-right {
  /*outline: 2px solid red;
  outline-offset: -2px;*/
  border-right: 3px solid red;
}

div.grid .border-bottom {
  /*outline: 2px solid red;
  outline-offset: -2px;*/
  border-bottom: 3px solid red;
}

div.grid .border-left {
  /*outline: 2px solid red;
  outline-offset: -2px;*/
  border-left: 3px solid red;
}

/* クリック可能なセル */
div.grid .clickable {
  cursor: pointer;
}
:not(.grid-100) {
 .printbutton-container {
 display: none;
 }
}
.grid-100 {
 /* 印刷時マップタイトル */
 #result-displayWrap {
 display: none;
 text-align: center;
  #result-display {
  display: inline-block;
  padding-bottom: .5em;
  border-bottom: 1px solid #ccc;
   .parent-category {
   font-size: 24pt;
   }
   .separator {
   font-size: 18px;
   margin-left: 1em;
   margin-right: 1em;
   }
   .child-category {
   font-size: 21pt;
   }
  }
 }
 /* 印刷ボタン */
 .printbutton-container {
 display: block;
 text-align: right;
  #printButton {
  font-size: 16px;
  cursor: pointer;
  padding: .3em .5em;
  background-color: #2ca2d4; /* 背景色 */
  color: white; /* 文字色 */
  border: none; /* ボーダーを削除 */
  border-radius: 8px; /* 角丸 */
  }
 }
}
/*** テスト ***/
body.wp-admin {
 .grid-container {
    overflow: auto; /* スクロール可能に */
    max-width: 300px; /* 表示領域の最大幅 */
    max-height: 300px; /* 表示領域の最大高さ */
 }
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  .grid-container {
    width: 834px; /* 幅を固定 */
    max-width: none;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .grid-container {
    /*width: 480px;*/ /* 最小幅を固定 */
    /*overflow-x: auto;*/ /* 横スクロールを有効化 */
  }
  /* 挿入画像 */
 .entry-content {
  & img.alignleft,
  & img.alignright {
  float: none;
  margin: auto;
  text-align: center;
  max-width: 100%;
  }
  .grid-image {
  max-width: 100%;
  }
 }
}
/* タグレイヤー：.grid と同じ領域（2列目・2行目）に配置して重ねる */
.grid-tag-layer{
  grid-column: 2;  /* .grid と同じ */
  grid-row: 2;     /* .grid と同じ */

  display: none;   /* JSで必要な時だけ表示 */
  z-index: 50;
  pointer-events: none;

  /* .grid と同じ100×100 */
  display: grid;
  grid-template-columns: repeat(100, 1fr);
  grid-template-rows: repeat(100, 1fr);

  width: 100%;
  aspect-ratio: 1 / 1; /* .grid と合わせる */
}


.grid-tag{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  line-height:1;
  color:#000;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}
/*************************
** 印刷用のメディアクエリ
**************************/
@page {
 /*size: A4 portrait;*/
 /*size: A4;
 margin: 0;*/
}
@media print {
 *{
 margin: 0mm;
 padding: 0mm;
 /*color: #000;*/ /* 印刷時のデフォルトのテキストカラーを指定 */
 }
 body {
 /*width: 210mm;*/
 }
 .grid-100 {
  #category-dropdowns,
  .article-header,
  #breadcrumb {
  display: none;
  }
  /* 外周セルのボーダーをoutlineで表示 */
  div.grid .border-top {
  border-top: 3px solid #888;
  }
  div.grid .border-right {
  border-right: 3px solid #888;
  }
  div.grid .border-bottom {
  border-bottom: 3px solid #888;
  }
  div.grid .border-left {
  border-left: 3px solid #888;
  }
  /* 印刷時マップタイトル */
  #result-displayWrap {
  display: block;
  }
  .printbutton-container {
  display: none;
  }
 }
   .grid-tag-layer{ display: grid !important; }

  /* 印刷でスクロール領域が切れやすいので保険 */
  .scroll-wrapper{ overflow: visible !important; }
}