@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: 11px;
  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;
  }

  /* マップ全体を50%縮小（Chrome/Edgeで効きやすい） */
  body.grid-100 .scroll-wrapper {
    zoom: 0.5;
    margin: 0 auto;
    /* 可能なら中央寄せ */
  }

  /* 縮小すると文字も小さくなるので、印刷時だけ元の見え方に近づける */
  body.grid-100 .grid-tag {
    /*font-size: 22px;*/
    /* 0.5倍されて約11px相当 */
  }

  /* ページ途中で分割されにくくする保険 */
  body.grid-100 .grid-container {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}