@charset "utf-8";
/*ｲｷｽｷﾞｲｲｲｲｲｲｲｲｲｲｲｲｲｲｲｲｲｲｲｲやりますねぇ
ｾﾞｪﾊｧ…ｾﾞｪﾊｧ(ﾎｫﾝ!)…ｱｱｯ!ﾊｧｯ…ﾊｯ　ｲｷｽｷﾞｨ!(ﾎｫﾝ!)
ｩｸｩ…ｱｯﾊｯ(a-ha)、ﾝｱｯｰ!!ｱｧｯｱｯｱｯ…ﾊ、ｯ!!…ｯ…ｯｯ………*/

/*自動スクロールの動きをぬるぬる(意味深)にする*/
html {
    scroll-behavior: smooth;
}
/*太いぜ。(意味深)*/
.futoize-futoji {
	font-family: "Noto Sans JP";
	font-weight: bold;
    font-size: 150%;
}
/*太いぜ。(サイズは据え置き)*/
.futoize {
	font-family: "Noto Sans JP";
	font-weight: bold;
}
/* 画像の設定 */
.img-container {
    display: flex;   /*横並びに*/
    flex-wrap: wrap; /* 画面幅が足りなくなったら折り返す*/
    gap: 20px;
    justify-content: flex-start; /*左寄せ*/
}

/* 画像自体の設定 */
.img-container img {
     max-width: 100%;        /* 親要素より大きくならないようにする */
     height: auto;           /* 比率を保ったままリサイズ */
     display: block;         /* 下に謎の隙間ができるのを防ぐおまじない */
    object-fit: cover;      /* 枠に合わせてトリミングしたい場合はこれを使う */
}
.ai-prompt {
    font-size: 0.85em;
    color: #666; 
    background-color: #f0f0f0; 
    border: 1px solid #ccc; 
    padding: 10px; 
    margin-bottom: 20px; 
    border-radius: 4px;
}

/*====================================================================
                     パンくずリストのデザイン                         
====================================================================*/
.breadcrumb {
    margin: -10px 0 10px 0 !important;
    font-size: 0.9em;
}

.breadcrumb ol {
    padding: 0;
    margin: 0;
    list-style: none; /* 点を消す */
    display: flex;    /* 横並び */
    flex-wrap: wrap;  /* スマホで折り返し */
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

/* 2つ目以降の項目の前に「 > 」をつける */
.breadcrumb li:not(:first-child)::before {
    content: ">";
    margin: 0 8px;
    color: #999;
}

.breadcrumb a {
    color: #0099FF;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

/* 現在のページ（リンクなし）の色 */
.breadcrumb li:last-child span {
    color: #555;
    font-weight: bold;
}

/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/

/*====================================================================
                     ブログリスト全体のデザイン                       
====================================================================*/
.blog-list-section {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}

/* ▼▼▼ カード本体のデザイン ▼▼▼ */
.blog-card {
    background-color: #ffffff; /* 通常時は白 */
    border: 2px solid #1a5bb1;
    border-radius: 8px; /* 角を丸くして枕をでかくした */
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card:hover {
    transform: translateY(-3px); /* ホバーでちょっと浮く */
    background-color: #5275c2;
}

/* リンクをブロック要素にして全体をクリック可能に */
.blog-link {
    display: flex;
    text-decoration: none;
    color: #333; /* 文字色は黒系で */
    align-items: stretch;
    height: 100%;
}

/* ▼▼▼ サムネイルエリア ▼▼▼ */
.blog-thumb {
    width: 150px;       
    min-width: 150px;   /* 縮ませない */
    height: 125px;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden; /* はみ出た画像をカット */
    flex-shrink: 0;       /* テキストが多くても絶対に縮まないという強い意志 */
}
.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の比率を崩さず埋める */
    display: block;
}

/* カテゴリタグ（画像左上に乗せる） */
.category-tag {
    position: absolute;
    top: 10px;
    left: 0;
    background: #0099FF; /* 青色 */
    color: #fff;
    font-size: 0.75em;
    font-weight: bold;
    padding: 4px 12px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
/* ▼▼▼ 記事の中身エリア ▼▼▼ */
.blog-content {
    box-sizing: border-box;
    width: 78%;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* タイトル上、日付下 */
}

.blog-title {
    font-size: 1.2em;
    margin: 0 0 10px 0;
    line-height: 1.5;
    font-weight: bold;
    color: #004488; /* 濃い青で見やすく */
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;

    /* 2行で切る処理 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 日付などのメタ情報 */
.blog-meta {
    font-size: 0.85em;
    color: #888;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.blog-meta .date {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 2px 8px;
    border-radius: 4px;
}
/* ▼▼▼ ページネーション（これがないとページ送りできないゾ） ▼▼▼ */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.page-btn {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #0099FF;
    background-color: #fff;
    color: #0099FF;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.2s;
    font-weight: bold;
}

.page-btn:hover {
    background-color: #0099FF;
    color: #fff;
}

/* 今いるページのボタン */
.page-btn.active {
    background-color: #004488;
    border-color: #004488;
    color: #fff;
    pointer-events: none; /* 押せないようにする */
}
/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
/*====================================================================
                   フォロワー紹介カードのデザイン                     
====================================================================*/
.follower-card {
    display: flex; /* 横並びにする魔法 */
    background-color: #fff;
    border: 3px solid #cceeff; /* 薄い青枠 */
    border-radius: 12px; /* 角丸 */
    padding: 15px;
    margin-bottom: 20px;
    gap: 20px; /* アイコンと中身の隙間 */
    align-items: center; /* 上下中央揃え */
}

/* アイコンエリア */
.card-icon {
    flex-shrink: 0; /* 縮ませない */
    width: 250px;
    height: 250px;
}
.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-left: 0px;
}
/* 右側の情報エリア */
.card-info {
    flex-grow: 1; /* 残りの幅を埋める */
    min-width: 0; /* グラフがはみ出さないようにするおまじない */
}

/* 名前と数値を横並びに */
.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap; /* 狭いと折り返す */
    gap: 10px;
}

/* ▼▼▼ フォロワー数値バッジ ▼▼▼ */
.counter-badge {
    background-color:#eef9ff; 
    color: #000000;
    padding: 5px 15px;
    border-radius: 4px;
    border: 2px solid #3dace4;
    font-family: 'Roboto', sans-serif; /* カッコいいフォント */
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 30px;
}
.counter-badge .label {
    font-size: 0.9em;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.counter-badge .follower-counter {
    font-size: 1.3em;
    font-weight: bold;
}

/* グラフエリア */
.chart-wrapper {
    position: relative;
    height: 150px; /* 高さを固定 */
    width: 100%;
}
/* データがない時はアイコンに合わせて枠を縮める */
.follower-card.compact-card {
    display: inline-flex; /* 中身に合わせて縮む魔法 */
    width: auto;          /* 幅の固定を解除 */
    padding-right: 15px;  /* 右側に少し余白を持たせる */
    margin-right: auto;   /* 左寄せにする（中央寄せなら margin: 0 auto） */
}
/*紹介文を見やすくするために少し真ん中に詰めて文字を小さくする*/
.follower-card + p {
    text-align: left;       /* 左揃えで見やすく */
    line-height: 1.6;       /* 行間を広げて圧迫感を消す */
    padding: 0 10px;        /* 画面端ギリギリにならないよう左右に隙間を入れる */
    margin-top: 15px;       /* カードとの距離を確保 */
    margin-bottom: 40px;    /* 次の人の見出しとの間も広げて読みやすくする */
}
/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/

/*====================================================================
                 　　　　  ページ全体の設定　　　                     
====================================================================*/
article, aside, canvas, details, figcaption, figure, header, footer, main, menu, nav, section, summary {
	display: block;
}
article, aside {
	text-align: left;
	margin: 10px 15px 1em 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}
/*メインコンテンツのフォントサイズ、デカスギィィィ*/
.wrapper{
	font-size: calc(1em + 1px);
}
/*メインコンテンツの諸々の設定*/
.nav-link{
	font-weight:bold;	
}
.text-center {
	text-align: center;
}
p {
    padding: 0 5px 0 5px;
}
article p {
    padding: 0 5px 0 5px;
    letter-spacing: 0.02em;
    line-height: 1.7;
    margin: 0.5em 0 1em 0;
}
/*見出し要素の設定ナス*/
h1, h1 a:link, h1 a:visited, .left_col h2, .right_col h2, .left_col h3, .right_col h3, aside h3 {
	margin-top: 0px;
	padding: 0px;
	line-height: 1.1em;
	clear: both;
	color: #003366;
	margin-bottom: 10px;
}
article h1 {
	font-size: 1.9em;
 	color: #004488;
    background: #eef9ff;       /* 非常に、ひじょーに薄い水色 */
    padding: 15px;
    border: 3px dashed #0099FF; /* 青色の点線で囲んじゃうぜ？すっげぇ青くなってる */
    border-radius: 10px;        /* 角を丸く、角なんか必要ねぇんだよ！！！ */
    box-shadow: 0 0 0 5px #eef9ff; /* 外側のシャドウ..? */
    margin-bottom: 20px;
    text-align: center;
}
article h2 {
	border: 2px dashed #0099ff;
	background: #eef9ff;
	position: relative;
	padding: 8px 15px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 0 5px 5px 0;
	border-left: 8px solid #0099FF;
	display: inline-block; /* 文字の長さまでの背景にする */;
	padding-right: 30px;       /* 右側を少し伸ばす */
}
article h3 {
    color: #004488;
    padding: 5px 10px;
    border-bottom: 2px dashed #0099FF; /* H1, H2に合わせて点線の下線 */
    border-left: 5px solid #0099FF;    /* 左にちょっとだけアクセント */
    background: transparent;           /* 背景はなし（すっきりさせる） */
    margin-bottom: 15px;
}
.follower {
    font-size: 1.7em;
}

h2, h3, h4, h5, h6 {
	padding: 0px;
	line-height: 1.1em;
	clear: both;
	color: #003366;
}
/*サイト全体のフォント、背景色の設定、すっげぇ色が付いてる、はっきりわかんだね*/
body {
	margin: auto;
	width: auto;
	text-align: center;
	background-color: #D5F0FF;
	box-shadow: 0 0 10px gray;
	color: #222222;
	font-family: "Noto Sans JP",Meiryo,Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1em;
}
a:link {
	text-decoration: none;
	color: #3366cc;
	font-weight: bold;
}
.redlink {
    text-decoration: underline !important;
    font-size:1.2em;
}
.redlink:hover {
    color: rgb(255, 15, 15) !important;
}
a:visited {
	text-decoration: none;
}
a:hover {
	color: red;
}
a img {
	border-width: 0;
}
/*記事の中の画像*/
article img {
    max-width: 100%;
    height: auto;
}
dt{
	font-weight: bold;
}
/*ヘッダーの設定だよ、あくしろよ*/
header {
	background-color: #0099FF;
	clear: both;
}
.header{
	font-weight:bold;
	background-color: #999;
	border-radius: 4px;
}
.header-full{
    width:100%;
    margin:0;
    padding:0;
}
.header-image{
	width:100%;
	height:auto;
	max-width:100%;
    object-fit: cover;
	display:block;
	margin:0 !important; 
    padding:0;
}
header h1{
	margin:0;
	padding:0;line-height:0;font-size:1em
}
header p, footer p{
	margin:10px
}
header nav a:hover {
	text-decoration: underline;
}
/*====================================================================
         　 ナビゲーションバー(ヘッダーの下にあるメニュー)　            
====================================================================*/
/*今日からお前の名前はポチだポチ*/
#nav{
	background-color: #3333CC;
}
#nav .container {
    position: relative; /* 基準点にしてやったぜ。 */
    display: flex;
    justify-content: center; /* 子要素（文字メニュー）を中央に寄せてたらシャワーを浴びる時間も無くなったぜ */
    align-items: center;
    height: auto; /* 必要に応じて調整しちゃう、声が出ちゃう！ */
}
/*文字メニューの設定*/
#nav ul.nav-menu {
    padding: 0px 0;
    margin: 0;
    display: flex;
    list-style: none;
}

#nav ul.nav-menu li {
    font-size: clamp(12px, 2.8vw, 25px);
    white-space: nowrap;
    display: inline-block;
}

#nav ul.nav-menu li a {
    color: #FFF;
    padding: 5px 15px 5px;
    line-height: 40px;
    display: block;
    width: 100%;
    height: 100%;
	box-sizing: border-box;
    align-items: center;
    font-size: 1.2em;
}
/* ▼▼▼ 追加/修正：文字とアイコンのliに共通で線とスペースを適用 ▼▼▼ */
#nav ul.nav-menu li,
#nav ul.nav-icons li {
    border-left: 1px solid rgba(255, 255, 255, 0.3); /* 線を入れる */
    padding: 0;
    margin: 0; /* マージンをリセット */
}

/* ▼▼▼ 追加：文字の一番左の要素（ホーム）の線と左パディングを消す ▼▼▼ */
#nav ul.nav-menu li:first-child {
    border-left: none;
    padding-left: 0;
}
/* ▼▼▼ ドロップダウン（子メニュー）の設定 ▼▼▼ */

/* 1. 親メニューの基準点設定 */
#nav ul.nav-menu li.has-child {
    position: relative; /* 子メニューがここを基準に配置されるようにする */
}
/* 2. 子メニュー（普段は隠しておく） */
ul.sub-menu {
    position: absolute;
    top: 100%;  /* 親の真下に配置 */
    left: 0;
    width: max-content; /* 文字数に合わせて幅を自動調整 */
    min-width: 160px;   /* 最低限の幅 */
    background-color: #3333CC; /* 親と同じ青色 */
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 999; /* 他の要素より手前に表示 */
    box-shadow: 0 5px 10px rgba(0,0,0,0.3); /* 影をつけて浮いてる感を出す */
    
    /* ▼▼▼ 「にょきっと」アニメーションの仕掛け ▼▼▼ */
    opacity: 0;             /* 透明にする */
    visibility: hidden;     /* 見えなくする（クリックも不可） */
    transform: translateY(-10px); /* 少し上に隠しておく */
    transition: all 0.3s ease;    /* 0.3秒かけて変化させる */
}

/* 3. 子メニューの中身（リンク）のデザイン */
ul.sub-menu li {
    display: block !important; /* 横並び解除、縦に積む */
    border-left: none !important; /* 横並び用の線を消す */
    border-bottom: 1px solid rgba(255,255,255,0.2); /* 下線を入れる */
    padding: 0 !important;
}
ul.sub-menu li a {
    padding: 15px !important; /* 押しやすいように広げる */
    font-size: 0.9em !important; /* 少し文字を小さく */
    text-align: left;
    font-weight: bold;
}

/* 4. マウスが乗った時（ホバー時）の変化 */
/* 「li」にマウスが乗ったら、中の「ul.sub-menu」を表示する */
#nav ul.nav-menu li.has-child:hover ul.sub-menu,
#nav ul.nav-menu li.has-child:focus-within ul.sub-menu {
    opacity: 1;             /* 不透明に */
    visibility: visible;    /* 見えるように */
    transform: translateY(0); /* 元の位置（真下）に降りてくる＝にょきっと出る */
}
/* ホバー時の色変化 */
ul.sub-menu li a:hover {
    background-color: #0099FF;
}
/*アイコンメニューの設定（絶対配置で右に固定） */
#nav ul.nav-icons {
    padding: 0;
    margin: 0;
    display: flex;      /* アイコン同士を横並びに */
    list-style: none;
    align-items: center;
}
/* アイコン(li)の余白設定をリセット */
#nav ul.nav-icons li {
    padding: 0 15px;
    display: inline-block;
}
/*SNSのアイコンの設定*/
#nav ul.nav-icons img.icon {
	width: clamp(25px, 4vw, 30px);
    height: auto;
	min-width: 25px;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    opacity: 1;
    transition: filter 0.3s ease;
}
ul.nav-icons .icon:hover {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) brightness(1.4);
}

#top_nav li a:hover {
	color: #003366;
	background-color: #0099FF;
}

#page_content,#sidebar {
	background-color: #FFF;
}
aside ol {
	margin: 0px 0px 10px 1.2em;
	padding: 0px;
}
/*リストの点線の設定*/
aside ul, ul.list {
	list-style-type: none;
	margin: 0px 0px 1em 0px;
	padding: 0px;
	border-top: 1px dashed;
}
aside ul li, ul.list li {
	padding: 5px 0.5em 5px 0.5em;
	margin: 0px;
	border-bottom: 1px dashed;
}
aside ol li {
	margin: 0px;
	padding: 5px 0px 5px 0px;
}
aside li a, .list a {
	display: block;
}
.topic_path .container {
	padding-left: 10px;
}
.subtitle {
	margin-top: -15px;
}
.lead {
	border: 1px solid #999;
	background-color: #EEE;
	margin: 10px 0;
	padding: 5px;
	clear: both;
}
.lead p {
	margin: 0;
}
.point {
	margin: 1em 0px 1em 0px;
	border: 1px dashed #999;
	padding: 10px;
	clear:both
}
.container{
	text-align: left;
	position: static;
	margin: auto;
	max-width: 1085px;
}
/*旧リスト*/
.col_wrap {
	display: block;
    width: 100%;
    clear:both;
}
.left_col {
	float: left;
	width: 49%;
	margin-bottom: 10px;
	clear: both;
}
.right_col {
	float: right;
	width: 49%;
	margin-bottom: 10px;
}
.left_col ul, .right_col ul {
	padding-top: 0px;
	margin-top: 0px;
}

/*====================================================================
             横にたくさん並べるリスト（Gridレイアウト）                 
====================================================================*/
.multi-col-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px; /* 隣との隙間 */
    list-style: none !important; /* リストの点々を消す */
    padding: 0;
    margin: 10px 0 20px 0;
    border-top: none !important; /* 既存のborder設定をリセット */
}

.multi-col-list li {
	border: 2px solid #409efb; /* 枠線 */
	border-radius: 4px;
	text-align: center;
	padding: 0 !important;
	margin: 0 !important;
	background-color: #f9fcff; /* 薄い青色 */
	overflow: visible;
	height: auto; /* 文字数に合わせて縦に伸びる */
	min-height: 30px;
	display: flex;
}

.multi-col-list li a {
    align-items: center;     /* 縦方向の中央揃え */
    justify-content: center; /* 横方向の中央揃え */
    display: block; /* クリック範囲を広げる */
    width: 100%;
    height: 100%;
    padding: 4px;
    box-sizing: border-box;
    text-decoration: none;
    white-space: normal; /* 折り返し許可 */
    text-align: center;
    word-break: break-all; /* 長い英語なども強的に折り返す */
    line-height: 1.3;
    
    /* 文字の折り返し設定 */
    white-space: normal;
    word-break: break-all;
}

.multi-col-list li:hover {
    background-color: #eef9ff;
    border-color: #ff0000; /* ホバー時に枠を赤く */
}

.multi-col-list .mobile_text {
    display: none;
}
/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲

▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼フッター(一番下にある)の設定▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
footer {
	background-color: #0099FF;
    margin: 0 auto;
}
.footer-sns {
    display: flex;         /* 横並びにする */
    justify-content: center; /* 中央寄せ */
    gap: 20px;             /* アイコン同士の間隔 */
    padding-bottom: 10px;
    padding-top: 10px;
}
.footer-sns .icon {
    width: 30px;           /* スマホで押しやすいサイズ */
    height: auto;
    vertical-align: middle;
    opacity: 1;
    transition: filter 0.3s ease;
}
.footer-sns .icon:hover {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) brightness(1.4);
}
/*====================================================================
             　　　　　　自作検索結果のデザイン      　　　　           
====================================================================*/
#search-results-area {
    margin-top: 10px;
    font-size: 0.9em;
}

#search-results-area ul {
    list-style: none;
    padding: 0;
    margin: 0 0 60px 0;
    border-top: 1px dashed #0099FF;
}

#search-results-area li {
    border-bottom: 1px dashed #0099FF;
    padding: 5px 0;
    margin-bottom: 5px;
}

#search-results-area li a {
    display: block;
    color: #003366;
    font-weight: bold;
}

#search-results-area li a:hover {
    color: #FF0000;
    background-color: #eef9ff;
}
.search-result-label {
    color: red;
    font-weight: bold;
    margin-bottom: 8px;  /* 下に隙間を作る */
    font-size: 1.1em;
}
/*検索結果がない時のメッセージ*/
.no-result {
    color: #666;
    padding: 5px;
    font-size: 0.85em;
}
/*検索画面のデザイン*/
.sidebar-search {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 20px;
}
.search-box {
	display: flex;
	flex-direction: column;    /* 縦に並べる指定 */
	gap: 8px;                  /* 入力欄とボタンの隙間 */
	width: 100%;
}
.sidebar-search .search-input {
	box-sizing: border-box;        /* 枠線,余白を含んだ長さ */
	width:100%;
 	height: 35px;               /* 入力の高さ            */
  	margin: 0;                  /* 外余白                */
  	padding: 0 10px;             /* 内余白                */
  	border: 2px solid #0099ff;  /* 枠線　幅,実践,色      */
  	border-radius: 5px;      /* 左上下の角丸          */
  	color: #333;               /* 文字色                */
  	outline: none;                  /* 入力の薄い枠を非表示  */
}
 
 /* --- 検索ボタン欄のSTYLE設定 --- */
.sidebar-search .search-btn {
  	height: 35px;               /* 入力の高さ            */
  	width: 100%;
  	margin: 0;                  /* 外余白                */
  	padding: 0;           /* 内余白                */
  	border: none;               /* 枠線　幅,実践,色      */
  	border-radius: 5px;      /* 右上下の角丸          */
  	background: #0099ff;            /* ボタンの色            */
  	color: #fff;               /* 文字色                */
  	cursor: pointer;            /* カーソル設定          */
  	line-height: 14px;               /* 1行の高さ             */
  	box-shadow: 0 3px 0 #004488;
}
/* ボタンを押した時の動き（へこむ） */
.sidebar-search .search-btn:active {
	transform: translateY(3px);  /* 影の分だけ下に動く */
	box-shadow: none;            /* 影を消す */
}
.meta { 
    text-align: right; 
    font-size: 0.8em; 
    color: #888; 
    margin-top: 20px; 
}
.link {
    width:30px;
    height:30px;
    margin: 0 0 -3px -2px;
}
.link :hover {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) brightness(1.4);
}
/* ==================================================================== 
 　　　　　　　　　　　5chまとめ風リストのデザイン                        
 ==================================================================== */
.matome-list-section {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    background-color: #fff; /* 背景は白、基本だな */
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.matome-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.matome-links li {
    border-bottom: 1px dashed #ccc; /* 点線で区切るとそれっぽい */
    padding: 8px 5px;
    transition: background-color 0.2s;
}

.matome-links li:hover {
    background-color: #f0f7ff; /* ホバーで薄い水色 */
}

.matome-links a {
    display: flex;          /* 横並びにする魔法 */
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #0033cc;         /* リンクは濃い青！これ重要 */
}
.matome-links a:visited {
    color: #660099;         /* 訪問済みは紫、はっきりわかんだね */
}

/* テキストエリア */
.matome-text {
    flex: 1;                /* 幅いっぱい使う */
    padding-right: 10px;
}

.matome-title {
    font-size: 1.1em;       /* 少し大きめ */
    font-weight: bold;
    line-height: 1.4;
    display: block;
    margin-bottom: 4px;
}

.matome-info {
    font-size: 0.8em;
    color: #888;
}

.res-badge {
    color: #ff0000;         /* レス数は赤で目立たせる */
    font-weight: bold;
    margin-left: 10px;
}

/* サムネイル（右側に小さく表示） */
.matome-thumb {
    width: 60px;            /* 小さめで */
    height: 60px;
    flex-shrink: 0;         /* 縮ませない */
    border: 1px solid #ddd;
}

.matome-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ==================================================================== 
 　　　　　　　　　　　5chレス風デザイン（詳細ページ用）                   
 ==================================================================== */
.matome-content {
    padding: 10px;
}

/* レス全体の枠 */
.matome-res {
    margin-bottom: 25px; /* レス同士の間隔 */
}

/* ヘッダー行（番号、名前、日付、ID） */
.res-header {
    background-color: #f0f7ff; /* 画像のような薄い水色背景 */
    padding: 5px 10px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.9em;
    color: #666;
    font-family: "MS PGothic", sans-serif; /* AAとかズレないようにMS Pゴシック指定もアリ */
    line-height: 1.4;
}

/* レス番号 */
.res-num {
    font-weight: bold;
    color: #333;
    margin-right: 5px;
}

/* 名前（緑色にするゾ） */
.res-name {
    color: #008000;
    font-weight: bold;
    margin-right: 10px;
}
/* スレ主のハンドルネーム装飾 */
.res-name.op-name {
    color: blue;       /* 文字色を青にするゾ */
    font-weight: bold; /* 太字にするゾ */
}

/* 日付とID */
.res-date, .res-id {
    margin-right: 5px;
    font-size: 0.95em;
}

/* レス本文 */
.res-body {
    padding: 15px 15px 5px 15px; /* 少し左に余白を持たせて読みやすく */
    font-size: 1.2em; /* 文字はデカく！ */
    line-height: 1.6;
    color: #222;
    font-weight: bold; /* 画像を見る限り結構太字っぽい */
    margin-bottom: 80px;
}
/* 画像 */
.res-image {
    max-width: 100%;   /* 横幅からはみ出さないようにする */
    height: auto;      /* 高さは自動調整 */
	width: 65%;
    display: block;    /* ブロック要素にして改行させる */
    margin-bottom: 10px; /* 本文との隙間を開ける */
    border: 1px solid #ccc; /* 薄い枠線をつける */
    border-radius: 4px;
}

/* ▼▼▼ 強調レス（クラスに highlight がついてる時） ▼▼▼ */
.matome-res.highlight .res-body {
    color: #0000FF; /* 青色 */
    font-size: 1.3em; /* さらにデカく！ */
}
/* ==================================================================== 
 　　　　　　　　　　　一覧に戻るボタンのデザイン                         
  ==================================================================== */
.matome-footer-nav {
    margin: 0 0 20px 0; /* 上に少し広めの隙間を空ける */
    text-align: center;    /* 真ん中に配置 */
}
.return-btn {
    display: inline-block;
    padding: 10px 40px;    /* 横幅を広めにとって押しやすくする */
    background-color: #0099FF !important;
    color: #FFF !important;
    border-radius: 5px;   /* 丸っこくして可愛らしく */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 0 #0066cc; /* 立体的な影 */
}
.return-btn:hover {
    background-color: #0099FF !important;
    color: #fff !important;
    transform: translateY(2px);  /* 押したときに少し沈む */
    box-shadow: 0 2px 0 #004488; /* 影を小さくして押下感を出す */
}
/* ==================================================================== 
 　　　　　　　　　　　相互リンクカードのデザイン                         
  ==================================================================== */
.eachlink-card {
  display: flex;
  background-color: #f9fcff;
  border: 2px solid #0099FF;  /* 枠線を濃い青に */
  border-radius: 10px;        /* 角丸 */
  padding: 20px;              /* 内側の余白を少し増やす */
  margin-bottom: 20px;
  gap: 20px;
  align-items: center;        /* 上下中央揃え */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影 */
  margin-top: 15px;
}
/* カード内の画像（ロゴ）の設定 */
.eachlink-card img {
  width: 80px;
  height: 80px; 
  object-fit: contain;  /* 縦横比を維持 */
  flex-shrink: 0;       /* 文字が増えても画像が潰されないようにする */
  background-color: #fff;
  border-radius: 10%;   /* 画像を丸く切り抜く */
  border: 1px solid #ddd;
  padding: 5px;         /* 枠とロゴの間に隙間を作る */
}

/* カード内のテキストエリア */
.eachlink-card .card-info {
    flex-grow: 1;       /* 残りの幅を埋める */
}
.eachlink-card .card-info p {
    margin: 0;
    line-height: 1.6;   /* 行間を広げ */
    font-size: 0.95em;
}
/* カードの中に入れたh3専用の設定 */
.eachlink-card h3.card-title {
    border: none;       /* 点線や左線を消す */
    background: none;   /* 背景色消す */
    padding: 0;
    margin: 0 0 5px 0;
    font-size: 1.5em;   /* 文字サイズ */
    line-height: 1.2;
    box-shadow: none;   /* 影も消す */
}

/* もしリンクの色がおかしかったらこれで強制指定 */
.eachlink-card h3.card-title a {
    text-decoration: none;
}
.eachlink-card .icon-link {
    display: block;
    flex-shrink: 0;      /* 横幅が狭くなっても絶対に潰させない */
    line-height: 0;      /* 画像の下にできる謎の隙間を消滅させる */
    text-decoration: none;
}
/* ==============================================
             Qiita風コードブロック設定
   ============================================== */

/* コード全体を囲むブロック (preタグ) */
pre {
    background-color: #364549; /* Qiitaっぽい深緑がかったダークグレー */
    color: #eff1f5;            /* 文字色は白に近いグレー */
    padding: 15px;             /* 内側の余白 */
    border-radius: 5px;        /* 角を少し丸くする */
    overflow-x: auto;          /* 横に長すぎたらスクロールさせる */
    margin-bottom: 20px;       /* 下の余白 */
    font-family: Consolas, "Courier New", Courier, monospace; /* 等幅フォント */
    line-height: 1.5;          /* 行間を少し空けて見やすく */
    border: 1px solid #4e5b61; /* 薄い枠線 */
}

/* preの中にあるcodeタグ */
pre code {
    background-color: transparent; /* 二重に背景がつかないように透明に */
    color: inherit;                /* 親(pre)の色を引き継ぐ */
    padding: 0;
    border: none;
}

/* 文章の途中に埋め込む短いコード (codeタグ単体) 
   例: 「ここで echo を使います」みたいな時用 */
code {
    background-color: #eee;    /* 薄いグレー */
    color: #d03050;            /* 赤っぽい色 */
    padding: 2px 4px;
    border-radius: 3px;
    font-family: Consolas, "Courier New", Courier, monospace;
    font-size: 0.9em;
}
img.character {
    max-width: 100%;   /* 横幅からはみ出さないようにする */
    height: auto;
	width: 70%;
    display: block;    /* ブロック要素にして改行させる */
    margin-bottom: 10px; /* 本文との隙間を開ける */
}
 /*古いブラウザで開いた時の保険*/
@media only screen{
img {
	max-width: 100%;
	height: auto;
}
}
/*@media(max-width:480px){
#snav{
	display:none
}
}
@media(min-width:768px){
.search{
	position:absolute;
	top:1.5em;
	right:0px;
	width:300px;
}
}
@media(max-width:1127px){
#page_content,
#sidebar {
    float: none;
    width: 100%;
    margin: 0 auto 10px auto;
  }

  .wrapper {
    width: auto;
    padding: 10px;
  }

  article, aside {
    margin-top: 10px;
}
}
/*
@media only screen and (min-width: 1110px) {
.container{
	width:1075px
}
.wrapper {
	width: 1085px;
}
#page_content {
	width: 750px;
}
#sidebar {
	width: 320px;
}
}
*/