@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300&display=swap');

/* 対象の要素にフォントスタイルを適用 */
.title,
.editor,
.stream,
li.page-list-item {
  font-family: 'Kiwi Maru', sans-serif !important;
}
@media (prefers-color-scheme: dark) {
  body {
    /* 全体設定 */
    --body-bg: #111827; /* 背景色 */
    --cursor-color: #d3d3d3; /* カーソル色 */

    /* トップの設定 */
    --card-bg: #1f2937; /* カードの背景色 */
    --card-title-color: #d3d3d3; /* カードタイトルの色 */

    /* ページの設定 */
    --page-bg: #2a3442; /* ページ背景色 */
    --page-link-color: #77befb; /* リンク色 */
    --page-link-hover-color: #a8d7ff; /* リンクホバー色 */
    --page-link-color-cursor-line: #ec61ef; /* カーソルラインのリンク色 */
    --page-text-color: #d3d3d3; /* テキスト色 */
    --line-title-color: #d3d3d3; /* ラインタイトル色 */
    --telomere-border: #374151; /* テロメア境界色 */
    --telomere-updated: #a9450f; /* テロメア更新色 */
    --telomere-unread: #a9450f; /* テロメア未読色 */
    --line-permalink-color: #ed6b244d; /* ライン永久リンク色 */
  }
}
.search-form .form-group input {
  border: 1px solid;
  border-radius: 24px;
  padding: 0 15px;
}
.btn-search {
    margin-left: auto; /* 検索窓の右側に位置させるため */
    transform: translateX(-10px); /* これで微調整を行う */
}
.navbar .navbar-menu > li.stream-btn {
  display: block !important;
}

.navbar .navbar-menu > li.stream-btn > a {
  color: var(--navbar-icon-color, #F2F0E5);
}
/* 背景 */
.new-button {
  background-color: #7b990e;
}

/* ホバー 背景 */
.new-button:hover {
  background-color: #66800B !important;
}

/* 十字 縦線 */
.new-button .vertical-line {
  background-color: #F2F0E5;
}

/* 十字 横線 */
.new-button .horizontal-line {
  background-color: #F2F0E5;
}
.navbar {
  /* ナビゲーションバーの背景にグラデーションを適用 */
  background: linear-gradient(
    -135deg, 
    rgba(151, 217, 225, 0.6), /* グラデーションの開始色 */
    rgba(44, 48, 117, 0.6)   /* グラデーションの終了色 */
  );
}
.quick-launch .project-home {
  /* クイックランチのプロジェクトホームアイコンの角を丸くしない */
  border-radius: 0;
}

a.project-home {
  /* プロジェクトホームリンクの下線のスタイルを設定 */
  border-bottom: solid 0.2rem #D83F31;
}

.grid li.page-list-item a {
  /* ページリストアイテムのリンクに角丸と境界線を設定 */
  border-radius: 0.5rem; /* リンクの角を丸くする */
  border: solid #555 0.1rem; /* リンクの境界線を設定 */
}
.navbar .row .project-home::after {
	display: block;
	flex-shrink: 0;
	height: 26px;
	aspect-ratio: 4 / 3;
	margin-left: 4px;
	content: "";
	background-image: url("https://daiiz-apps.appspot.com/today/jp.svg");
	background-repeat: no-repeat;
	background-size: contain;
}
:root {
  /* カードの高さを変数として宣言 */
  --grid-height: 84px;
}

.page-list .grid li {
  /* カードの高さおよび幅を設定 */
  height: var(--grid-height); /* 関連リンクのラベルも含めて高さ変更 */
  width: 100%;
}

.grid li.page-list-item a .header {
  z-index: 10;
  /* テキストシャドウが必要な場合に以下を有効にする */
  /* text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff; */
}

.grid li.page-list-item a .title {
  /* タイトルのフォントサイズと行間を設定 */
  font-size: 12px;
  line-height: 16px;
  -webkit-line-clamp: 5; /* 行数を制限する */
  max-height: 80px; /* line-height * 5行で高さを調整 */
}

.grid li.page-list-item a .icon {
  /* アイコンの位置とサイズを設定 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--grid-height); /* 高さをカード全体の高さに合わせる */
  background-color: transparent;
  z-index: 0;
  opacity: 0.2; /* 意図した透明度に */
}

.grid li.page-list-item a .icon img {
  /* 画像の位置とスタイルを設定 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; 
  height: 100%;
  object-fit: cover; /* サイズの調整 */
}
/* ピン留めされたページリストアイテムの次にある非ピン留めアイテムを最初のグリッドカラムに配置 */
.page-list-item.pin + .page-list-item:not(.pin) {
  grid-column-start: 1;
}
/* ピン留めされた要素の既存スタイルを無効化して背景をなしにする */
div .pin {
  background: none !important; /* 既存の背景スタイルを無効化 */
}
/* 関連ページの上部ボーダーを無効化 */
.grid li.page-list-item.unread .content .header {
  border-color: transparent;
}

/* ホームにピンしたページの上部にボーダーを設定 */
.grid li.page-list-item a .pin + .content .header {
  border-top-color: #EE9322;
  border-top-width: 7px;
}
/* 特定のタイトルを持つページを非表示にする */
li.page-list-item.grid-style-item[data-page-title="favicon"],
li.page-list-item.grid-style-item[data-page-title="settings"] {
  display: none;
}
/* 1. Cosenseアイコンをハンバーガーボタンに置き換え */
.brand-icon {
  display: none !important;
}

.navbar-brand::before {
  /* バーガーアイコンを設定 */
  /* content: '\f0c9'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 28px; */
  /* content: 'S'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 28px; color: #bbbbbb; */
  content: '☰'; /* 代替として三本線のシンボルを使用 */
  font-weight: 900;
  font-size: 28px;
  color: #bbbbbb;
}

/* 3-a. ヘッダー内のプロジェクトのページへのリンク */
.col-brand .project-home {
  color: #dddddd; /* リンクの色 */
  margin: 16px 0 0 28px;
  font-size: 18px;
  display: inline-block;
  max-width: calc(100% - 80px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-brand .project-home:hover,
.col-brand .project-home:focus,
.col-brand .project-home:active {
  text-decoration: none;
  opacity: 0.6;
}

.col-brand .project-home .icon {
  margin-right: 10px;
  font-size: 0.9em;
}
.navbar-form .dropdown.open .dropdown-menu {
  /* ドロップダウンメニューのスタイルを設定 */
  min-width: 100%; /* 幅を親要素に合わせる */
  max-height: calc(100vh - 130px) !important; /* ビューポートからの高さを制限 */
  overflow-y: auto; /* 縦方向にスクロール可能にする */
}
/* 翻訳メニューを非表示にする */
#translation-menu {
  display: none;
}

/* トップページの翻訳メニューボタンを非表示にする */
.page-list-translation-menu .tool-btn {
  display: none;
}
@media (min-width: 768px) {
  /* コンテナーのスタイル設定 */
  .container {
    max-width: none;
    padding-right: 1%;
    padding-left: 1%;
    transform-origin: top right; /* 回転の基点は維持 */
  }
  
  /* ページ列のスタイル設定 */
  .col-page {
    max-width: none !important; /* 最大幅を解除 */
    width: auto; /* 幅を自動調整 */
    padding-top: 0;
    padding-right: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    position: absolute;
    left: 0; /* 必要に応じて左に揃える */
    right: 0; /* 必要に応じて右に広げる */
    transform-origin: top center; /* 回転の基点を中央上部に変更 */
  }

  /* ページメニューのスタイル設定 */
  .page-menu {
    position: fixed !important;
    top: 10%;
    right: 3px;
    z-index: 100;
    transform-origin: top right;
  }
}
/* ページ最大幅を制限なしに */
.col-page {
  max-width: none;
}

/* infoboxが存在する場合に、関連ページリストのスタイルを無効にする */
body .infobox + .related-page-list,
body .related-page-list.has-literate-database {
  display: none !important;
}

/* メディアクエリ: スクリーン幅が768px未満のスタイル */
@media (max-width: 767px) {
  .related-page-list {
    flex-basis: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .related-page-list .grid li {
    width: 100% !important;
    height: 84px !important; /* 高さを84pxに設定 */
    overflow: hidden;
  }

  .related-page-list .page-list-item {
    height: 84px !important; /* page-list-itemも84pxに設定 */
    overflow: hidden;
  }

  /* アイコンの非表示 */
  .kamon.kamon-link-on.icon-lg {
    display: none !important;
  }
}

/* メディアクエリ: スクリーン幅が768px以上のスタイル */
@media (min-width: 768px) {
  .related-page-list {
    flex-basis: 140px !important;
  }
  
  .related-page-list-search input {
    width: 120px !important;
  }
  
  .page-wrapper {
    display: flex;
    justify-content: space-around; /* 均等にスペースを配置 */
  }
  
  .drag-and-drop-enter {
    order: 1;
    margin-right: 20px;
    flex-basis: 100% !important;
    min-width: 0;
  }
  
  .related-page-list {
    order: 2;
    flex-shrink: 0;
    margin-top: 0;
    background-color: var(--related-page-list-bg);
  }
  
  .related-page-sort-menu {
    display: none; /* ソートメニューを非表示に */
  }
  
  .links-container {
    gap: 10px !important; /* リンク間の間隔を設定 */
  }

  .related-page-list .grid {
    gap: 0 !important; /* グリッド間の間隔を設定 */
  }

  .related-page-list .grid li {
    margin-bottom: 5px !important;
    margin-right: 0 !important;
    width: 140px;
    height: 50px !important;
  }

  .related-page-list .grid .splitter {
    height: 15px !important;
  }

  .related-page-list .relation-label .arrow {
    display: none !important; /* ラベルの矢印を非表示に */
  }

  .related-page-list .relation-label a {
    padding: 4px !important;
    /* ラベルのボーダーが必要であれば以下を有効化 */
    /* border-bottom: 2px solid var(--relation-label-bg); */
  }

  .related-page-list .relation-label .title {
    font-size: 12px;
  }

  .related-page-list .relation-label .icon-lg {
    display: none !important; /* 大きいアイコンを非表示に */
  }

  .related-page-list .content {
    height: 100% !important;
  }

  .related-page-list .page-list-item .header {
    border-top-width: 5px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    z-index: 1;
    /* 背景色を設定する場合は以下を有効化 */
    /* background-color: var(--translucent-card-bg) */
  }

  .related-page-list .page-list-item .header .title {
    font-size: 12px !important;
    filter: drop-shadow(0 0 6px var(--card-bg, #fff)) 
            drop-shadow(0 0 8px var(--card-bg, #fff))
            drop-shadow(0 0 10px var(--card-bg, #fff))
            drop-shadow(0 0 14px var(--card-bg, #fff));
  }

  .related-page-list .page-list-item .description {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.4 !important;
    z-index: 1;
  }

  .related-page-list .page-list-item .description .line {
    font-size: 11px !important;
  }

  .related-page-list .page-list-item .description .line .inline-icon {
    font-size: 9px !important;
  }

  .related-page-list .page-list-item .icon {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 1;
    padding: 5px !important;
  }

  .related-page-list .page-list-item .icon img {
    width: 100% !important;
    height: 150% !important;
    margin-right: 0 !important;
    object-fit: contain;
  }
  
  .related-page-list .ellipsis {
    height: 30px !important;
  }

  .related-page-list .ellipsis a {
    padding: 2px !important;
  }

  .related-page-list .ellipsis .circle {
    width: 30px !important;
    height: 30px !important;
  }

  .related-page-list-search {
    display: flex;
    width: 100%;
    align-items: baseline;
  }
}

/* メディアクエリ: スクリーン幅が1240px以上のスタイル */
@media (min-width: 1240px) {
  .related-page-list {
    flex-basis: 295px !important;
  }
  
  .toolbar {
    width: 288px !important;
  }
}
/* プレゼンテーションモードではない場合のセクションタイトル行のスタイル設定 */
.app:not(.presentation) .line.section-title:not(.line-title) {
  position: relative; /* 子要素が絶対座標を使用するための基準として利用 */
}

.app:not(.presentation) .line.section-title:not(.line-title) .text {
  padding-top: 1em; /* テキストの上部に余白を追加 */
}

.app:not(.presentation) .line.section-title:not(.line-title)::before {
  content: ""; /* 擬似要素で装飾を追加 */
  display: block;
  width: 100%;
  position: absolute;
  left: 0; /* 左端に配置 */
  border-top: 1px solid lightgray; /* 上部に薄い灰色のボーダーを追加 */
}
.line .indent-mark .dot {
  background-color: transparent;
}
.line .indent-mark .dot::before {
  display: block;
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 6px;
  content: '\f068'; 
  color: #c9c9c9;
}
.line.formula-line .dot {
  display: block;
}
/* インデントマーク全体のスタイル設定 */
.indent-mark {
  height: 100% !important; /* マークの高さを親要素に合わせる */
}

/* インデントマークのパディング部分のスタイル設定 */
.indent-mark .pad {
  height: 100% !important; /* パディング部分の高さを親要素に合わせる */
  overflow: unset !important; /* オーバーフローを固定解除 */
}

/* 各インデントレベルごとに異なる背景色を設定 */
.indent-mark span:nth-child(4n+1) .pad {
  background: rgba(32, 94, 166, 0.3) !important; /* ブルー系の背景色 */
  opacity: 0.5; /* 半透明に設定 */
}

.indent-mark span:nth-child(4n+2) .pad {
  background: rgba(175, 48, 41, 0.3); /* レッド系の背景色 */
  opacity: 0.5; /* 半透明に設定 */
}

.indent-mark span:nth-child(4n+3) .pad {
  background: rgba(173, 131, 1, 0.3); /* イエローオレンジ系の背景色 */
  opacity: 0.5; /* 半透明に設定 */
}

.indent-mark span:nth-child(4n+4) .pad {
  background: rgba(102, 128, 11, 0.3); /* グリーン系の背景色 */
  opacity: 0.5; /* 半透明に設定 */
}
.table-block .cell {
  outline: 1px solid rgba(136, 136, 136, 0.5); /* 不透明度を 0.5 に設定 */
}
@media (max-width: 767px) { /* スマホだけ適用 */
    .page {
        overflow-x: auto; /* はみ出ている時スクロールバーをつける */
        overflow-y: hidden; /* これがないとたまに謎の縦のスクロールバーが出現する */
    }
}
/* 特定条件を満たすリンクにFontAwesomeアイコンを追加 */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
  font-family: 'Font Awesome 5 Free'; /* FontAwesomeを使用 */
  content: ' \f35d'; /* リンクの末尾に表示するアイコン */
  font-weight: bold; /* アイコンを太字に */
  display: inline-block; /* アイコンをインラインブロック要素に */
  font-size: 0.5em; /* アイコンのフォントサイズ */
  padding-right: 2px; /* アイコンの右に余白を追加 */
}
/* 元のスタイル設定 */
.video-player iframe,
.video-player video,
.iframe-video-player iframe,
main.page div.gyazo.oembed.landscape > iframe {
  width: 99%;
  max-width: 640px; /* 最大幅を640pxに制限 */
  max-height: 360px; /* 最大高さを360pxに制限 */
  aspect-ratio: 16 / 9; /* アスペクト比を16:9に設定 */
  background-color: black; /* 余白の色を黒に設定 */
}

/* ホバー時のピクチャーインピクチャーボタンの位置調整 */
.video-player:hover .control,
.iframe-video-player:hover .control {
  right: unset;
  left: min(99% - 24px, 616px); /* 計算式を使用してボタン位置を調整 */
}
.line img.image {
  background-color: rgb(211, 211, 211);
  filter: drop-shadow(0 0 0 rgb(211, 211, 211));
}
/* セクションタイトルまたはコードブロック開始時にカウンターをリセット */
.section-title, .code-block-start {
  counter-reset: codeline;
}

/* コードブロックのインデントされたコード行に行番号を追加 */
.code-block span.indent code.code-body {
  counter-increment: codeline; /* 行番号をインクリメント */
  margin-left: -1.5em; /* 左マージンの調整 */
  padding-left: 2.3em; /* 左パディングの追加 */
}

/* コード行番号のスタイル設定 */
.code-block span.indent code.code-body:before {
  content: counter(codeline); /* 行番号を表示 */
  position: absolute; /* 絶対位置に配置 */
  display: inline-block; /* インラインブロック表示 */
  z-index: 10;
  margin-left: -2.4em; /* 行番号の左マージン調整 */
  width: 2em; /* 行番号の幅 */
  padding-right: 0.2em; /* 右パディングの追加 */
  text-align: right; /* 右揃えで表示 */
  vertical-align: bottom; /* 垂直位置を下に */
  border-right: solid 1px #fff; /* 右ボーダー */
  color: var(--code-number-color); /* 行番号の色 */
  opacity: 0.5; /* 行番号の半透明設定 */
}

/* カーソルがある行の行番号のスタイルを強調 */
.cursor-line .code-block span.indent code.code-body:before {
  opacity: 1; /* 不透明に設定 */
  font-weight: bolder; /* 太字で強調 */
  background-color: var(--accent-color); /* 背景色で強調 */
}
.line a.big-page-link {
    font-weight: initial !important;
}
 .deco-\! {
   color: #fff; /* 白文字 */
   background-color: #666666; /* 灰背景 */
   padding: 0.1em 0.2em 0.1em 0.2em;
 }
 .deco-\. {
   color: #fff; /* 白文字 */
   background-color: #D83F31; /* 赤背景 */
   padding: 0.1em 0.2em 0.1em 0.2em;
 }
 .deco-\" {
   color: #fff; /* 白文字 */
   background-color: #EE9322; /* 黄背景 */
   padding: 0.1em 0.2em 0.1em 0.2em;
 }
 .deco-\& {
   color: #fff; /* 白文字 */
   background-color: #219C90; /* 緑背景 */
   padding: 0.1em 0.2em 0.1em 0.2em;
 }
/* チェックボックスになるタグ v2 Font Awesome版 */
.line:not(.cursor-line) a[href$='/o']:not(.icon) span,
.line:not(.cursor-line) a[href$='/v']:not(.icon) span {
  display: inline-block; width: 0; text-indent: -9999px }
.line:not(.cursor-line) a[href$='/o']:not(.icon)::after,
.line:not(.cursor-line) a[href$='/v']:not(.icon)::after {
  display: inline-block; min-width: 1.15em; padding-left: 1px;
  font-family: 'Font Awesome 5 Free'; font-weight: 400;
  font-size: 120%; text-align: center; vertical-align: middle }
.line:not(.cursor-line) a[href$='/o']:not(.icon)::after { content: '\f0c8'; color: #08BDBD }
.line:not(.cursor-line) a[href$='/v']:not(.icon)::after { content: '\f14a'; color: #2489C5 }
/* タグアイコンの共通スタイル (1) */
.line:not(.cursor-line) a[href$='/!']:not(.icon) span,
.line:not(.cursor-line) a[href$='/%3F']:not(.icon) span,
.line:not(.cursor-line) a[href$='/*']:not(.icon) span,
/*.line:not(.cursor-line) a[href$='/_']:not(.icon) span,*/
/*.line:not(.cursor-line) a[href$='/x']:not(.icon) span,*/
.line:not(.cursor-line) a[href$='/%3E']:not(.icon) span,
.line:not(.cursor-line) a[href$='/%3C']:not(.icon) span,
.line:not(.cursor-line) a[href$='/-']:not(.icon) span,
.line:not(.cursor-line) a[href$='/e']:not(.icon) span {
  display: inline-block; width: 0; text-indent: -9999px }

/* タグアイコンの共通スタイル (2) */
.line:not(.cursor-line) a[href$='/!']:not(.icon)::after,
.line:not(.cursor-line) a[href$='/%3F']:not(.icon)::after,
.line:not(.cursor-line) a[href$='/*']:not(.icon)::after,
/*.line:not(.cursor-line) a[href$='/_']:not(.icon)::after,*/
/*.line:not(.cursor-line) a[href$='/x']:not(.icon)::after,*/
.line:not(.cursor-line) a[href$='/%3E']:not(.icon)::after,
.line:not(.cursor-line) a[href$='/%3C']:not(.icon)::after,
.line:not(.cursor-line) a[href$='/-']:not(.icon)::after,
.line:not(.cursor-line) a[href$='/e']:not(.icon)::after {
  display: inline-block; min-width: 1.15em; padding-left: 1px;
  font: 900 110%/normal 'Font Awesome 5 Free'; text-align: center }

/* ここから各アイコンの設定 */
.line:not(.cursor-line) a[href$='/!']:not(.icon)::after { content: '\f06a'; color: #F6AE2D }
.line:not(.cursor-line) a[href$='/%3F']:not(.icon)::after { content: '\f059'; color: #758E4F }
.line:not(.cursor-line) a[href$='/*']:not(.icon)::after { content: '\f069'; color: #F26419 }
/*.line:not(.cursor-line) a[href$='/_']:not(.icon)::after { content: '\f0c8'; color: #08BDBD; font-weight: 400 }*/
/*.line:not(.cursor-line) a[href$='/x']:not(.icon)::after { content: '\f14a'; color: #2489C5; font-weight: 400 }*/
.line:not(.cursor-line) a[href$='/%3E']:not(.icon)::after { content: '\f14d'; color: lightgrey; font-weight: 400 }
.line:not(.cursor-line) a[href$='/%3C']:not(.icon)::after { content: '\f274'; color: lightgrey; font-weight: 400 }
.line:not(.cursor-line) a[href$='/-']:not(.icon)::after { content: '\f146'; color: lightgrey; font-weight: 400 }
.line:not(.cursor-line) a[href$='/e']:not(.icon)::after { content: '\f192'; color: #F26419 }
/*.deco-\< {color:transparent;background-color:grey}*/
/*.deco-\<:hover {color:white;opacity:1}*/
.deco-\<:not(:hover) {color:transparent;background-color:#666666}
.deco-\<:not(:hover) a.page-link {color:transparent;}
.deco-\<:not(:hover) a.icon {visibility:hidden;}
.deco-\<:not(:hover) img {filter:contrast(0);}
.line:not(.cursor-line) .deco-\>:not(:hover) { filter: blur(3px); }