/* ← エディタはこれでCSSだと認識する */

/*----------------------------------
全体設定
----------------------------------*/
body {
  margin  : 0;
  padding : 0;
  /* 漆黒ではなく、ごくわずかに緑を帯びた深い闇 */
  background-color: #050f12;

  /* 複数のグラデーションを重ねて、光の揺らぎを作る */
  background-image:
      /* 左上からの淡い光 */
      radial-gradient(circle at 10% 20%, rgba(20, 255, 236, 0.04) 0%, transparent 40%),
      /* 右下からの深い光 */
      radial-gradient(circle at 90% 80%, rgba(20, 255, 236, 0.06) 0%, transparent 50%),
      /* 中央付近に漂う、マナの溜まり */
      radial-gradient(circle at 50% 50%, rgba(20, 255, 236, 0.02) 0%, transparent 60%);

  background-attachment : fixed;
  min-height            : 100vh;
  color                 : #FAFAFA;
}

/* 点の代わりに「光の揺らぎ」をアニメーションさせる */
body::before {
  content         : "";
  position        : fixed;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  /* 霧のような質感 */
  background      : linear-gradient(125deg, transparent 30%, rgba(20, 255, 236, 0.02) 50%, transparent 70%);
  background-size : 200% 200%;
  animation       : mist-move 15s ease-in-out infinite;
  pointer-events  : none;
  z-index         : -1;
}

@keyframes mist-move {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
body.open_popup {
  overflow : hidden; /* 背面のスクロールを禁止 */
}

/*----------------------------------
スクロールバー全体のカスタマイズ
----------------------------------*/
/* Chrome, Edge, Safari 用 (WebKit系) */
::-webkit-scrollbar {
  width  : 8px; /* 縦スクロールバーの幅 */
  height : 8px; /* 横スクロールバーの高さ */
}

/* スクロールバーの通り道（トラック） */
::-webkit-scrollbar-track {
  background : #071418; /* 背景色と合わせることで境界線を消す */
}

/* 動く部分（つまみ/ハンドル） */
::-webkit-scrollbar-thumb {
  background      : rgba(20, 255, 236, 0.2); /* Orcaエメラルドを薄く透かす */
  border-radius   : 10px;
  border          : 2px solid transparent; /* トラックとの間に余白を作る */
  background-clip : content-box; /* 余白を適用する魔法のプロパティ */
}

/* ホバーした時（つまみが光る） */
::-webkit-scrollbar-thumb:hover {
  background      : rgba(20, 255, 236, 0.6); /* ホバーでUlricaの情熱を少し宿す */
  box-shadow      : 0 0 8px rgba(20, 255, 236, 0.4);
}

/* Firefox用 (最新の標準仕様) */
* {
  scrollbar-width : thin;
  scrollbar-color : rgba(20, 255, 236, 0.3) #071418;
}

/*----------------------------------
リンク文字設定
----------------------------------*/
a:link {
  color : #FAFAFA;
}

a:visited {
  color : #FAFAFA;
}

a:hover {
  color : #00BFFF;
}

a:active {
  color : #F2F2F2;
}

a {
  text-decoration : none; /* リンク下線削除 */
}

/*----------------------------------
個別設定
----------------------------------*/
/* <hr> */
.ulrica-magic-line-a {
  border           : 0;
  height           : 2px;
  /* 中心が濃く、両端が透明になる「蒼星」のグラデーション */
  background-image : linear-gradient(
      to right,
      rgba(20, 255, 236, 0),
      rgba(20, 255, 236, 1) 50%,
      rgba(20, 255, 236, 0)
  );
  /* 蒼い光を放つエフェクト */
  box-shadow       : 0 0 12px rgba(20, 255, 236, 0.6);
  margin           : 5px 0;
}

/* 該当要素のセンタリング */
.center_block {
  text-align	: center;
}

/* 記事の中の改行 */
g {
  white-space : pre-wrap;
}

/*----------------------------------
ボタン類
----------------------------------*/
.btn1 {
  display         : block; /* ブロック要素に変更 */
  margin          : 50px auto 10px;
  padding         : 10px 20px;
  background      : #08335c;
  color           : #fafafa;
  text-decoration : none;
  border-radius   : 5px;
  transition      : background 0.3s;
  animation       : glowing2 3s ease-in-out infinite;
  min-width       : 200px;
}

.btn1:hover {
  opacity         : .8;
}
@keyframes glowing2 {
  0% {
    box-shadow:
      0 0 7px 2px rgba(20, 180, 255, 0.5), /* 青強め・透明度やや低め */
      0 0 14px 4px rgba(11, 180, 255, 0.4),
      0 0 21px 7px rgba(11, 140, 220, 0.3);
  }
  50% {
    box-shadow:
      4px 0 10px 2px rgba(20, 190, 255, 0.55),
      -4px 0 18px 4px rgba(11, 190, 255, 0.45),
      8px 0 27px 7px rgba(11, 150, 220, 0.35);
  }
  100% {
    box-shadow:
      0 0 7px 2px rgba(20, 180, 255, 0.5),
      0 0 14px 4px rgba(11, 180, 255, 0.4),
      0 0 21px 7px rgba(11, 140, 220, 0.3);
  }
}

.btn2 {
  background      : linear-gradient(135deg, #04B4AE 0%, #027a76 100%); /* 高級感のあるグラデーション */
  border-radius   : 50px; /* 角を丸くしてモダンに */
  position        : relative;
  display         : flex;
  justify-content : center; /* 中央寄せ */
  align-items     : center;
  margin          : 20px auto;
  width           : 280px;
  padding         : 14px 25px; /* 少し高さを出して押しやすく */
  color           : #ffffff;
  font-weight     : 600;
  text-decoration : none;
  border          : none; /* 枠線を消して影で立体感を出す */
  box-shadow      : 0 4px 15px rgba(4, 180, 174, 0.4); /* ボタンと同色の光る影 */
  transition      : all 0.3s ease;
  overflow        : hidden; /* 光がはみ出さないように */
  cursor          : pointer;
}

/* 光の演出（疑似要素） */
.btn2::before {
  content         : '';
  position        : absolute;
  top             : 0;
  left            : -100%; /* 最初は左に隠しておく */
  width           : 100%;
  height          : 100%;
  background      : linear-gradient(
      120deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
  );
  transition      : all 0.5s;
}

/* ホバー時の動き */
.btn2:hover {
  transform       : translateY(-3px); /* 少し浮き上がる */
  box-shadow      : 0 6px 20px rgba(4, 180, 174, 0.6); /* 影を強くして発光感を出す */
}

/* ホバー時に光を走らせる */
.btn2:hover::before {
    left          : 100%; /* 左から右へ光が突き抜ける */
}

.btn2:active {
    transform     : translateY(-1px); /* 押した時の感覚 */
}

/*----------------------------------
ポップアップ
----------------------------------*/
/* 背景：透明度を少し上げて、よりメインコンテンツを際立たせる */
.bg_onetime_popup {
  position         : fixed;
  top              : 0;
  left             : 0;
  z-index          : 9999;
  width            : 100vw;
  height           : 100vh;
  background-color : rgba(0, 0, 0, 0.7);
  opacity          : 0;
  visibility       : hidden;
  transition       : 0.4s ease-out;
}

body.open_popup .bg_onetime_popup {
  opacity          : 1;
  visibility       : visible;
}

/* ポップアップ本体：PCでの視認性を最適化 */
.onetime_popup {
  position         : absolute;
  top              : 50%;
  left             : 50%;
  transform        : translate(-50%, -50%);
  width            : 60%; /* PC画面に対して適切な広さ */
  min-width        : 600px; /* PC専用なので広めに確保 */
  max-width        : 1000px; /* 巨大モニターでの間延び防止 */
  max-height       : 85vh; /* 画面の85%までに収める */
  overflow-y       : auto;
  background-color : #000000;
  box-shadow       : 0 0 50px rgba(0,0,0,0.8);
  border           : 1px solid #333; /* 境界をうっすら際立たせる */
}

/* PC用カスタムスクロールバー（Webkit系ブラウザ用） */
.onetime_popup::-webkit-scrollbar {
  width            : 8px;
}
.onetime_popup::-webkit-scrollbar-track {
  background       : #000;
}
.onetime_popup::-webkit-scrollbar-thumb {
  background       : #0B3B39; /* Uluzカラーの青緑をアクセントに */
  border-radius    : 4px;
}

/* タイトルバー */
.onetime_popup_title {
  position         : relative;
  padding          : 1.2em 100px 1.2em 40px; /* PCらしくゆったりと */
  margin           : 0;
  background-color : #0B3B39;
  color            : #fff;
  font-size        : 28px;
  font-weight      : bold;
  text-align       : left;
  line-height      : 1.4;
}

/* 閉じるボタン：PCでのマウス操作を意識 */
.onetime_popup_title_close {
  position         : absolute;
  top              : 50%;
  right            : 30px;
  width            : 36px;
  height           : 36px;
  transform        : translateY(-50%);
  cursor           : pointer;
  transition       : 0.3s;
}

.onetime_popup_title_close:hover {
  opacity          : 0.7;
  transform        : translateY(-50%) rotate(90deg); /* マウスオーバーで回転 */
}

.onetime_popup_title_close::before,
.onetime_popup_title_close::after {
  position         : absolute;
  top              : 50%;
  left             : 50%;
  width            : 100%;
  height           : 3px; /* 少しシャープに */
  background-color : #fff;
  content          : "";
}
.onetime_popup_title_close::before {
  transform        : translate(-50%, -50%) rotate(45deg);
}
.onetime_popup_title_close::after {
  transform        : translate(-50%, -50%) rotate(-45deg);
}

.onetime_popup_content {
  padding          : 50px 40px;
  text-align       : center;
  color            : #ffffff;
  font-size        : 18px; /* PCで読みやすいサイズ */
  line-height      : 1.8;
}

/*----------------------------------
ページング
----------------------------------*/
/* ページング全体のコンテナ */
ul.paging {
    list-style-type : none;
    margin          : 0px auto;
    padding         : 0;
    display         : flex; /* tableからflexに変更して中央寄せしやすくします */
    justify-content : center;
    gap             : 8px;
}

ul.paging::after {
    content         : none; /* flexを使うのでクリアフィックスは不要 */
}

ul.paging > li {
    float           : none; /* floatを解除 */
}

/* 共通のボタンスタイル */
ul.paging > li > * {
  margin            : 0;
  padding           : 8px 16px;
  display           : block;
  color             : var(--text-sub); /* 基本は少し暗めの文字 */
  background        : rgba(255, 255, 255, 0.05); /* ほんのり透ける背景 */
  border            : 1px solid var(--glass-border);
  border-radius     : 8px;
  text-decoration   : none;
  font-size         : 14px;
  transition        : all 0.3s ease;
  backdrop-filter   : blur(5px);
}

/* マウスホバー時 */
ul.paging > li > a:hover,
ul.paging > li > [data-page]:hover {
  color             : var(--accent-color);
  background        : rgba(20, 255, 236, 0.1);
  border-color      : var(--accent-color);
  box-shadow        : 0 0 10px rgba(20, 255, 236, 0.3);
  transform         : translateY(-2px);
}

/* 現在のページ（アクティブ） */
ul.paging > li > .active {
  color             : #050f12; /* 背景が明るいので文字を暗く */
  background        : var(--accent-color); /* Ulricaシアン */
  border-color      : var(--accent-color);
  font-weight       : bold;
  box-shadow        : 0 0 15px rgba(20, 255, 236, 0.5);
}

/* 前後ボタン等のテキスト */
ul.paging > li > a {
  color             : var(--text-main);
}

ul.paging > li > [data-page] {
  cursor            : pointer;
}

/*----------------------------------
テーブル設定
----------------------------------*/
/* テーブルの文字寄せ */
.left {
  text-align  : left!important;
}
.right {
  text-align  : right!important;
}
.center {
  text-align  : center!important;
}

/*----------------------------------
右ページ、左ページ分割設定
----------------------------------*/
.main-wrapper {
  display         : flex;
  justify-content : center; /* 中央寄せ */
  gap             : 30px; /* メインとサイドの間の心地よい余白 */
  width           : 100%; /* 画面いっぱいに広げる */
  max-width       : 1090px; /* 820 + 270 (左メニュー280) */
  margin          : 0 auto;
}

.content-left {
  width           : 820px;
  flex-shrink     : 0; /* 幅を勝手に縮ませない */
}

.content-right {
  width           : 270px;
  flex-shrink     : 0;
}

/*----------------------------------
右メニュー関連
----------------------------------*/
/* フォント指定 */
.font_set1{
font-family : "Didot","Yu Mincho","游明朝", sans-serif;
margin      : 0;
padding     : 0;
white-space : nowrap; /* 文字が改行されないように保護 */
font-size   : 1.1rem; /* 標準より少し大きく */
}

/* 文字の両サイドに線 */
.head-border {
  display     : flex;
  align-items : center; /* これで垂直方向の真ん中に揃います */
  width       : 83%;
  margin-left : 35px;
  margin-top  : 35px;
}

.head-border:before,
.head-border:after {
  content          : "";
  height           : 1px;
  flex-grow        : 1;
  background-color : rgba(20, 255, 236, 1);
}

.head-border:before {
  content      : "";
  height       : 1px;
  flex-grow    : 1;
  /* 右から左に消える */
  background   : linear-gradient(to left, rgba(20, 255, 236, 1), transparent);
  margin-right : 1.2rem;
}

.head-border:after {
  content      : "";
  height       : 1px;
  flex-grow    : 1;
  /* 左から右に消える */
  background   : linear-gradient(to right, rgba(20, 255, 236, 1), transparent);
  margin-left  : 1.2rem;
}

.hr-design {
  border       : none;
  height       : 1px;
  background   : linear-gradient(to right, rgba(20, 255, 236, 1), transparent);
  width        : 221px;
  margin-left  : 0;

}

/* 著作権・警告テキスト用 */
.caution-text {
  margin-left  : 35px;
  margin-top   : 15px;
  font-size    : 0.85rem;    /* size="-1" の代わり */
  line-height  : 1.8;        /* 行間を広げて読みやすく（brの代わり） */
  color        : #BDBDBD;    /* 少し色を抑えて上品に */
}

/* 段落（ブロック）ごとの余白 */
.caution-text p {
  margin-bottom : 1.5em;    /* 段落の後に br 1.5回分の余白 */
}

/*----------------------------------
ログインページ
----------------------------------*/
/* inputボックスのデザイン */
.mformtext_login {
  height              : 2.4em;
  width               : 80%;
  padding             : 0 16px;
  border-radius       : 4px;
  border              : none;
  box-shadow          : 0 0 0 1px #ccc inset;
  appearance          : none;
  -webkit-appearance  : none;
  -moz-appearance     : none;
}
.mformtext_login:focus {
  outline             : 0;
  box-shadow          : 0 0 0 2px rgb(33, 150, 243) inset;
}

.table_login {
  margin              : 40px auto;
  border-collapse     : separate; /* 丸角にするため */
  border-spacing      : 0; /* 余白をゼロに */
  border-radius       : 15px; /* 丸角の半径 */
  overflow            : hidden; /* 中の角も丸く */
  border-collapse     : collapse;
  border              : none; /* 枠線を消す */
  color               : #FAFAFA;
  animation           : glowing 3s ease-in-out infinite;
  width               : 900px;
}

.table_login td {
  background          : #0B3B39;
  height              : 100px;
  border              : none;
  font-size           : 14px;
  transition          : box-shadow 0.3s ease, background-color 0.3s ease;
  position            : relative; /* 光の効果をのせやすく */
  white-space         : nowrap;
  padding-left        : 25px;
  padding-right       : 25px;
}

.table_login td:hover {
  box-shadow          : 0 0 8px 3px rgba(20, 255, 236, 0.7);
  background-color    : #0D4F52; /* 少し明るい背景色に */
  cursor              : pointer;
  z-index             : 1; /* 光が重なったとき目立つように */
}

.table_login tr:nth-child(odd):hover td {
  background-color    : #0C253A !important; /* 元色より少し明るめ */
  box-shadow          : 0 0 8px 3px rgba(20, 255, 236, 0.7) !important;
  cursor              : pointer;
  position            : relative;
  z-index             : 1;
  transition          : background-color 0.3s ease, box-shadow 0.3s ease;
}

.table_login tr:nth-child(even):hover td {
  background-color    : #0D4F52 !important; /* 偶数行ホバーの色 */
  box-shadow          : 0 0 8px 3px rgba(20, 255, 236, 0.7) !important;
  cursor              : pointer;
  position            : relative;
  z-index             : 1;
  transition          : background-color 0.3s ease, box-shadow 0.3s ease;
}
.table_login tr:nth-child(odd) td {
  background          : #0A1B2A;
}

@keyframes glowing {
  0% {
    box-shadow:
      0 0 8px 2px rgba(20, 255, 236, 0.75),
      0 0 16px 4px rgba(11, 255, 221, 0.55),
      0 0 24px 8px rgba(11, 255, 221, 0.35);
  }
  50% {
    box-shadow:
      4px 0 10px 2px rgba(20, 255, 236, 0.8),
      -4px 0 20px 4px rgba(11, 255, 221, 0.6),
      8px 0 30px 8px rgba(11, 255, 221, 0.4);
  }
  100% {
    box-shadow:
      0 0 8px 2px rgba(20, 255, 236, 0.75),
      0 0 16px 4px rgba(11, 255, 221, 0.55),
      0 0 24px 8px rgba(11, 255, 221, 0.35);
  }
}

/*----------------------------------
トップページ
----------------------------------*/
.member-card-container {
  display          : flex; /* 中身をレイアウトする準備 */
  justify-content  : center; /* 横方向の中央寄せ */
  margin           : 40px 0; /* 上下に 40px の余白（<br>の代わり） */
}

.member-card-container img {
  border-radius    : 8%; /* 指定の角丸 */
  height           : auto; /* 比率を維持 */
  box-shadow       : 0 4px 15px rgba(0,0,0,0.3); /* せっかくなので黒基調に合う影を */
}

/* プロフィール全体コンテナ */
.profile-card {
  display          : flex;
  align-items      : center;
  background       : #2a2a2a; /* 深みのあるグレー */
  border           : 1px solid #444;
  border-radius    : 12px;
  padding          : 25px;
  width            : 770px;
  box-shadow       : 0 8px 24px rgba(0,0,0,0.5);
  color            : #ffffff;
  font-family      : 'Helvetica Neue', Arial, sans-serif;
}

/* 左側：アバターとレベル */
.profile-left {
  flex             : 0 0 200px;
  display          : flex;
  flex-direction   : column;
  align-items      : center;
  border-right     : 1px solid #444;
  margin-right     : 25px;
}

/* 右側：詳細情報 */
.profile-right {
  flex             : 1;
}

.info-row {
  display          : flex;
  margin-bottom    : 12px;
  align-items      : center;
  white-space      : nowrap; /* 行全体の折り返しを禁止 */
  justify-content  : flex-start; /* 左寄せ */
}

.info-label {
  width            : 180px;
  color            : #BDBDBD; /* ラベルは少し暗めに */
  font-size        : 13px;
  text-transform   : uppercase;
  letter-spacing   : 1px;
  flex-shrink      : 0; /* ラベルが潰れないように固定 */
  margin-right     : 20px; /* ラベルと値の間に隙間を作る */
}

.info-value {
  font-size        : 18px;
  font-weight      : 500;
  color            : #ffffff;
}

/* 特別の強調（レベルやランク） */
.highlight-text {
  color            : #2c7c7d; /* ウルリカ・ティール */
  font-weight      : bold;
}

/* ニュースも日記も、あらゆるセクションで使い回す共通ヘッダー */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 820px;
  margin: 40px auto 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #444;
}

.section-title {
  margin: 0;
  font-size: 20px;
  color: #ffffff;
  letter-spacing  : 1px;
  font-family     : 'Helvetica Neue', Arial, sans-serif;
}

.section-update {
  font-size       : 13px;
  font-weight     : bold;
  color           : #ff4d4d; /* 統一した「更新色」 */
  letter-spacing  : 0.5px;
}

.news-item {
  display         : flex;
  align-items     : center;
  padding         : 15px;
  background      : #2a2a2a; /* 背景を少し深めに */
  border-bottom   : 1px solid #333;
  text-decoration : none;
  transition      : all 0.3s ease;
  width           : 820px;
  box-sizing      : border-box;
}

.news-item:hover {
  background      : #333;
  transform       : translateX(5px); /* ホバーで少し右に動く演出 */
}

/* 画像を丸くする魔法 */
.news-img {
  flex-shrink     : 0;
  width           : 80px;  /* 縦横を同じにする */
  height          : 80px;
  overflow        : hidden;
  border-radius   : 50%; /* 正円にする */
  border          : 2px solid #04B4AE; /* ウルリカ・ティールの縁取り */
  box-shadow      : 0 0 10px rgba(4, 180, 174, 0.4); /* ほのかな発光 */
}

.news-img img {
  width           : 100%;
  height          : 100%;
  object-fit      : cover; /* 画像が歪まないように中央で切り抜き */
}

.news-date-box {
  width           : 140px;
  padding         : 0 20px;
  color           : #BDBDBD;
}

.news-info {
  flex            : 1;
}

.news-info .category {
  font-size       : 11px;
  color           : #04B4AE;
  font-weight     : bold;
}

.news-info .title {
  color           : #ffffff;
  font-weight     : 500;
  font-size       : 16px;
  margin-top      : 4px;
}

/*----------------------------------
ニューススページ / 特典アイコンページ
----------------------------------*/
:root {
  --accent-color  : #14ffec;
  --glass-bg      : rgba(11, 59, 57, 0.4);
  --glass-border  : rgba(20, 255, 236, 0.2);
  --text-main     : #FAFAFA;
  --text-sub      : rgba(250, 250, 250, 0.6);
}

/* 区切り線のモダンデザイン */
.hr-modern {
  border          : none;
  height          : 1px;
  margin          : 40px auto;
  width           : 90%;
  position        : relative;
  /* Ulrica(ピンク)とOrca(エメラルド)が溶け合うグラデーション */
  background      : linear-gradient(to right,
      transparent,
      rgba(255, 182, 193, 0.5) 20%,
      #FAFAFA 50%,
      rgba(20, 255, 236, 0.5) 80%,
      transparent
  );
  overflow        : visible;
}

.hr-modern::after {
  /* 中央に二人を示すロゴのようなアイコン */
  content          : '✧';
  display          : inline-block;
  position         : absolute;
  left             : 50%;
  top              : 50%;
  transform        : translate(-50%, -50%);
  padding          : 0 15px;
  background       : #071418; /* 背景色と合わせる */
  color            : #FAFAFA;
  font-size        : 18px;
  text-shadow      : 0 0 10px rgba(255, 255, 255, 0.8);
  letter-spacing   : 0;
}

/* カテゴリメニューのホバー演出 */
.news-category {
  text-align       : center;
  margin           : 30px 0;
}

.news-category a:hover {
  opacity          : 0.7;
  filter           : drop-shadow(0 0 5px #fff);
}

/* インデックスと共通のデザイン */
.news-container {
  width            : 820px;
  margin           : 0 auto;
}

.news-item {
  display          : flex;
  align-items      : center;
  padding          : 15px;
  background       : #2a2a2a;
  border-bottom    : 1px solid #333;
  text-decoration  : none;
  transition       : all 0.3s ease;
  width            : 820px;
  box-sizing       : border-box;
}

.news-item:hover {
  background      : #333;
  transform       : translateX(5px);
}

.news-img {
  flex-shrink     : 0;
  width           : 80px;
  height          : 80px;
  overflow        : hidden;
  border-radius   : 50%;
  border          : 2px solid #04B4AE;
  box-shadow      : 0 0 10px rgba(4, 180, 174, 0.4);
}

.news-img img {
  width           : 100%;
  height          : 100%;
  object-fit      : cover;
}

.news-date-box {
  width           : 140px;
  padding         : 0 20px;
  color           : #BDBDBD;
  display         : flex;
  flex-direction  : column;
  font-size       : 14px;
}

.news-info {
  flex            : 1;
}

.news-info .category {
  font-size       : 11px;
  color           : #04B4AE;
  font-weight     : bold;
}

.news-info .title {
  color           : #ffffff;
  font-weight     : 500;
  font-size       : 16px;
  margin-top      : 4px;
}

/* 記事詳細コンテナ */
.article-detail-box {
  background      : rgba(255, 255, 255, 0.03); /* 非常に淡い透かし */
  padding         : 40px;
  border-radius   : 4px;
  border          : 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom   : 40px;
}

/* 日付 */
.article-meta {
  color           : #999;
  font-size       : 14px;
  letter-spacing  : 0.1em;
  margin-bottom   : 10px;
}

/* タイトル */
.article-title {
  font-size       : 24px;
  font-weight     : bold;
  color           : #ffffff;
  line-height     : 1.4;
  margin-bottom   : 20px;
}

/* 区切り線 */
.article-hr {
  border          : 0;
  height          : 1px;
  background      : linear-gradient(to right, #04B4AE, transparent);
  margin          : 20px 0 40px;
}

/* 本文エリア */
.article-body {
  font-size       : 16px;
  line-height     : 2; /* 読みやすい行間 */
  color           : #FAFAFA;
  letter-spacing  : 0.03em;
}

/* 本文内の画像などへの対応 */
.article-body img {
  max-width       : 100%;
  height          : auto;
  border-radius   : 4px;
  margin          : 20px 0;
}

/* 下部ボタンエリア */
.article-footer {
  margin-top      : 60px;
  padding-top     : 20px;
  border-top      : 1px solid #333;
  text-align      : center;
}

/* 戻るボタンのカスタマイズ */
.btn-back {
  display         : inline-block;
  padding         : 12px 40px;
  background      : transparent;
  border          : 1px solid #444;
  color           : #ccc;
  text-decoration : none;
  font-size       : 14px;
  transition      : all 0.3s ease;
  cursor          : pointer;
}

.btn-back:hover {
  border-color    : #04B4AE;
  color           : #04B4AE;
  background      : rgba(4, 180, 174, 0.05);
  box-shadow      : 0 0 15px rgba(4, 180, 174, 0.2);
}

.btn-back {
  display         : inline-block;
  padding         : 12px 40px;
  background      : transparent; /* 背景を透明に */
  border          : 1px solid #444;   /* 枠線を明示 */
  color           : #ccc;
  text-decoration : none;
  font-size       : 14px;
  font-weight     : bold;
  letter-spacing  : 2px;
  transition      : all 0.3s ease;
  cursor          : pointer;
  outline         : none; /* クリック時の青い枠を消す */
  appearance      : none; /* ブラウザ規定のスタイルをリセット */
}

.btn-back:hover {
  border-color    : #04B4AE;
  color           : #04B4AE;
  background      : rgba(4, 180, 174, 0.05);
  box-shadow      : 0 0 15px rgba(4, 180, 174, 0.2);
}

/*----------------------------------
日記スページ
----------------------------------*/
:root {
/* --- オルカ様のエメラルド（デフォルト） --- */
--accent-color-orca   : #14ffec;
--glass-bg-orca       : rgba(11, 59, 57, 0.4);
--glass-border-orca   : rgba(20, 255, 236, 0.2);
--btn-bg-orca-1       : #0b3b39;
--btn-bg-orca-2       : #1b7565;

/* --- ウルリカ様の情熱ピンク --- */
--accent-color-ulrica : #ff85a1;
--glass-bg-ulrica     : rgba(61, 13, 35, 0.4);
--glass-border-ulrica : rgba(255, 133, 161, 0.3);
--btn-bg-ulrica-1     : #3d0d23;
--btn-bg-ulrica-2     : #751b3d;


--text-sub-diary      : rgba(250, 250, 250, 0.6);
}

/* ダイアリー本体（色可変設計）*/
.diary-card {
  /* デフォルトはオルカ様の色をセット */
  --current-accent    : var(--accent-color-orca);
  --current-bg        : var(--glass-bg-orca);
  --current-border    : var(--glass-border-orca);
  --current-btn-1     : var(--btn-bg-orca-1);
  --current-btn-2     : var(--btn-bg-orca-2);

  background          : var(--current-bg);
  backdrop-filter     : blur(10px);
  border              : 1px solid var(--current-border);
  border-radius       : 20px;
  overflow            : hidden;
  margin-bottom       : 60px;
  box-shadow          : 0 10px 30px rgba(0,0,0,0.5);
  transition          : 0.5s ease; /* 色が切り替わるときに少しフワッとさせる（任意） */
}

/* ウルリカ様の日記だった場合（クラスが付与されたとき）の上書き */
.diary-card.is-ulrica {
  --current-accent    : var(--accent-color-ulrica);
  --current-bg        : var(--glass-bg-ulrica);
  --current-border    : var(--glass-border-ulrica);
  --current-btn-1     : var(--btn-bg-ulrica-1);
  --current-btn-2     : var(--btn-bg-ulrica-2);

  box-shadow          : 0 10px 30px rgba(255, 133, 161, 0.15); /* 淡いピンクのオーラ */
}

/* 以下、変数(--current-***)を使って色を指定 */
.diary-main {
  padding             : 45px;
  position            : relative;
}

.diary-header {
  border-bottom       : 1px solid var(--current-border);
  padding-bottom      : 20px;
  margin-bottom       : 30px;
}

.diary-title {
  font-size           : 24px;
  font-weight         : bold;
  color: var(--current-accent);
  display             : block;
  margin-bottom       : 10px;
  letter-spacing      : 0.1em;
}

.diary-date {
  font-size           : 13px;
  color               : var(--text-sub-diary);
}

.diary-content-area {
  line-height         : 2.2;
  font-size           : 15px;
  letter-spacing      : 0.05em;
  color               : #e0f2f1;
  margin-bottom       : 40px;
}

.diary-meta-info {
  display             : flex;
  align-items         : center;
  gap                 : 15px;
  font-size           : 13px;
  color               : var(--text-sub-diary);
}

.diary-author {
  font-weight         : bold;
  color               : var(--current-accent); /* 著者によってエメラルドかピンクに変わる */
  letter-spacing      : 0.05em;
}

/* --- 返信セクション --- */
.chat-row-diary {
  display             : flex;
  align-items         : flex-start;
  gap                 : 15px;
  margin              : 35px 0;
}

.chat-face-diary div {
  width               : 55px;
  height              : 55px;
  border-radius       : 50%;
  background-size     : cover;
  background-position : center;
  transition          : 0.3s;
}

.chat-says-diary {
  position            : relative;
  padding             : 18px 22px;
  border-radius       : 15px;
  flex-grow           : 1;
  box-sizing          : border-box;
  box-shadow          : 0 4px 15px rgba(0,0,0,0.2);
}

/* 三角（尻尾）を完全に排除 */
.chat-says-diary::before, .chat-says-diary::after {
  display             : none !important;
}

.level-badge-diary {
  display             : inline-block;
  padding             : 2px 8px;
  border-radius       : 100px;
  font-size           : 10px;
  background          : rgba(0,0,0,0.1);
  margin-right        : 8px;
  border              : 1px solid rgba(255,255,255,0.2);
}

/* --- 神域専用演出 --- */
@keyframes divine-flow {
  0% { transform: translate(0, 0); }
  100% { transform: translate(100px, 100px); }
}

@keyframes flash-swipe {
  0% { left: -150%; }
  25% { left: 150%; }
  100% { left: 150%; }
}

.lev3-divine-bubble {
  position            : relative;
  overflow            : hidden !important;
  z-index             : 1;
}

.lev3-divine-bubble-inner-flow {
  position            : absolute;
  top                 : -100%;
  left                : -100%;
  width               : 300%;
  height              : 300%;
  background          : repeating-linear-gradient(45deg, transparent, transparent 100px, rgba(255, 215, 0, 0.08) 110px, rgba(255, 215, 0, 0.08) 120px);
  animation           : divine-flow 8s infinite linear;
  pointer-events      : none; z-index: -1;
}

/* 閃光（尻尾を消したので個別に定義） */
.lev3-divine-bubble-flash {
  position            : absolute;
  top                 : 0;
  left                : -150%;
  width               : 150%;
  height              : 100%;
  background          : linear-gradient(90deg, transparent, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 70%, transparent);
  animation           : flash-swipe 4s infinite ease-in-out;
  z-index             : 2; pointer-events: none;
}

/* フォーム周りも連動して色が変わるように変数化 */
.reply-form-container {
  margin-top          : 40px;
  padding             : 25px;
  background          : rgba(255,255,255,0.03);
  border-radius       : 15px;
  border              : 1px dotted var(--current-border);
}

.m-form-textarea2 {
  width               : 100%;
  height              : 80px;
  background          : rgba(0,0,0,0.4);
  color               : #fff;
  border              : 1px solid var(--current-border);
  border-radius       : 10px;
  padding             : 15px;
  box-sizing          : border-box;
  resize              : none;
}

.button0 {
  background          : linear-gradient(135deg, var(--current-btn-1) 0%, var(--current-btn-2) 100%);
  color               : #fff;
  border              : 1px solid var(--current-accent);
  padding             : 10px 30px;
  border-radius       : 100px;
  cursor              : pointer;
  transition          : 0.3s;
}

/*----------------------------------
コミュニティスページ
----------------------------------*/
.chat-wrapper {
  max-width           : 800px;
  margin              : 0 auto;
  padding             : 20px 15px;
}

/* アイコン共通設定 */
.icon-base {
  width               : 50px;
  height              : 50px;
  flex-shrink         : 0;
  margin              : 0 12px;
  background-size     : cover;
  background-position : center;
  border-radius       : 50%;
  background-repeat   : no-repeat;
}

/* ランク別デフォルト画像の設定 */
.defo-lev1 {
  background-image    : url('img_users/defo_icon1.jpg');
  border              : 2px solid #A4A4A4;
}

.defo-lev2 {
  background-image    : url('img_users/defo_icon2.jpg');
  border              : 2px solid #ffd700;
}

.defo-lev3 {
  background-image    : url('img_users/defo_icon3.jpg');
  border              : 2px solid #ffffff;
  box-shadow          : 0 0 10px #fff;
}

/* レイアウト構造 */
.chat-row {
  display             : flex;
  margin-bottom       : 25px;
  width               : 100%;
  align-items         : flex-end;
}

.chat-row.right {
  justify-content     : flex-end;
}

.chat-body {
  max-width           : 75%;
  display             : flex;
  flex-direction      : column;
}

.chat-row.right .chat-body {
  align-items         : flex-end;
}

/* ヘッダー */
.chat-header {
  display             : flex;
  align-items         : center;
  gap                 : 8px;
  margin-bottom       : 5px;
  font-size           : 0.8rem;
  color               : #A4A4A4;
}

.chat-row.right .chat-header {
  flex-direction      : row-reverse;
}

.chat-name {
  font-weight         : bold;
  text-shadow         : 1px 1px 2px rgba(0,0,0,0.8);
}

.chat-lv {
  padding             : 2px 7px;
  border-radius       : 4px;
  background          : rgba(34,34,34,0.8);
  color               : #A4A4A4;
  font-weight         : bold;
}

.chat-lv.special-lv {
  background          : #ffffff !important;
  color               : #050f12 !important;
  box-shadow          : 0 0 10px #fff;
}

/* 吹き出し（グラスモーフィズム） */
.chat-bubble {
  padding             : 14px 20px;
  border-radius       : 18px;
  font-size           : 0.95rem;
  line-height         : 1.6;
  backdrop-filter     : blur(4px);
  position            : relative;
  overflow            : hidden;
}

.chat-row.left .chat-bubble {
  background                 : rgba(255, 255, 255, 0.08);
  border                     : 1px solid rgba(255, 255, 255, 0.1);
  border-bottom-left-radius  : 4px;
}

.chat-row.right .chat-bubble {
  background                 : rgba(20, 255, 236, 0.1);
  border                     : 1px solid rgba(20, 255, 236, 0.2);
  border-bottom-right-radius : 4px;
}

/* --- 最上位クラス(lev3) 専用：白と紫の二重神域枠 --- */
/* --- 最上位クラス(lev3) アイコンとバブルの神域装飾 --- */

/* アイコンの書き換え */
[class*="user-pic-lev3"], .defo-lev3 {
  width               : 50px;
  height              : 50px;
  flex-shrink         : 0;
  margin              : 0 12px;
  background-size     : cover;
  background-position : center;
  border-radius       : 50%;
  background-repeat   : no-repeat;
  /* ↓ここが新しい「白×紫」の設定 */
  border              : 2px solid #ffffff !important;
  outline             : 3px solid #bc13fe !important;
  outline-offset      : 1px;
  box-shadow          : 0 0 10px rgba(255, 255, 255, 0.5), 0 0 25px rgba(188, 19, 254, 0.8) !important;
  transform           : scale(1.15);
  z-index             : 10;
  position            : relative;
}

/* 吹き出しの書き換え */
.chat-bubble.lev3 {
  background          : linear-gradient(135deg, rgba(10, 5, 20, 0.95), rgba(30, 15, 60, 0.9)) !important;
  /* ↓ここが新しい「白×紫」の設定 */
  border              : 2px solid #ffffff !important;
  outline             : 3px solid #bc13fe !important;
  outline-offset      : 1px;
  box-shadow          : 0 0 15px rgba(255, 255, 255, 0.4), 0 0 30px rgba(188, 19, 254, 0.6) !important;
  position            : relative;
  overflow            : hidden;
  margin              : 5px;
}

/* アイコンの枠も白×紫に変更 */
.user-pic-lev3-row, .defo-lev3 {
  border              : 2px solid #ffffff !important;
  outline             : 3px solid #bc13fe !important;
  outline-offset      : 1px;
  box-shadow          : 0 0 20px rgba(188, 19, 254, 0.7) !important;
  transform           : scale(1.1) translateY(-5px); /* 少し浮かせて存在感を出す */
  z-index             : 10;
}

/* 吹き出し内を流れる「黄金の粒子」と「光の筋」 */
.chat-bubble.lev3::before {
  content             : "";
  position            : absolute;
  top                 : -100%;
  left                : -100%;
  width               : 300%;
  height              : 300%;
  /* 黄金の粒子が流れるようなストライプ */
  background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 100px,
      rgba(255, 215, 0, 0.05) 110px,
      rgba(255, 215, 0, 0.05) 120px
  );
  animation           : divine-flow 8s infinite linear;
  pointer-events      : none;
}

/* 表面を走る閃光（スキャンライン） */
.chat-bubble.lev3::after {
  content             : "";
  position            : absolute;
  top                 : 0;
  left                : -100%;
  width               : 100%;
  height              : 100%;
  background          : linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
  );
  animation           : flash-swipe 3s infinite ease-in-out;
}

@keyframes divine-flow {
  0% { transform: translate(0, 0); }
  100% { transform: translate(100px, 100px); }
}

@keyframes flash-swipe {
  0% { left: -100%; }
  20% { left: 150%; }
  100% { left: 150%; }
}

/* アイコンの枠もさらに豪華に（lev3専用） */
.user-pic-lev3-row, .defo-lev3 {
  border              : 3px solid #fff !important;
  /*box-shadow          : 0 0 15px #ffd700, inset 0 0 10px #ffd700 !important;*/
  transform           : scale(1.1); /* 少しだけ大きくして存在感を出す */
}

/* 削除ボタン */
.delete-form {
  margin              : 0;
  display             : flex;
  align-items         : center;
}

.delete-btn-header {
  background          : transparent;
  border              : 1px solid rgba(164, 164, 164, 0.3);
  color               : #888;
  padding             : 2px 8px;
  border-radius       : 12px;
  font-size           : 0.7rem;
  cursor              : pointer;
  transition          : 0.3s;
}

.delete-btn-header:hover {
  color               : #ff4d4d;
  border-color        : #ff4d4d;
  background          : rgba(255,77,77,0.1);
}

/* 送信部 */
/* 入力欄とボタンを包む豪華なコンテナ */
.sanctuary-container {
  display             : flex;
  align-items         : center;
  width               : 95%;
  max-width           : 600px;
  margin              : 0px auto;
  background          : rgba(10, 5, 20, 0.95); /* 深い闇 */
  padding             : 4px 15px;
  border-radius       : 40px;

  /* 白×紫の二重境界線（アイコンとお揃い） */
  border              : 2px solid #ffffff !important;
  outline             : 3px solid #14ffec !important;
  outline-offset      : 1px;

  box-shadow          : 0 0 20px gba(20, 255, 236, 0.6);
  backdrop-filter     : blur(8px);
}

/* 入力テキストエリアの装飾 */
.m-form-text {
  flex                : 1;
  background          : transparent !important;
  border              : none !important;
  color               : #ffffff !important;
  font-size           : 16px !important;
  padding             : 12px !important;
  outline             : none !important;
  caret-color         : #14ffec; /* カーソルも紫 */
}

.m-form-text::placeholder {
  color               : rgba(255, 255, 255, 0.3);
}

/* 送信ボタンのホバー演出 */
.send-btn-wrapper {
  transition          : transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.send-btn-wrapper:hover {
  transform           : scale(1.1) rotate(5deg);
  filter              : drop-shadow(0 0 8px #14ffec);
}

/*----------------------------------
ライブ配信ページ (streaming2_main.phpに直書き)
----------------------------------*/

/*----------------------------------
ステータスページ
----------------------------------*/
.uluz-dashboard-dark {
  width           : 820px;
  margin          : 0 auto;
  font-family     : "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  color           : #e0e0e0;
  padding         : 20px 0;
}

/* セクション分け */
.status-section {
  background      : #1e1e1e; /* カードの背景 */
  border          : 1px solid #333;
  border-radius   : 16px;
  margin-bottom   : 30px;
  overflow        : hidden;
  box-shadow      : 0 10px 30px rgba(0,0,0,0.5);
}

.section-header-title {
  background      : #252525;
  padding         : 15px 25px;
  font-weight     : bold;
  font-size       : 0.85rem;
  color           : #888;
  border-bottom   : 1px solid #333;
  letter-spacing  : 0.2em;
  text-transform  : uppercase;
}

/* 各行の設定 */
.status-row {
    display       : flex;
    align-items   : center;
    padding       : 20px 25px;
    border-bottom : 1px solid #2a2a2a;
    transition: background 0.3s;
}

.status-row:hover {
  background      : #252525;
}

.status-row:last-child {
  border-bottom   : none;
}

/* ラベル */
.status-label {
  flex            : 1;
  color           : #bbb;
  font-size       : 1rem;
  font-weight     : 500;
}

/* ★数字の部分：暗い背景で最も映える発光色★ */
.status-value {
  flex            : 0 0 260px;
  text-align      : right;
  font-family     : 'Verdana', sans-serif;
}
.main-num {
  font-size       : 1.4rem;
  font-weight     : 800;
  color           : #ffffff; /* 純白にしてコントラストを最大に */
  text-shadow     : 0 0 10px rgba(255,255,255,0.2); /* わずかな発光感 */
  line-height     : 1;
}
.unit-text {
  font-size       : 0.9rem;
  font-weight     : bold;
  margin-left     : 6px;
  color           : #888;
}

/* 経過日数のテキスト：少し青白く知的な印象 */
.duration-text {
  font-size       : 1.0rem;
  font-weight     : 700;
  color           : #aaddff;
  text-shadow     : 0 0 8px rgba(170,221,255,0.3);
}

/* 説明文 */
.status-desc {
  flex            : 0 0 200px;
  font-size       : 0.75rem;
  color           : #666;
  padding-left    : 20px;
  border-left     : 1px solid #333;
  margin-left     : 20px;
}

/* ランク別アクセント */
.rank-s { border-left: 4px solid #000000; } /* Blackは白で際立たせる */
.rank-b { border-left: 4px solid #d4af37; } /* Gold */
.rank-a { border-left: 4px solid #8e8e8e; } /* Silver */

/*----------------------------------
プロフィール(会員情報)ページ
----------------------------------*/
.level-container1 {
  width            : 60px;
  height           : 20px;
  border-radius    : 5px;
  background-color : #d7ebfe;
  color            : #000000; /* レベル1の文字色は黒 */
  display          : flex;
  align-items      : center;
  justify-content  : center;
  font-size        : 0.8rem;
  font-weight      : bold;
}

.level-container2 {
  width            : 60px;
  height           : 20px;
  border-radius    : 5px;
  background-color : #ffd700;
  color            : #000000; /* レベル2の文字色は黒 */
  display          : flex;
  align-items      : center;
  justify-content  : center;
  font-size        : 0.8rem;
  font-weight      : bold;
}

.level-container3 {
  width            : 60px;
  height           : 20px;
  border-radius    : 5px;
  background-color : #000000;
  color            : #ffffff; /* レベル3の文字色は白 */
  display          : flex;
  align-items      : center;
  justify-content  : center;
  font-size        : 0.8rem;
  font-weight      : bold;
  border           : 1px solid rgba(255, 255, 255, 0.2); /* 今回の背景は暗いため、黒同化を防ぐ微細な光の輪郭を添えます */
  box-shadow       : 0 0 10px rgba(0, 0, 0, 0.5);
}

.profile-wrapper {
  max-width        : 900px;
  margin           : 0 auto;
  color            : #FAFAFA;
}

/* --- アイコンセクション（上部） --- */
.profile-icon-card {
  background       : rgba(11, 59, 57, 0.4);
  backdrop-filter  : blur(10px);
  border           : 1px solid rgba(20, 255, 236, 0.2);
  border-radius    : 15px;
  padding          : 30px;
  margin-bottom    : 30px;
  display          : flex;
  flex-direction   : column;
  align-items      : center;
  justify-content  : center;
  box-shadow       : 0 10px 30px rgba(0,0,0,0.5);
}

.profile-icon-info {
  text-align       : center;
  margin-bottom    : 20px;
}

.profile-icon-info .rank-name {
  font-size        : 0.85rem;
  color            : rgba(255, 255, 255, 0.7);
  margin           : 5px 0;
}

.profile-icon-info .user-name {
  font-size        : 1.2rem;
  font-weight      : bold;
  color            : #14ffec;
  letter-spacing   : 0.05em;
}

/* --- 入力フォームセクション（下部） --- */
.profile-form-card {
  background       : rgba(5, 15, 18, 0.6);
  backdrop-filter  : blur(10px);
  border           : 1px solid rgba(20, 255, 236, 0.15);
  border-radius    : 15px;
  padding          : 20px 40px;
  box-shadow       : 0 10px 30px rgba(0,0,0,0.5);
}

.modern-table {
  width            : 100%;
  border-collapse  : collapse;
}

.modern-table th,
.modern-table td {
  padding          : 25px 15px;
  border-bottom    : 1px solid rgba(255, 255, 255, 0.05);
  vertical-align   : middle;
  white-space      : nowrap; /* セル内での自動改行を禁止 */
}

.modern-table tr:last-child th,
.modern-table tr:last-child td {
  border-bottom    : none;
}

/* ラベル側（左） */
.modern-table th {
  width            : 25%;
  text-align       : left;
  font-weight      : normal;
  color            : #14ffec; /* オルカ・エメラルド */
  letter-spacing   : 0.05em;
}

.hint-text {
  display          : block;
  font-size        : 0.75rem;
  color            : rgba(255, 255, 255, 0.5);
  margin-top       : 5px;
}

/* フォーム部品の共通デザイン */
.modern-input, .modern-select {
  background       : rgba(0, 0, 0, 0.3);
  border           : 1px solid rgba(20, 255, 236, 0.3);
  color            : #fff;
  padding          : 12px 15px;
  border-radius    : 8px;
  font-size        : 15px;
  transition       : 0.3s ease;
  width            : 100%;
  box-sizing       : border-box;
}

/* 郵便番号など短い入力欄用 */
.modern-input.short {
  width            : auto;
  min-width        : 80px;
  display          : inline-block;
}

.modern-input.medium {
  width            : 60%;
}

.modern-input:focus, .modern-select:focus {
  outline          : none;
  border-color     : #14ffec;
  box-shadow       : 0 0 10px rgba(20, 255, 236, 0.4);
  background       : rgba(0, 0, 0, 0.5);
}

.modern-select {
  width            : auto;
  padding-right    : 30px;
  cursor           : pointer;
}

/* 強調テキスト（ウルリカ・ピンクなど） */
.highlight-pink {
  color            : #ff85a1;
  font-weight      : bold;
  font-size        : 0.9rem;
}

.highlight-red {
  color            : #ff85a1; /* 赤ではなくウルリカピンクに統一して美しく */
}

/* 住所入力周りの余白 */
.address-group {
  margin-bottom    : 15px;
}
.address-group:last-child {
  margin-bottom    : 0;
}