:root {
    color-scheme: light dark;
}
body {
    margin: 0;
    background-color: #e0f7fa;
    color: #00344d;
    font-size: 16px;
}

body {
    background-color: light-dark(#e0f7fa, #e0f7fa);
    color: light-dark(#00344d, #00344d);
}

form input,
form textarea,
form select,
form button {
    color-scheme: light;
}

a {
    color: #0097a7;
    color: light-dark(
        #0097a7,
        #0097a7    );
}
a:visited {
    color: #0097a7;
    color: light-dark(
        #0097a7,
        #0097a7    );
}
a:active {
    color: #0097a7;
    color: light-dark(
        #0097a7,
        #0097a7    );
}

.quote-text {
    color: #4f7f8e;
    color: light-dark(
        #4f7f8e,
        #4f7f8e    );
}

.comment-text {
    color: #4cb2d6;
    color: light-dark(
        #4cb2d6,
        #4cb2d6    );
}

.note-text {
    color: #ff9800;
    color: light-dark(
        #ff9800,
        #ff9800    );
}

.name {
    color: #00bcd4;
    color: light-dark(
        #00bcd4,
        #00bcd4    );
}

.cap {
    color: #00bcd4;
    color: light-dark(
        #00bcd4,
        #00bcd4    );
}

.deleted-message {
    color: #ff0000;
    color: light-dark(
        #ff0000,
        #ff0000    );
}

.error-message {
    color: #ff0000;
    color: light-dark(
        #ff0000,
        #ff0000    );
}

hr {
    border: none;
    border-top: 1px solid #5fc0c8;
    border-top-color: light-dark(
        #5fc0c8,
        #5fc0c8    );
}

.embed-post {
    background-color: #e0f7fa;
    color: #00344d;
    background-color: light-dark(
        #e0f7fa,
        #e0f7fa    );
    color: light-dark(
        #00344d,
        #00344d    );
}

mark {
    background-color: transparent;
    color: inherit;
    margin: 0 5px;
}

/* パンくずリスト */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    list-style: none;
    padding-left: 0;
}

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

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding: 0 0.5rem;
    content: ">";
    vertical-align: middle;

    color: #00344d;
    color: light-dark(
        #00344d,
        #00344d    );
}

/* 最後のパンくずリスト項目のリンクを無効にする */
.breadcrumb-item:last-child a {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
}

/* スマートフォン用スタイル */
@media (max-width: 640px) {
    .embed-contents {
        position: relative;
        width: 100%;
        max-height: 200px;
        overflow: hidden;
    }
    .embed-instagram {
        width: 100%;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-video iframe {
        width: 100%;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-youtube iframe {
        width: 100%;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-youtube {
        width: 100%;
        height: 360px !important;
        max-height: 360px !important;
    }

    .img-thumbnail, .embed-youtube-img, .embed-image, .video-thumbnail {
        max-width: 128px;
        max-height: auto;
    }
}

/* パソコン用スタイル */
@media (min-width: 641px) {
    .embed-contents {
        position: relative;
        width: 100%;
        max-height: 350px;
        overflow: hidden;
    }

    .embed-instagram {
        width: 600px;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-video iframe {
        width: 600px;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-youtube iframe {
        width: 600px;
        height: 360px !important;
        max-height: 360px !important;
    }

    .img-thumbnail, .embed-youtube-img, .embed-image, .video-thumbnail {
        max-width: 128px;
        max-height: auto;
        cursor: pointer;
    }
}

img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

img {
    max-height: 512px;
}

@media (max-width: 1024px) { 
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: fadeOut 0.5s ease forwards;
  }

  ::view-transition-new(root) {
    animation: fadeIn 0.5s ease forwards;
  }


  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

* { font-family: "Hiragino Kaku Gothic ProN", "Osaka", Meiryo, "MS UI Gothic", "ＭＳ Ｐゴシック", sans-serif; }
body { margin: 0 0 0 5px; }
  /* 行間を詰める共通クラス */
  .threads {
    margin-left: 4px;
    margin-top: 10px;
}
  .notice-compact {
    font-size: .6rem;      /* 0.6rem = 9.6px 相当（16px 基準） */
    line-height: 1.2;      /* ← 行間を明示的に小さめに */
  }

  .notice-compact .title {
    color: #d9333f;        /* 見出しの赤文字 */
    font-weight: bold;
  }

  /* 長文が折り返しても行間が均一になるように */
  .notice-compact u { text-decoration-thickness: .05em; }

  .line-text {
    margin:0px;
  }

.buruburu {
    display: inline-block;
    animation: hurueru .1s infinite;
}

@keyframes hurueru {
    0% { transform: translate(0px, 0px) rotateZ(0deg); }
    25% { transform: translate(2px, 2px) rotateZ(1deg); }
    50% { transform: translate(0px, 2px) rotateZ(0deg); }
    75% { transform: translate(2px, 0px) rotateZ(-1deg); }
    100% { transform: translate(0px, 0px) rotateZ(0deg); }
}
@media (max-width: 1024px) { 
  @view-transition {
    navigation: none;
  }
}




/* 1) 流れるレインボーグラデーション ------------------- */
.tag_rainbow{
  position:relative;
  background:linear-gradient(90deg,#ff4d4d,#ffcc00,#33cc33,#3399ff,#9933ff,#ff4d4d);
  background-size:600% 100%;
  -webkit-background-clip:text;
  color:transparent;
  animation:rainbow_wave 8s linear infinite;
}
@keyframes rainbow_wave{
  0%{background-position:0 0;}
  100%{background-position:600% 0;}
}

/* 2) ネオン発光 -------------------------------------- */
.tag_neon{
  color:#39ffff;
  text-shadow:
    0 0 2px  #00e5ff,
    0 0 5px  #00e5ff,
    0 0 8px  #00c3ff,
    0 0 12px #0099ff;
}

/* 3) グリッチ（※ data-content 属性に同じ文字列を入れる） */
.tag_glitch{position:relative;color:#fff;}
.tag_glitch::before,
.tag_glitch::after{
  content:attr(data-content);
  position:absolute;
  left:0;top:0;
  width:100%;
  overflow:hidden;
}
.tag_glitch::before{
  left:2px;
  text-shadow:-2px 0 magenta;
  animation:glitch1 2s infinite ease-in-out alternate-reverse;
}
.tag_glitch::after{
  left:-2px;
  text-shadow:2px 0 cyan;
  animation:glitch2 3s infinite ease-in-out alternate-reverse;
}
@keyframes glitch1{
  0%  {clip-path:inset(0 0 80% 0);}
  20% {clip-path:inset(10% 0 60% 0);}
  40% {clip-path:inset(80% 0 0 0);}
  60% {clip-path:inset(30% 0 50% 0);}
  80% {clip-path:inset(0 0 10% 0);}
  100%{clip-path:inset(70% 0 0 0);}
}
@keyframes glitch2{
  0%  {clip-path:inset(70% 0 0 0);}
  20% {clip-path:inset(0 0 20% 0);}
  40% {clip-path:inset(10% 0 70% 0);}
  60% {clip-path:inset(40% 0 40% 0);}
  80% {clip-path:inset(60% 0 20% 0);}
  100%{clip-path:inset(20% 0 60% 0);}
}

/* 4) ウェーブ（上下揺れ） ----------------------------- */
.tag_wave{display:inline-block;animation:wave 1.5s ease-in-out infinite;}
@keyframes wave{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-6px);}
}

/* 5) 炎のゆらぎ ------------------------------------ */
/* ───────── ベース ───────── */
.tag_fire{
  position:relative;
  display:inline-block;
  font-weight:bold;
  /* ─ 背景を炎グラデーションにして文字にクリップ ─ */
  color:transparent;                       /* 文字自体は透明 */
  background:linear-gradient(
      0deg,
      #fff176  0%,   /* 黄  → 炎の先端 */
      #ffb74d 40%,   /* 橙  */
      #ff7043 60%,   /* 濃橙 */
      #ef5350 80%,   /* 赤  */
      #d32f2f 100%   /* 暗赤→ 炎の根元 */
  );
  background-size:100% 400%;              /* 縦に4倍伸ばす */
  -webkit-background-clip:text;
          background-clip:text;

  /* ─ 点滅（揺らぎ） ─ */
  animation:
    fireScroll   1.2s linear infinite,     /* グラデが上昇 */
    fireFlicker .18s ease-in-out infinite; /* 明滅 */
}

/* ───────── 立体的な光彩（炎のオーラ）───────── */
.tag_fire::after{
  content:attr(data-text);                /* data-text があれば流用 */
  position:absolute;
  inset:0;
  pointer-events:none;
  color:transparent;
  background:inherit;                     /* 同じグラデをコピー */
  background-size:inherit;
  -webkit-background-clip:text;
          background-clip:text;
  filter:blur(4px) brightness(2);         /* ぼかして光らせる */
  mix-blend-mode:screen;                  /* 発光合成でギラッと */
  animation:fireScroll 1.2s linear infinite;
}

/* ───────── キーフレーム ───────── */
/* グラデーションが絶えず上へ流れる */
@keyframes fireScroll{
  0%  {background-position:0   0;}
  100%{background-position:0 -300%;}
}

/* 短周期で明るさ＆サイズが揺らぐ */
@keyframes fireFlicker{
  0%,100%{
    text-shadow:
      0 0 3px  #ff7043,
      0 0 8px  #ff5722,
      0 0 14px #ff1744;
    transform:translateY(0) scale(1);
  }
  50%{
    text-shadow:
      0 0 5px  #ffab40,
      0 0 12px #ff7043,
      0 0 20px #ff5722;
    transform:translateY(-1px) scale(1.04);
  }
}

/* 6) シャドウパルス -------------------------------- */
.tag_shadow_pulse{
  animation:shadow_pulse 2s infinite;
}
@keyframes shadow_pulse{
  0%,100%{text-shadow:0 0 2px currentColor;}
  50%    {text-shadow:0 0 8px currentColor;}
}

/* 7) キラキラ（シマー） ----------------------------- */
.tag_shimmer{position:relative;overflow:hidden;}
.tag_shimmer::after{
  content:'';
  position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.8) 50%,transparent 100%);
  animation:shimmer 2.5s infinite;
}
@keyframes shimmer{
  0%  {left:-100%;}
  100%{left:100%;}
}