/* ヘッダーボックスのスタイル */
.header_box {
    position: fixed;     /* 画面上部に固定 */
    top: 0;  /* デフォルト（ログインしていない時）は最上部 */
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #333; /* 濃いグレー */
    display: flex; /* Flexboxを使って要素を横並びにする */
    align-items: center; /* 垂直方向の中央揃え */
    z-index: 1000; /* 他のコンテンツより手前に表示 */
    box-sizing: border-box; /* パディングとボーダーを高さに含める */
    padding: 0 10px; /* 左右に少しパディング */
    transition: top 0.3s ease-in-out; /* スムーズなアニメーション */
}

/* ロゴのスタイル */
.header_logo {
    height: 30px; /* ヘッダーの高さに合わせて調整 */
    margin-right: 15px; /* ロゴとメニューの間にスペース */
    vertical-align: middle; /* 垂直方向の中央揃え */
}

/* メニューを囲むDIVのスタイル (トップメニュー) */
.header_box_menu {
    margin-left: auto; /* 左側のマージンを自動調整して、可能な限り右に寄せる */
    display: block; /* デフォルトは表示 */
}

/* ナビゲーションリストのスタイル (トップメニュー) */
#nav {
    list-style: none; /* リストのマーカーを削除 */
    margin: 0;
    padding: 0;
    display: flex; /* li要素を横並びにする */
}

/* ナビゲーションアイテムのスタイル (トップメニュー) */
#nav li {
    margin-right: 10px; /* 各メニューアイテム間のスペース */
}

#nav li:last-child {
    margin-right: 0; /* 最後のアイテムには右マージンをつけない */
}

#nav li a {
    display: block; /* aタグをブロック要素にする */
    padding: 5px 12px; /* パディングで楕円の大きさを調整 */
    background-color: #000; /* 黒地 */
    color: #fff; /* 白文字 */
    text-decoration: none; /* 下線を削除 */
    border-radius: 15%; /* 楕円にする（paddingとwidth/heightで調整） */
    font-size: 14px; /* 文字サイズ */
    transition: all 0.3s ease; /* ホバー効果のアニメーション */

    /* 楕円のボーダースタイル */
    border-top: 2px solid #fff; /* 上を白2px */
    border-left: 2px solid #fff; /* 左を白2px */
    border-bottom: 2px solid red; /* 下を赤2px */
    border-right: 2px solid red; /* 右を赤2px */

    /* Flexboxでテキストを中央揃えにするため */
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 60px; /* 最小幅を設定してテキストの長さに対応 */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
}

#nav li a:hover {
    background-color: #555; /* ホバー時の背景色 */
    /* ホバー時のボーダー色の変化など、必要に応じて追加 */
}

@media (min-width: 1000px) {
    /* main要素に対して、余っているスペースをすべて使って広がるよう指示 */
    #main.col-md-9 {
        flex-grow: 1; 
        width: 0; /* これを入れることで、中身の文字量に左右されず計算が始まります */
    }
    
    /* サイドバーの幅を確保したい場合は以下も追加 */
    #sidebar.col-md-3 {
        flex-basis: 300px; /* サイドバーの基本幅を固定（または%で指定） */
        flex-shrink: 0;    /* サイドバーが潰れないようにする */
    }
}

/* ハンバーガーメニューアイコンのスタイル */
.hamburger-menu {
    display: none; /* デフォルトでは非表示 */
    width: 30px;
    height: 24px;
    position: relative;
    cursor: pointer;
    margin-left: auto; /* 右寄せ */
    z-index: 1001; /* メニューより手前に */
}

.hamburger-menu span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #fff;
    border-radius: 3px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.hamburger-menu span:nth-child(1) {
    top: 0px;
}

.hamburger-menu span:nth-child(2),
.hamburger-menu span:nth-child(3) {
    top: 10px;
}

.hamburger-menu span:nth-child(4) {
    top: 20px;
}

/* ハンバーガーメニューが開いた時のアニメーション (Xボタン) */
.hamburger-menu.active span:nth-child(1) {
    top: 10px;
    width: 0%;
    left: 50%;
}

.hamburger-menu.active span:nth-child(2) {
    transform: rotate(45deg);
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg);
}

.hamburger-menu.active span:nth-child(4) {
    top: 10px;
    width: 0%;
    left: 50%;
}

/* サイドメニューのスタイル */
.side-overlay {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
    z-index: 99998; /* ヘッダーの下、サイドメニューの上 */
}

.side-menu {
    position: fixed;
    top: 0;
    left: -300px; /* 初期位置は画面外 */
    width: 300px;
    height: 100%;
    background-color: #1a5e20; /* 濃い緑 */
    z-index: 99999; /* 最前面 */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    transition: left 0.3s ease-in-out; /* スライドアニメーション */
    padding-top: 80px; /* ヘッダーの高さ+α */
    box-sizing: border-box;
    overflow-y: auto; /* メニュー項目が多い場合にスクロール可能に */
}

.side-menu.active {
    left: 0; /* アクティブ時に画面内にスライドイン */
}

/* サイドメニュー内のナビゲーションリストのスタイル */
.side-menu #nav-side { /* サイドメニュー用のIDを使用 */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* 縦に並べる */
}

.side-menu #nav-side li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 区切り線 */
}

.side-menu #nav-side li:last-child {
    border-bottom: none;
}

.side-menu #nav-side li a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
}

.side-menu #nav-side li a:hover,
.side-menu #nav-side .current-menu-item a {
    background-color: #28a745; /* ホバー時と現在ページの背景色 */
}

/* ログインしている場合のヘッダー位置調整 */
body.logged-in .header_box {
    /* デスクトップの管理バーの高さ (通常32px) 分だけ下に移動 */
    top: 32px;
}

/* モバイルデバイスでの管理バーの高さ調整 */
@media screen and (max-width: 782px) {
    body.logged-in .header_box {
        /* モバイルの管理バーの高さ (通常46px) 分だけ下に移動 */
        top: 46px;
    }
    .side-menu {
        /* モバイルでログインしている場合、サイドメニューも管理バーの下から開始 */
        top: 46px;
        height: calc(100% - 46px); /* 管理バーの高さを引く */
    }
}

/* 520px未満のブレークポイント */
@media screen and (max-width: 520px) {
    .header_box_menu {
        display: none; /* トップメニューを非表示 */
    }
    .hamburger-menu {
        display: block; /* ハンバーガーメニューを表示 */
    }
    /* ハンバーガーメニューが開いているときにbodyのスクロールを無効にする */
    body.menu-open {
        overflow: hidden;
    }
}


/*ふわふわした囲み枠*/
.block-group-box {
	margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
	padding: 1em;   /* 内側余白 */
	background-color:#fffafd; /* 背景色 */
	box-shadow: 0 0 6px 1px #faccbc, 0 0 6px 1px #faccbc inset; /*ふわりとした影*/
	border-radius: 30px;
}
.block-group-box h2 {
  margin-block-start: 0.2em; 
  margin-block-end : 0.2em;
  font-weight   : bold;                /* 太字                    */
  border-bottom : 2px solid #66ff66;   /* 下線                    */
  /*text-shadow   : 2px 2px 1px #666;    /* 影を付ける              */
  color         : #00007f;             /* 文字色                  */
  background    : linear-gradient(transparent 50%, #66ff66 65%);  /* ラインマーカーを付ける  */
}
.block-group-box .cyusyaku {
	font-size: 0.8em;
	color: blue;
}

/*==========================================*/
/*  コマンドラインプロンプト                */
/*==========================================*/

/* コマンドラインプロンプトの背景スタイル */
.cmd-block {
	background-color: #2c2c2c; /* ダークグレーの背景 */
	color: #e0e0e0; /* 明るいグレーのテキスト */
	border-radius: 4px; /* 角を丸くする */
	padding-left: 4px; /* 適切な余白 */
	font-family: 'Courier New', Courier, monospace; /* プログラミングに適したフォント */
	line-height: 1.1; /* 行間 */
	overflow-x: scroll; /* 横長のコードに対応 */
}

.cmd-block pre {
    margin: 0; /* preタグのデフォルトの上下マージンを削除 */
    padding: 0; /* preタグのデフォルトのパディングを削除 */
    /* preタグが flex/grid 要素ではないため、displayは通常通りblockのままで良い */
}

/* ユーザーの入力のスタイル */
.cmd-block .user-input {
	/* padding-left: 0.2rem; /* 適切な余白 */
	color: #ffffff; /* 白色の入力テキスト */
}

/* ユーザーの入力のスタイル */
.cmd-block .guide {
    /* 1. グラデーション背景の追加 */
    background-image: linear-gradient(to bottom, #2c2ca0, #8c8cF0); /* 上から下にグラデーション */
    
    /* 2. 背景色を削除（グラデーションが優先される） */
    background-color: transparent; 
    
    padding: 4px 24px;
    line-height: 1.4;
    color: #ffffff;
    
    /* 疑似要素の基準点とするため、position: relative; を追加 */
    position: relative; 
    /* 四角形のシェイプ描画に必要なため、display: block; を追加 */
    display: block; 
}

/* 🚀 新規追加: 左に四角形を描画 (::before 疑似要素を使用) */
.cmd-block .guide::before {
    content: ''; 
    position: absolute;
    left: 8px; /* 左端から少し離して配置 */
    top: 50%; /* 垂直方向の中央を基準に */
    transform: translateY(-50%); /* 垂直方向の中心に移動 */
    
    /* 四角形のサイズと色 */
    width: 10px; 
    height: 10px; 
    border: 1px solid #ffffff; /* 白い枠線 */
    
    /* 既存のテキストと重ならないように、padding-leftも調整が必要 */
}


.cmd-block .user-input::before {
	content: "> "; /* 疑似要素として "> " を挿入 */
	color: #90ee90; /* プロンプトの緑色のシンボル */
	user-select: none; /* シンボルが選択されないようにする */
}

/* 出力結果のスタイル */
.cmd-block .output-result {
	color: #c0c0c0; /* やや薄いグレーの出力テキスト */
}


/*使用例 
<div class="cmd-block"><pre>
    <div class="guide">
     GitHubリポジトリをリモートオリジンとして追加
    </div> 
    <span class="prompt-symbol">&gt;</span> 
    <span class="user-input">
     php artisan migrate:fresh
    </span>
    <span class="output-result">
      file2.txt
    </span>
</pre></div>
*/

/*==========================================*/
/*  コード表示                              */
/*==========================================*/
.code-block {
	background-color: #f5f5f5; /* 淡いグレーの背景 */
	border: 1px solid #ddd; /* 薄いグレーの枠線 */
	border-left: 5px solid #007bff; /* 左側に青いラインを追加して強調 */
	border-radius: 4px; /* 角を丸くする */
	padding: 0px; /* 内側の余白 */
	font-family: Consolas, "Courier New", Courier, monospace; /* 等幅フォント */
	font-size: 14px; /* フォントサイズ */
	overflow-x: auto; /* 横スクロールを可能にする */
	line-height: 1.2; /* 行間 */
   /* white-space: pre-wrap;行の折り返し */
}

.code-block pre {
	margin: 0; /* preタグのデフォルトの余白をリセット */
	padding: 0;
}
.code-block code {
	margin: 0; /* preタグのデフォルトの余白をリセット */
	padding: 0;
}
.code-tag {
	color: blue;
}
.comment-line {
	color: #608060;
}
/* コマンド説明のスタイル */
.comment-line .explanation {
	margin-top:4px;
	color: #408040;
	font-size: 1.1rem;
    text-decoration: underline;
    text-decoration-color: #a0a0a0;     /* 線の色 */
    text-decoration-thickness: 2px;  /* 線の太さ */	
}

.guide　.prompt {
  color: #006400;      /* 濃い緑（DarkGreen） */
  font-weight: bold;    /* 太字 */
}

.info-head {
	color: white;
	background-color: blue;
}
.error-head {
	color: white;
	background-color: red;
}

/*使用例 
<div class="code-block">
<div class="info-head">.git/config　の内容</div>
<pre><code>[core]
	fetch = +refs/heads/*:refs/remotes/origin/*
</code></pre>
</div>
*/

/* 箇条書きのメモ枠 */
.box-itemize {
  margin: 20px auto;
  padding: 10px;
  border: 2px solid #4c9ac0;
  background-color: #F3F7F5;
  box-shadow: 0 0 0 6px #F3F7F5;
  position: relative;
}
.box-itemize p {
  font-size: 1.2rem;
  background-image: linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #4c9ac0 100%);
  background-size: 8px 100%, 100% 2.5em;
  line-height: 2.5;
  margin: 0;
}
.box-itemize guide {
	font-size: 1.0rem;
	color: blue;
}
/*使用例 
<div class="box-itemize">
  <p>ここに文字を入力 </p><guide>解説解説解説</guide>
  <p>ここに文字を入力 </p><guide>解説解説解説</guide>
  <p>ここに文字を入力 </p><guide>解説解説解説</guide>
</div>
*/

/*==========================================*/
/*  白黒色分けテーブル　　                  */
/*==========================================*/
/* TABLE本体 */
.mono_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden; /* 角丸を適用するため */
}
.mono_table th, td {
    border: 1px solid #e0e0e0;
    padding: 15px;
    text-align: left;
    vertical-align: top;
}
.mono_table th {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    font-size: 1.1em;
}
.mono_table tr:nth-child(even) {
    background-color: #f8f9fa;
}

 /*文字表示*/
 .wp-block-media-text__content {
     font-size: 1.3em; /* 16ピクセル */
     font-family: "Noto Sans JP", sans-serif;
 }
 
 /* 580px以上のスクリーン幅の場合の左右マージン */
 @media (min-width: 580px) {
     .paper-frame-container {
         margin-left: 10px;
         margin-right: 10px;
     }
 }
 
 /* コンテンツ部分のスタイル（必要に応じて調整） */
 .custom-included-content {
     /*background-color: #ffffff; /* コンテンツ自体の背景を白に */
     padding: 15px;
     border-radius: 2px;
     box-shadow: inset 0 0 5px rgba(0,0,0,0.05); /* わずかな内側のシャドウで深みを出す */
 }
 
 /* タイトル部分のスタイル（任意） */
 .paper-frame-container h2 {
     color: #333333; /* タイトルの色 */
     text-align: center;
     padding-bottom: 10px;
     border-bottom: 1px solid rgba(0,0,0,0.1); /* タイトル下の線 */
     margin-bottom: 15px;
     text-shadow: 0 1px 0 rgba(255,255,255,0.8); /* タイトルに軽い影 */
}