:root{
  --bg-texture: url("images/bg-texture.png");
  --bg-size: 32px;

  --icon-top:    "images/icon-top.gif";
  --icon-zakki:  "images/icon-zakki.gif";
  --icon-bbs:    "images/icon-bbs.gif";
  --icon-kiyaku: "images/icon-kiyaku.gif";

  --link-youtube-new: "https://www.youtube.com/@nyamoi_nazu";
  --link-youtube-old: "https://youtube.com/@nyamoi_7z?si=5Lem8Tyag5pe-mbd";
  --link-twitter: "https://x.com/nyamoi_7z?s=21";
  --link-tiktok:  "https://tiktok.com/t/ZS96TnhjrEdB8-nMmKo/";
  --link-marshmallow: "https://marshmallow-qa.com/nb5bkv1w0flc140?t=KNy2cz&utm_medium=url_text&utm_source=promotion";

  --link-hq: "https://d.kuku.lu/gygpgxpms";

  --page-bg-texture: url("images/page-bg-texture.png");
  --page-bg-size: 200px;
  --page-bg-color: #555;
}

.bbs-link-box{
  text-align:center; padding:30px 10px;
}
.bbs-link-btn{
  display:inline-block;
  background:#ff4fa3; color:#fff;
  padding:12px 28px;
  border-radius:0;
  font-size:15px;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.bbs-link-btn:active{ opacity:0.8; }

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; height:100%;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight:300;
  overflow:hidden;
  overscroll-behavior: none;
}
body{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh;
  min-height:100dvh;
  background-image: var(--page-bg-texture);
  background-color: var(--page-bg-color);
  background-repeat: repeat;
  background-position: 0 0;
  background-size: var(--page-bg-size) var(--page-bg-size);
}
a{ color:#3366cc; }
img.placeholder{ display:block; }
.fill-img{ display:block; width:100%; height:100%; object-fit:contain; }

.frame{
  position:relative;
  height:100vh;
  height:100dvh;
  max-height:100vh;
  max-height:100dvh;
  aspect-ratio: 3 / 4;
  width:auto;
  max-width:100vw;
  display:flex;
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 16px rgba(0,0,0,.4);
}
@supports not (aspect-ratio: 3 / 4){
  .frame{ width:75vh; height:100vh; height:100dvh; }
}

.bg-texture-layer{
  position:absolute; inset:0;
  background-image: var(--bg-texture);
  background-repeat:repeat;
  background-position: 0 0;
  background-size: var(--bg-size) var(--bg-size);
  background-color:#dceefb;
}

.sidebar{
  position:relative;
  flex:0 0 26%;
  background:#cfe7f9;
  padding:14px 8px;
  font-size:13px;
  overflow-y:auto;
  border-right:1px solid #a9cfe8;
}
.sidebar h2{
  font-size:13px; color:#666; text-align:center;
  margin:4px 0 10px; font-weight:normal;
}
.nav-list{ list-style:none; margin:0 0 18px; padding:0; }
.nav-item{
  display:flex; align-items:center; gap:6px;
  padding:6px 4px; margin-bottom:6px;
  cursor:pointer; border-radius:0;
  color:#2255bb; text-decoration:underline;
  font-size:14px;
}
.nav-item:hover{ background:rgba(255,255,255,.4); }
.nav-item.active{ background:#fff; text-decoration:none; font-weight:bold; }
.nav-item img.icon{ width:20px; height:20px; object-fit:contain; flex:none; }

.ext-links a{
  display:block; text-align:center; margin-bottom:14px;
  color:#2255bb; text-decoration:underline; font-size:14px;
}
.contact-box{
  text-align:center; font-size:11px; color:#555; line-height:1.7;
  word-break:keep-all; overflow-wrap:normal;
}
.contact-box .nowrap{ display:block; white-space:nowrap; }

.mid-scrollbar{
  position:relative;
  flex:0 0 20px;
  background:#e4e4e4;
  border-right:1px solid #bbb;
  padding:6px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.scrollbar-btn{
  width:14px; height:14px; flex:none;
  background:#fff; border:1px solid #bbb; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  color:#888; font-size:9px; line-height:1; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
  user-select:none;
}
.scrollbar-btn:active{ background:#ddd; }
.scrollbar-track{
  position:relative;
  flex:1 1 auto;
  width:8px;
  margin:6px 0;
  background:#fff;
  border:1px solid #ccc;
  border-radius:0;
  cursor:pointer;
}
.scrollbar-thumb{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:6px;
  height:14px;
  min-height:14px;
  max-height:14px;
  background:#b3b3b3;
  border:1px solid #8f8f8f;
  border-radius:0;
  cursor:grab;
  box-shadow:0 1px 1px rgba(0,0,0,.15);
  transition: top 0.08s ease-out;
}
.scrollbar-thumb:active{ cursor:grabbing; }

.content{
  position:relative;
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
.content::-webkit-scrollbar{ display:none; }
.page{
  display:flex;
  flex-direction:column;
  flex:1 0 auto;
}

h1.page-title{
  color:#ff4fa3;
  font-weight:normal;
  font-size:clamp(20px, 6.2vw, 30px);
  text-align:center;
  margin:4px 0 14px;
  white-space:nowrap;
  word-break:keep-all;
  text-shadow:
    1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff,
    1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

.char-image-wrap{ text-align:center; margin-bottom:6px; }
.char-image{
  width:70%; aspect-ratio:1/1; margin:0 auto;
  background:#f3f3f3; border:2px dashed #bbb;
  display:flex; align-items:center; justify-content:center;
  color:#999; font-size:13px; text-align:center; border-radius:0;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.hq-link{ display:block; text-align:center; margin:6px 0 14px; font-size:13px; }

.counter-row{
  display:flex; align-items:center; justify-content:center;
  gap:6px; flex-wrap:nowrap; margin-bottom:14px;
  overflow-x:auto; max-width:100%;
}
.raycounter-wrap{ flex:none; }
.raycounter-wrap table{ margin:0; }
.counter-caption{ font-size:13px; color:#555; white-space:nowrap; flex:none; }
.counter-warning{ font-size:13px; color:#000; font-weight:300; text-align:center; margin:8px 0 14px; }

.info-box{
  background:#fff; border:1px solid #ddd; border-radius:0;
  padding:14px; margin-bottom:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.info-box h3{ color:#ff4fa3; font-size:18px; margin:0 0 10px; }
.info-box p{ margin:6px 0; font-size:14px; line-height:1.6; color:#333; }

.marquee-box{
  background:#fff94d; margin:0 -14px 16px; padding:10px 0;
  overflow:hidden; white-space:nowrap;
}
.marquee-track{
  display:flex; width:max-content;
  animation: marquee-scroll 14s linear infinite;
}
.marquee-item{
  padding-right:40px; white-space:nowrap;
  font-size:14px; color:#333;
}
@keyframes marquee-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; padding-left:0; }
}

.plain-box{
  background:#fff; border:1px solid #ddd; border-radius:0;
  padding:12px 14px; margin-bottom:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.plain-box h4{ margin:0 0 8px; font-size:13px; color:#777; }

.scroll-area{ max-height:100%; }

.zakki-entry .highlight-tag{
  display:inline-block; background:#fff94d; padding:4px 10px;
  border-radius:0; font-weight:bold; margin:10px 0 6px;
  font-size:15px;
  box-shadow:0 2px 5px rgba(0,0,0,.18);
}
.zakki-entry p{ margin:2px 0 14px; font-size:14px; line-height:1.6; }

/* 掲示板 */
.bbs-placeholder{
  font-size:14px; color:#333; padding:20px 4px; line-height:1.8;
  background:#fff; border:1px solid #ddd; border-radius:0;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.bbs-form-box{
  background:#fff; border:1px solid #ddd; border-radius:0;
  padding:14px; margin-bottom:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.bbs-form-lead{ margin:0 0 10px; font-size:14px; color:#333; text-align:center; }
.bbs-form{ display:flex; flex-direction:column; gap:8px; }
.bbs-input-name,
.bbs-input-body{
  width:100%; box-sizing:border-box;
  border:1px solid #ccc; border-radius:0;
  padding:8px 10px; font-size:14px;
  font-family:inherit; background:#fcfcfc;
}
.bbs-input-body{ min-height:70px; resize:vertical; line-height:1.5; }
.bbs-input-name:focus,
.bbs-input-body:focus{ outline:none; border-color:#ff8fc5; background:#fff; }
.bbs-form-error{ margin:0; font-size:13px; color:#e0356b; text-align:center; }
.bbs-submit-btn{
  align-self:center;
  background:#ff4fa3; color:#fff; border:none; border-radius:0;
  padding:10px 32px; font-size:15px; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.bbs-submit-btn:active{ opacity:0.8; }

.bbs-post{
  background:#fff; border:1px solid #ddd; border-radius:0;
  padding:10px 12px; margin-bottom:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.14);
}
.bbs-post-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:8px; margin-bottom:4px;
}
.bbs-post-name{ font-weight:bold; color:#2255bb; font-size:14px; }
.bbs-post-date{ font-size:11px; color:#999; white-space:nowrap; }
.bbs-post-body{ margin:0; font-size:14px; line-height:1.6; color:#333; word-break:break-word; }

.bbs-pagination{
  display:flex; align-items:center; justify-content:center;
  gap:8px; flex-wrap:wrap;
  margin:16px 0; padding:12px;
  background:#f9f9f9; border:1px solid #ddd; border-radius:0;
  font-size:13px;
}
.bbs-page-link{
  display:inline-block;
  padding:6px 10px; background:#fff; border:1px solid #ccc; border-radius:0;
  color:#2255bb; text-decoration:none; cursor:pointer;
  font-size:13px;
}
.bbs-page-link:hover{ background:#f0f0f0; }
.bbs-page-info{
  font-weight:bold; color:#333; white-space:nowrap;
}

.rule-highlight{
  display:inline-block; background:#fff94d; padding:5px 12px;
  border-radius:0; font-weight:bold; margin:14px 0 8px; font-size:16px;
  box-shadow:0 2px 5px rgba(0,0,0,.18);
}
.rule-list{ margin:0 0 10px; padding-left:1.2em; font-size:13.5px; line-height:1.9; }
.rule-sub h5{ font-size:14px; margin:12px 0 4px; }
.rule-sub p{ font-size:13.5px; margin:2px 0; line-height:1.6; }
.rule-note{
  text-align:center; background:#fff; border:1px solid #ddd; border-radius:0;
  padding:14px; margin-top:16px; margin-bottom:16px; font-weight:bold; font-size:14px; line-height:1.7;
  color:#ff4fa3;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.material-block{ margin-top:18px; margin-bottom:16px; }
.material-title{
  font-size:12.5px; font-weight:normal; color:#333; margin:0 0 8px;
  white-space:nowrap;
}
.material-title a{ font-weight:bold; }
.material-image{
  width:100%; aspect-ratio:4/3; margin:0 auto;
  background:#f3f3f3; border:2px dashed #bbb; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  color:#999; font-size:13px; text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.footer-area{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:nowrap;
  background:#bfe0f5;
  border-top:1px solid #9dc9e8;
  flex:0 0 auto;
  margin:auto -14px -16px;
  padding:6px 10px;
  font-size:10.5px; color:#555;
}
.footer-area .footer-link-text{
  Font-size:9px;
  text-align:center;
  line-height:1.3;
}
.footer-save-text{ white-space:nowrap; flex:none; }
.footer-image{
  width:70px; aspect-ratio:5/1; margin:0; flex:none;
  background:#f3f3f3; border:1px dashed #bbb; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  color:#999; font-size:8px; text-align:center; line-height:1.1;
}