/*───────────────────────────────────────────────────────*/ /* 背景上書き用 */ html, body { height: 100%; margin: 0; padding: 0; background-color: #150028; /* 背景色を黒に設定 */ background-image: url("https://sozaino.site/wp-content/uploads/2022/11/hoshi623.png"); /* 背景画像を上書き */ background-attachment: fixed; /* 背景画像を固定 */ background-size: cover; /* 画像が画面全体に広がるように設定 */ background-position: center; /* 画像が中央に表示されるように設定 */ } /* コメント見出し部分（文字寄せ,文字色,背景色,太字にするか） */ .com1 { text-align: left; color: #ffffff; background-color: rgba(117, 120, 128, 0.9); /* 透明度0.9の背景色 */ font-weight: bold; border-top-left-radius: 10px; /* 左上を丸める */ border-top-right-radius: 10px; /* 右上を丸める */ letter-spacing: 1px; /* 文字間の幅を1px広げる */ } /* コメントの本体部分（文字寄せ,背景色,幅） */ .com2 { text-align: center; background-color: rgba(238, 238, 238, 0.9); /* 半透明な背景色 */ width: 610px; /* 幅に単位pxを追加 */ } /* 表まるごと */ table { border-radius: 10px; /* 四隅を丸める */ overflow: hidden; /* 角を越えないようにする */ font-family: "Kaisei Decol", serif; } /* 名前部分の設定（サイズ,文字色,背景色,太字にするかどうか,文字寄せ） */ .name { font-size: 12pt; color: #F9F9FF; background-color: rgba(128, 126, 117, 0.9); /* 透明度0.9の背景色 */ font-weight: bold; text-align: center; } /* 項目を表示する部分（文字寄せ,背景色,幅） */ .left { text-align: right; background-color: rgba(180, 180, 180, 0.9); /* 透明度0.9の背景色 */ width: 200px; /* 幅に単位pxを追加 */ } /* 内容を表示する部分（文字寄せ,背景色,幅） */ .right { text-align:left; background-color: rgba(201, 201, 201, 0.9); /* 半透明な背景色 */ width: 400; } /* タグの設定 */ body { background-color:#F9F9F9; /* 背景色の設定。背景画像はlist.cgi中で設定してください */ color:#2b2b2b; /* 基本の色設定 */ } /* Webkit系ブラウザ（Chrome, Safari）用のスクロールバー非表示 */ body::-webkit-scrollbar { display: none; /* スクロールバーを非表示 */ } /* 小さな改行用ID */ #unique-br { line-height: 0.5em; /* 改行後のスペースを狭く */ margin-bottom: 0.2em; /* 改行後のマージンを小さく */ font-size: 0.8em; /* フォントサイズを調整 */ } h3 { border-bottom: 2px solid #003057d7; /* より目立つ太い横線 */ font-size: 15px; color: #6666ff; margin-bottom: 0; /* 下の余白を削除 */ padding-bottom: 0; /* 横線と文字の間隔を詰める */ line-height: 1.2; /* 行間を詰めて、文字と横線の間隔を調整 */ } /*───────────────────────────────────────────────────────*/ /* 一覧 */ .details { border-top: 2px solid #005cacab; border-left: 2px solid #005cacab; border-right: 2px solid #005cacab; border-bottom: 2px solid #005cacab; /* 最後のdetailsでもボーダーを追加 */ overflow: hidden; /* 内容が切れないように */ transition: max-height 0.3s ease-out; /* スムーズに開く */ box-sizing: border-box; /* ボックスサイズを調整して枠線が影響しないように */ } /* タイトル部分 */ .details-summary { position: relative; display: block; padding: 8px 20px; /* 上下のパディングを減らしてスペースを縮小 */ color: #fff; font-size: 12px; font-weight: bold; text-align: left; background-color: #0088ffab; padding-left: 42px; /* 左に余白を追加 */ letter-spacing: 1px; /* 文字間の幅を1px広げる */ } .details-summary:hover { cursor: pointer; opacity: 0.8; } /* ボタンのデザイン */ .details-summary .btn { position: absolute; top: 10%; left: 2.5%; text-align: center; font-size: 18px; line-height: 18px; width: 30px; /* 横幅を少し広げる */ height: 18px; /* 高さはそのまま */ text-align: center; background-color: #08004f00; color: #ffffff; border-radius: 50%; transition: transform 0.2s ease; transform-origin: center center; /* 回転軸を中央に設定 */ } /* 初期状態（+） */ .details-summary .btn::before { content: "+"; font-size: 24px; } /* 開いたとき（-） */ .details[open] .details-summary .btn::before { content: "-"; /* 開くときに "-" に変わる */ } /* アコーディオンのコンテンツ */ .details-content { padding: 20px; display: none; /* デフォルトでは非表示 */ } .details[open] .details-content { display: block; /* 開いたときに表示 */ } /* details タグが開かれたときのスタイル（ボタンの回転） */ .details[open] .details-summary .btn { transform: rotate(360deg); /* ボタンが "+" から "-" に回転する */ } /*───────────────────────────────────────────────────────*/ /* リンクテーブル */ /* テーブル全体のスタイル */ .image-links-table { border: 1px solid black; width: 100%; border-collapse: collapse; /* セルの境界をきれいにする */ border-radius: 0px; /* 四隅を丸める */ } /* リンク部分のスタイル */ .links { text-align: center; } /* 各リンクのスタイル */ .links a { display: block; padding: 2.5px; text-decoration: none; border: 0px solid black; margin: 0; /* ボタンのようなスペースをなくす */ width: 100%; /* セル内で幅を100%に設定して、均等に分ける */ box-sizing: border-box; /* パディングとボーダーが幅に影響しないようにする */ background-color: #e3f0fb; } /* 画像部分のスタイル */ .image { border: 1px solid black; padding: 10px; text-align: center; } /* テーブルセルの枠線 */ .image-links-table td { border: 1px solid black; width: 25%; /* 各セルの幅を均等に設定 */ box-sizing: border-box; /* セルのパディングやボーダーが幅に影響しないように */ } /*───────────────────────────────────────────────────────*/ /* タイトルバー用 */ /* プロフィールのテーブルスタイル */ .ber-table { border-collapse: collapse; width: 100%; background-color: rgba(0, 81, 156, 0.9); /* 透明度0.9の背景色 */ border-style: none; border-radius: 0px; /* 四隅を丸める */ } /* ✝プロフィールの文字色を白にする */ .ber-table td span b { color: #ffffff; /* 文字色を白に設定 */ } /* セルの間隔と枠線 */ .ber-table td { padding: 0px; /* セルの間隔を広げて、枠線が見やすくなるように */ border: 1px solid #000; /* セルに枠線を追加 */ } /* プロフィールのタイトル部分（✝ プロフィール）の背景色 */ .profile-title { background-color: rgba(0, 81, 156, 0.9); /* 透明度0.9の背景色 */ color: #ffffff; /* 文字色は白に */ text-align: left; font-weight: bold; padding: 15px 0; /* 上下のパディングを調整 */ } /* プロフィールのヘッダー部分のスタイル */ .profile-header { background-color: #e3f0fb; /* ヘッダー部分に背景色を設定 */ text-align: left; font-weight: bold; } /* プロフィールの詳細部分のスタイル */ .profile-details { background-color: #ffffff; /* 詳細部分に異なる背景色を設定 */ text-align: left; } /* プロフィール詳細部分にのみ背景色を白くする */ .profile-details td { background-color: #ffffff; /* 詳細部分に背景色を設定 */ } /* 左側の項目名、右側の詳細を縦並びに */ .profile-row { display: flex; justify-content: space-between; align-items: center; } /* 行の高さの調整 (余白を小さくする) */ .ber-table tr { height: auto; /* 高さを自動調整して余白を最小限に */ } /* 名前の列だけ背景色を白くする */ .profile-column-highlight { background-color: #ffffff; /* 背景色を白に設定 */ } /* 左の列（項目名）の幅を25%に設定 */ .profile-header td:first-child { width: 25%; /* 左の列（項目名）の幅 */ padding-left: 10px; /* 左に余白を追加 */ padding-top: 2.5px; /* 上部の余白を調整 */ padding-bottom: 2.5px; /* 下部の余白を調整 */ } /* 右の列（詳細部分）の文字の開始位置を少し右にずらす */ .profile-header td:nth-child(2) { width: 75%; /* 右の列（詳細部分）の幅 */ padding-left: 10px; /* 左に余白を追加 */ font-weight: normal; /* 文字を標準の太さに変更 */ } /*───────────────────────────────────────────────────────*/ /* オンマウステキスト */ div.hide>div{opacity:0;transition: opacity 0.3s ease-out;} div.hide:hover>div{opacity:1} span.hide>span{opacity:0;transition: opacity 0.3s ease-out;} span.hide:hover>span{opacity:1} details.hide>div{opacity:0;transition: opacity 0.3s ease-out;} details.hide:hover>div{opacity:1} /* 砂嵐 */ .noisy{ position: relative; } .noisy::after{ position: absolute; content: "" ; background: url(../img/noise.png); width:auto; height: auto; top: 0; bottom: 0; right:0; left:0; opacity: 0.6; } /*グリッチノイズ*/ .glitch { color: white; font-size: 1em; position: relative; width:auto; margin: 0 auto; display:inline-block; } /*@media (max-width: 350px) { .glitch { font-size: 3em;} } @media (max-width: 450px) { .glitch { font-size: 2em;} } */ @keyframes noise-anim { 0% { clip: rect(0.04em, 9999px,0.47em, 0); } 5% { clip: rect(0.51em, 9999px,0.74em, 0); } 10% { clip: rect(0.85em, 9999px,0.94em, 0); } 15% { clip: rect(0.20em, 9999px,0.74em, 0); } 20% { clip: rect(0.56em, 9999px,0.81em, 0); } 25% { clip: rect(0.08em, 9999px,0.20em, 0); } 30% { clip: rect(0.25em, 9999px,0.23em, 0); } 35% { clip: rect(0.45em, 9999px,0.20em, 0); } 40% { clip: rect(0.63em, 9999px,0.18em, 0); } 45% { clip: rect(0.19em, 9999px,0.73em, 0); } 50% { clip: rect(0.38em, 9999px,0.78em, 0); } 55% { clip: rect(0.16em, 9999px,0.80em, 0); } 60% { clip: rect(0.71em, 9999px,0.44em, 0); } 65% { clip: rect(0.51em, 9999px,0.52em, 0); } 70% { clip: rect(0.98em, 9999px,0.06em, 0); } 75% { clip: rect(0.42em, 9999px,0.14em, 0); } 80% { clip: rect(0.63em, 9999px,0.53em, 0); } 85% { clip: rect(0.52em, 9999px,0.98em, 0); } 90% { clip: rect(0.14em, 9999px,0.81em, 0); } 95% { clip: rect(0.58em, 9999px,0.92em, 0); } 100% { clip: rect(0.43em, 9999px,0.16em, 0); } } .glitch:after { content: attr(data-text); position: absolute; left: 2px; right: -2px; text-shadow: -1px 0 red; top: 0; color: white; background: #212121; overflow: hidden; clip: rect(0, 900px, 0, 0); margin:0; padding:0; width:auto; animation: noise-anim 2s infinite linear alternate-reverse; } @keyframes noise-anim-2 { 0% { clip: rect(0.20em, 9999px,0.64em, 0); } 5% { clip: rect(0.13em, 9999px,0.26em, 0); } 10% { clip: rect(0.47em, 9999px,0.14em, 0); } 15% { clip: rect(0.85em, 9999px,0.80em, 0); } 20% { clip: rect(0.06em, 9999px,0.76em, 0); } 25% { clip: rect(0.74em, 9999px,0.42em, 0); } 30% { clip: rect(0.08em, 9999px,0.79em, 0); } 35% { clip: rect(0.70em, 9999px,0.49em, 0); } 40% { clip: rect(0.04em, 9999px,0.41em, 0); } 45% { clip: rect(0.92em, 9999px,0.68em, 0); } 50% { clip: rect(0.22em, 9999px,0.39em, 0); } 55% { clip: rect(0.91em, 9999px,0.64em, 0); } 60% { clip: rect(0.18em, 9999px,0.59em, 0); } 65% { clip: rect(0.34em, 9999px,0.35em, 0); } 70% { clip: rect(0.69em, 9999px,0.37em, 0); } 75% { clip: rect(0.67em, 9999px,0.43em, 0); } 80% { clip: rect(0.44em, 9999px,0.07em, 0); } 85% { clip: rect(0.94em, 9999px,0.02em, 0); } 90% { clip: rect(0.55em, 9999px,0.82em, 0); } 95% { clip: rect(0.15em, 9999px,0.35em, 0); } 100% { clip: rect(1.00em, 9999px,0.73em, 0); } } .glitch:before { content: attr(data-text); position: absolute; left: -2px; right: 2px; text-shadow: 1px 0 blue; top: 0; color: white; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); width:auto; margin:0; padding:0; animation: noise-anim-2 3s infinite linear alternate-reverse; } /* 便利カラークラス */ .red{color:red;} .blue{color:blue;} .green{color:green;} .yellow{color:yellow;} .purple{color:purple;} .orange{color:orange;} .navy{color:navy;} /* 吹き出し */ .fkds_box{ padding:0.4em; max-width:600px; outline:1px dotted #424242; } .fkds_box .fkds{ max-width:600px; } .fkds_box .fkds.f-r{ max-width:600px; margin-left:auto; margin-right:0; } .fkds_box .fkds>div{ width: calc(72% - 0.8em - 60px) } .fkds { display: flex; flex-direction: row; align-items: flex-start; margin-bottom:0.4em; } .fkds>img { order:1; border-radius: 3px; max-width: 60px; } .fkds>div { order:2; margin-left: 0.8em; margin-right: 0.8em; padding: 0.4em 0.6em; font-size: 0.92em; background: rgb(255, 255, 255); /* 内側の背景色 */ color: #000000; position: relative; border-radius: 0.4em; min-height: 50px; min-width: 160px; box-shadow: 0 0 0 1px #000000; /* 外側の縁取りとして背景色を追加 */ } .fkds div::before { content: ""; border: solid 0.4em transparent; border-right: solid 0.6em rgb(255, 255, 255); position: absolute; right: 100%; top: 1.5em; border-right: solid 0.4em #000000; /* 矢印の縁取りの色 */ border-top: solid 0.2em transparent; border-bottom: solid 0.2em transparent; } .fkds.f_r{ flex-direction: row-reverse; } .fkds.f_r > img{ } .fkds.f_r > div{ } .fkds.f_r div::before { content: ""; border: solid 0.4em transparent; border-left: solid 0.6em white; position: absolute; left: 100%; top: 1.5em; } /*nobunaga*/ div.oda {font-family: "HGP行書体", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳＰ明朝","ＭＳ明朝",serif; -webkit-transform-origin: 0 0; -webkit-transform: scale(1, 1.01); -moz-transform-origin: 0 0; -moz-transform: scale(1, 1.01); -ms-transform-origin: 0 0; -ms-transform: scale(1, 1.02); -o-transform-origin: 0 0; -o-transform: scale(1, 1.01); font-size:4em; text-align:center} div.oda ruby{} div.odam {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳＰ明朝","ＭＳ明朝",serif; -webkit-transform-origin: 0 0; -webkit-transform: scale(1, 1.01); -moz-transform-origin: 0 0; -moz-transform: scale(1, 1.01); -ms-transform-origin: 0 0; -ms-transform: scale(1, 1.02); -o-transform-origin: 0 0; -o-transform: scale(1, 1.01); font-size:4em; text-align:center} /*シャウト風*/ .bbs_text{ width: 24em; display: inline-block; padding: 0 0 0 10px; } .bbs_icons{ width: 60px; height: 60px; margin: 5px 0 0 5px; float: left; vertical-align: top; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .bbs_data{ clear: both; display:inline-block; } .line{ clear: both; border-top: 4px double #ffffff; width: 100%; height: 2px; margin: 2px 0; } .BBS_box{ margin:auto auto; padding: 0 !important; width: 560px; height: 600px; overflow-y: scroll; overflow-x: hidden; border: #EEEEEE 4px dotted; background-image: url("http://futahana.rash.jp/Futahana/images/tile3.png"); } ::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); } ::-webkit-scrollbar-thumb { background-color: rgba(250, 250, 250, .5); border-radius: 10px; } ::-webkit-scrollbar { width: 10px; }