/*****見出し*****/


#pagetitle {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* テキストの影を追加 */
    padding: 6px 12px; /* 上下と左右のパディング */
    display: block; /* ブロック要素にする */
    position: relative; /* 擬似要素用に相対位置を設定 */
    animation: fadeIn 1s ease-in-out; /* フェードインアニメーションを追加 */
    line-height: 1.3; /* h2の行間を広げる */
}

#pagetitle::first-letter {
    background-color: #048F2B; /* 背景色を紫に */
    color: white; /* 文字色を白に */
    font-size: 150%; /* 通常より一回り大きく */
    padding: 4px 6px; /* 背景色を際立たせるためのパディング */
    border-radius: 0; /* 角を丸くしない */
    margin-right: 0.2em; /* テキストとの間にスペースを作る */
}

#pagetitle::after {
    content: ""; /* 擬似要素 */
    display: block; /* ブロック要素にする */
    width: calc(100% + 16px); /* 幅を100%より広げる */
    height: 4px; /* 高さを設定 */
    background-color: #048F2B; /* ボーダーの色 */
    border-radius: 2px; /* 角を丸くする */
    position: absolute; /* 絶対位置を設定 */
    bottom: 3px; /* 見出しの下に近づける */
    left: -8px; /* 左に移動して長くする */
}

#pagetitle::before {
    content: ""; /* 擬似要素 */
    display: block; /* ブロック要素にする */
    width: calc(100% + 16px); /* 幅を100%より広げる */
    height: 2px; /* 高さを設定 */
    background-color: #048F2B; /* ボーダーの色 */
    border-radius: 2px; /* 角を丸くする */
    position: absolute; /* 絶対位置を設定 */
    bottom: -1px; /* 見出しの下に近づける */
    left: -8px; /* 左に移動して長くする */
}



/* 大見出し (h2) のスタイル */

#wikibody h2 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* テキストの影を追加 */
    padding: 6px 12px; /* 上下と左右のパディング */
    display: block; /* ブロック要素にする */
    position: relative; /* 擬似要素用に相対位置を設定 */
    animation: fadeIn 1s ease-in-out; /* フェードインアニメーションを追加 */
    line-height: 1.3; /* h2の行間を広げる */
}

/* アニメーションの定義 */
@keyframes fadeIn {
    from {
        opacity: 0; /* 最初は透明 */
        transform: translateY(-10px); /* 上に移動 */
    }
    to {
        opacity: 1; /* 完全に表示 */
        transform: translateY(0); /* 元の位置に戻す */
    }
}

/* 大見出し (h2) の最初の文字 */
#wikibody h2::first-letter {
    background-color: #048F2B; /* 背景色を紫に */
    color: white; /* 文字色を白に */
    font-size: 150%; /* 通常より一回り大きく */
    padding: 4px 6px; /* 背景色を際立たせるためのパディング */
    border-radius: 0; /* 角を丸くしない */
    margin-right: 0.2em; /* テキストとの間にスペースを作る */
}

/* 大見出しの下にカスタムボーダー */
#wikibody h2::after {
    content: ""; /* 擬似要素 */
    display: block; /* ブロック要素にする */
    width: calc(100% + 16px); /* 幅を100%より広げる */
    height: 4px; /* 高さを設定 */
    background-color: #048F2B; /* ボーダーの色 */
    border-radius: 2px; /* 角を丸くする */
    position: absolute; /* 絶対位置を設定 */
    bottom: 3px; /* 見出しの下に近づける */
    left: -8px; /* 左に移動して長くする */
}





/* 中見出し (h3) のスタイル */
h3 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* テキストの影を追加 */
    padding: 6px 12px; /* 上下と左右のパディング */
    display: block; /* h3をブロック要素にして改行させる */
    position: relative; /* 擬似要素用に相対位置を設定 */
    animation: fadeIn 1s ease-in-out; /* フェードインアニメーションを追加 */
}

/* 中見出しの最初の文字の左に画像を追加 */
h3::before {
    content: ""; /* 擬似要素 */
    display: inline-block; /* インラインブロックにして文字と同じ行に配置 */
    width: 22px; /* 画像の横幅 */
    height: 22px; /* 画像の縦幅 */
    background-image: url('https://img.atwiki.jp/masuo_mad/pub/%E7%84%A1%E9%A1%8C97_20250228173323.png'); /* 画像のURL */
    background-size: contain; /* 画像をサイズに合わせる */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    margin-right: 1px; /* 文字と画像の間にスペースを追加 */
    vertical-align: middle; /* 文字と画像が揃うように調整 */
    position: relative; /* 位置調整のために相対配置 */
    top: -2px; /* 画像を上に移動 */
}

/* 中見出しの下にカスタムボーダー */
h3::after {
    content: ""; /* 擬似要素 */
    display: block; /* ブロック要素にする */
    width: calc(100% + 16px); /* 幅を100%より広げる */
    height: 4px; /* 高さを設定 */
    background-color: #048F2B; /* ボーダーの色 */
    border-radius: 2px; /* 角を丸くする */
    left: -8px; /* 左に移動して長くする */
    position: absolute; /* 絶対位置を設定 */
    bottom: 2px; /* 1つ目のボーダーの下に少し空ける */
}

/* 小見出し (h4) のスタイル */
h4 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* テキストの影を追加 */
    padding: 6px 12px; /* 上下と左右のパディング */
    display: block; /* ブロック要素にする */
    position: relative; /* 擬似要素用に相対位置を設定 */
    z-index: 1; /* 文字は背景より前面に表示 */
    animation: fadeIn 1s ease-in-out; /* フェードインアニメーションを追加 */
}

/* 小見出しの下にカスタムボックス */
h4::before {
   content: ""; /* 擬似要素を使うため */
   position: absolute;
   top: 0;
   left: 0;
   width: calc(100% - 10px); ; 
   height: 100%;
   background: #CBF9CE; /* 背景は紫色 */
   z-index: -1; /* 文字の下に背景が来るように */
   border-left: 5px solid #048F2B; /* 左端に赤色のボーダーを設定 */
   opacity: 1; /* 背景は完全に表示 */
}



/*****メニューとコンテナとフッター*****/



#menubar {
    width: 240px; /* menubarの幅 */
    color: #FFF;
    font-size: 15px;
    line-height: 1.3em;
    background-size: 260px 100px; /* 背景の幅と高さ */
    background-image: url(https://img.atwiki.jp/masuo_mad/pub/%E7%84%A1%E9%A1%8C104_20250302141845.png);
    background-position: top; /* 画像をトップに固定 */
    background-repeat: no-repeat;
    padding-top: 100px; /* 中身を下に100pxずらす */
}

#menubar2 {
    width: 120px; /* menubar2の幅 */ 
    font-size:12px;
    line-height:1.2em;
}

#contents {
    border-left: 3px solid #048F2B;
    border-right: 3px solid #048F2B;
    width: calc(100% - 436px); /* #containerの横幅から360px引いたサイズ */
    min-width: 0; /* 最低幅の制限を解除 */
}

/* サイドバー左のリンクの変更 */
#menubar a {
  font-size: 15px; /* リンクのサイズ */
  color: #00c51c;
}

#menubar a:visited{
	color: #00c51c;
}

#menubar a:hover{
	color: #535C06;
}

#menubar a:acive{
	color:#535C06;
}


/* サイドバー右のリンクの変更 */
#menubar2 a {
  font-size: 12px; /* リンクのサイズ */
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 1), 0 0 2px rgba(0, 0, 0, 1);
  font-weight: 900; /* 最大の太さ */
}

#menubar2 a:visited{
	color: #D6CC7B;
}

#menubar2 a:hover{
	color: #D6CC7B;
}

#menubar2 a:acive{
	color:#D6CC7B;
}

/* 外部リンクにのみ下線を適用 */
#menubar a[href^="http"], 
#menubar a[href^="//"], 
#menubar2 a[href^="http"], 
#menubar2 a[href^="//"] {
    text-decoration: underline;
}

/* 内部リンク（w.atwiki.jp/masuo_madを含むもの）は除外 */
#menubar a[href*="w.atwiki.jp/masuo_mad"], 
#menubar2 a[href*="w.atwiki.jp/masuo_mad"] {
    text-decoration: none;
}

/* サイドバー右の見出しの変更 */
#menubar h2 {
    font-size: 17px;
    text-align: center;
    padding: 6px 0px; /* 上下と左右のパディング */
    display: block; /* ブロック要素にする */
    position: relative; /* 擬似要素用に相対位置を設定 */
    z-index: 1; /* 文字は背景より前面に表示 */
    animation: fadeIn 1s ease-in-out; /* フェードインアニメーションを追加 */
}

/* 見出しの下にカスタムボックス */
#menubar h2::before {
   content: ""; /* 擬似要素を使うため */
   position: absolute;
   top: -3px;
   left: -6px;
   width: calc(100% + 12px);
   height: 100%;
   background: #00c51c; /* 背景は緑色 */
   z-index: -1; /* 文字の下に背景が来るように */
   opacity: 1; /* 背景は完全に表示 */
   border-top: 3px solid white; /* 上のボーダーを白に */
   border-bottom: 3px solid white; /* 下のボーダーを白に */
}


#footer {
    border-top: 3px solid #048F2B;
}


/*****ヘッダー*****/




/* header部分に背景画像を設定 */
#header {
    background-size: 1200px 82px; /* 幅高さ指定 */
    background-position: top left;
    background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
    position: relative; /* 位置を基準にする */ 
    border-bottom: 3px solid #048F2B;
    height: 80px; /* 高さを固定 (謎に2ミリ差がでちゃう)*/
    width: 1200px; /* 幅を固定 */
    z-index: 1 !important; /* 画像を背景より前に */
}

#header.box {
    background-color: #00F511;  /* #header.boxの背景色を緑に */
    width: 100%;  /* #containerと同じ幅にする */
}

a[href="/masuo_mad/"] img[title="ゲイマスオ Wiki"] {
    width: 240px; /* 画像の幅 */
    height: 52px; /* 画像の高さ */
    object-fit: contain; /* アスペクト比を保つ */
    margin-top: -80px; /* 上に10px移動 */
    margin-left: -15px; /* 左に10px移動 */
}



/*****大文字サイズ調整*****/



span {
  line-height: 1.2;        /* 行間を文字サイズの1.2倍に設定 */
}



/*****スクロール板生成プラグイン*****/

.plugin_include_box {
  display: block;  
  width: 95%;  
  max-width: 100%;  
  height: 100px;  
  overflow: auto;  
  border: 2px solid #048F2B;  
  padding: 10px;  
  background: linear-gradient(to bottom right, #ECE3FF, #F6CBF9);  
  margin: 0 auto;  
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);  
}





/*****トップボタン色変更*****/



/*プリズム三姉妹*/

.atwiki-login-button {
  color: #FF0000 !important;
}

.atwiki-settings-button {
  color: #FF0000 !important;
}

.atwiki-link-pagelist {
  background: linear-gradient(30deg, #D0909E 57%, #FF0000 43%) !important; /* 黒からピンクへのグラデーション */
  -webkit-background-clip: text !important; /* テキストにのみグラデーションを適用 */
  -webkit-text-fill-color: transparent !important;  /* テキストの色を透明にしてグラデーションを見せる */
}

.atwiki-edit-button {
  color: #D0909E !important;
}

.atwiki-new-button {
  background: linear-gradient(30deg, #000000 57%, #D0909E 43%) !important; /* 黒からピンクへのグラデーション */
  -webkit-background-clip: text !important; /* テキストにのみグラデーションを適用 */
  -webkit-text-fill-color: transparent !important;  /* テキストの色を透明にしてグラデーションを見せる */
}

.atwiki-guide-button {
  color: #000000 !important;
}



/*****テーブルの見た目*****/



table:not(.atwiki_plugin_region) {
    border-collapse: collapse; /* 枠線を一体化 */
    border: 2px solid #00530B; /* 表全体の外枠を紫に */
    box-shadow: 0 0 0 2px white, 0 0 3px 3px rgba(0, 0, 0, 0.5);/* 外枠の周りに白い縁どりと影 */
}

table:not(.atwiki_plugin_region) th, 
table:not(.atwiki_plugin_region) td {
    border: 2px solid #00530B; /* 中のセルの枠線を紫に */
    box-shadow: inset 0 0 0 1px #00530B; /* 各セルに縁どり */
    background-color: #f9f9f9;
}


/*****リンク見た目変更*****/



a {
  color: #048F2B;
}

a:hover {
  color: #535C06;
}

a:visited {
  color: #535C06;
}

a:acive{
  color: #535C06;
}

/* 外部リンクにのみ下線を適用 */
a[href^="http"], a[href^="//"] {
    text-decoration: underline;
}

/* 内部リンク（w.atwiki.jp/masuo_madを含むもの）は除外 */
a[href*="w.atwiki.jp/masuo_mad"] {
    text-decoration: none;
}

/*****背景色*****/


#wrapper {
  background-color: #2C2C2C; /* 元の背景色 */
  position: relative; /* 擬似要素のために必要 */
  z-index: 0;
}

#wrapper::before {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0; /* 右端に配置 */
  width: 140px; /* 幅120px */
  height: 100%;
  background: linear-gradient(88deg, #D6FF20, #03C193);
  z-index: -1; /* #menubar2 の下に配置 */
}


/* 背景部分のスタイル */
#contents {
  background-color: #F4FFF5; /*背景の背景色 */
}




/* commentのスタイル */


.plugin_pcomment_form > ul > li {
    background: #EEEEEE;
    border-top: none;
    border-radius: 10px; /* 角を丸くする */
    padding: 10px 10px 10px 10px; /* 左と下の余白を広げる */
}

.plugin_pcomment_reply_count {
    display: none;
}


.plugin_pcomment_form ul li{
    color: #334448;
}
.plugin_pcomment_form ul li li{
    color: #00357C;
}
.plugin_pcomment_form ul li li li{
    color: #334448;
}
.plugin_pcomment_form ul li li li li{
    color: #00357C;
}
.plugin_pcomment_form ul li li li li li{
    color: #334448;
}
.plugin_pcomment_form ul li li li li li li{
    color: #00357C;
}
.plugin_pcomment_form ul li li li li li li li{
    color: #334448;
}
.plugin_pcomment_form ul li li li li li li li li{
    color: #00357C;
}
.plugin_pcomment_form ul li li li li li li li li li{
    color: #334448;
}
.plugin_pcomment_form ul li li li li li li li li li li{
    color: #00357C;
}
.plugin_pcomment_form ul li li li li li li li li li li li{
    color: #334448;
}
.plugin_pcomment_form ul li li li li li li li li li li li li{
    color: #00357C;
}
.plugin_pcomment_form ul li li li li li li li li li li li li li{
    color: #334448;
}
.plugin_pcomment_form ul li li li li li li li li li li li li li li{
    color: #00357C;
}
.plugin_pcomment_form ul li li li li li li li li li li li li li li li{
    color: #334448;
}
.plugin_pcomment_form ul li li li li li li li li li li li li li li li li{
    color: #00357C;
}
.plugin_pcomment_form ul li li li li li li li li li li li li li li li li li{
    color: #334448;
}
.plugin_pcomment_form ul li li li li li li li li li li li li li li li li li li{
    color: #00357C;
}
.plugin_pcomment_form ul li li li li li li li li li li li li li li li li li li li{
    color: #334448;
}
.plugin_pcomment_form ul li li li li li li li li li li li li li li li li li li li li{
    color: #00357C;
}