/* =====================================================
   article.css — merged from default.css + blog.css + ui.tabs
   HTML5/CSS3 rewrite, no IE hacks, CSS variables
   ===================================================== */

/* ===== CSS Variables ===== */
:root {
  --link-color: #000099;
  --link-hover: #0099FF;
  --body-bg: url('../img/bg.gif') repeat;
  --sidebar-bg: url('../img/side_bg.gif') repeat;
  --footer-bg: url('../img/footer_bg.jpg') repeat;
  --header-bg: url('../images/title/title01.jpg') no-repeat;
}

/* ===== Reset / Base ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  width: 100%;
  background: var(--body-bg);
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: Meiryo, Osaka, "MS PGothic", sans-serif;
}

a, a:link { color: var(--link-color); text-decoration: none; }
a:hover   { color: var(--link-hover); text-decoration: underline; }

img { border: 0; }

/* ===== Outer Container ===== */
#outer {
  width: 770px;
  margin: 0 auto;
}

/* ===== Header ===== */
#blog_header {
  background: var(--header-bg);
  width: 770px;
  height: 250px;
  padding: 10px;
  margin: 0;
  position: relative;
  background-position: 5px 0;
}

#blog_title {
  width: 350px;
  height: 80px;
  position: relative;
  z-index: 2;
  top: -20px;
  left: 20px;
  cursor: pointer;
}

#oppai {
  width: 60px;
  height: 60px;
  position: relative;
  z-index: 3;
  top: 160px;
  left: 510px;
}

/* Back to ero.manga-studies.com button */
#back-to-ero {
  position: fixed;
  top: 0;
  right: calc((100vw - 770px) / 2 + 20px);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  background: #444;
  border: 1px solid #fff;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 0 3px rgba(0,0,0,0.6);
  white-space: nowrap;
  z-index: 10;
}
#back-to-ero:hover {
  background: #222;
  color: #fff;
  text-decoration: none;
}

/* ===== Page layout (flexbox replaces table) ===== */
#page-wrap {
  display: flex;
  width: 770px;
}

.left-shadow {
  width: 5px;
  flex-shrink: 0;
  background: url('../img/shdow_l.png') repeat;
}

.right-shadow {
  width: 5px;
  flex-shrink: 0;
  background: url('../img/shdow_r.png') repeat;
}

#content-area {
  display: flex;
  width: 760px;
  background-color: #fff;
}

.sidebar-spacer {
  width: 10px;
  flex-shrink: 0;
  background-color: #fff;
}

/* ===== Sidebar ===== */
#sidebar {
  width: 170px;
  flex-shrink: 0;
  padding: 10px;
  background: var(--sidebar-bg);
  text-align: center;
}

/* ===== Main Content ===== */
#main-content {
  width: 580px;
  flex-shrink: 0;
  padding: 10px;
  background-color: #fff;
  text-align: center;
}

/* ===== Footer ===== */
#blog_footer {
  text-align: right;
  padding-right: 20px;
  color: #000;
  font-weight: bold;
  font-size: 10px;
  width: 760px;
  background: var(--footer-bg);
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  margin: 0 auto;
}

#footer-shadow {
  width: 770px;
  height: 10px;
  margin: 0 auto;
  background: url('../img/footer_shadow.png') no-repeat;
}

/* ===== Tab Navigation (jQuery UI tabs look) ===== */
#tab { margin-bottom: 25px; }

.ui-tabs-nav {
  list-style: none;
  margin: 0;
  padding: 0.2em 0.2em 0;
  overflow: hidden;
  border: 1px solid #aaa;
  background: #ccc url('../css/base/images/cccccc_40x100_textures_03_highlight_soft_75.png') 0 50% repeat-x;
  border-radius: 4px;
}

.ui-tabs-nav li {
  float: left;
  margin: 0 0.2em -1px 0;
  padding: 0;
  list-style: none;
  border: 1px solid #d3d3d3;
  background: #e6e6e6 url('../css/base/images/e6e6e6_40x100_textures_02_glass_75.png') 0 50% repeat-x;
  border-radius: 4px 4px 0 0;
}

.ui-tabs-nav li a {
  display: block;
  text-decoration: none;
  padding: 0.5em 1em;
  color: #555;
}

.ui-tabs-nav li:hover {
  border-color: #999;
  background-color: #dadada;
}
.ui-tabs-nav li:hover a { color: #212121; }

.ui-tabs-nav li.ui-tabs-selected {
  border-color: #aaa;
  background: #fff url('../css/base/images/ffffff_40x100_textures_02_glass_65.png') 0 50% repeat-x;
  padding-bottom: 0.1em;
  border-bottom: 0;
}
.ui-tabs-nav li.ui-tabs-selected a { color: #212121; }

.tab_title { font-size: 10px; }

/* ===== Article Navigation ===== */
.article-nav {
  display: flex;
  align-items: center;
  width: 95%;
  margin: 0 auto;
}
.article-nav .nav-prev { flex: 1; text-align: left; }
.article-nav .nav-center { width: 50px; text-align: center; flex-shrink: 0; }
.article-nav .nav-next  { flex: 1; text-align: right; }

a.article_link_prev, a.article_link_next {
  color: #333;
  text-decoration: none;
  display: block;
}

.article_link_prev_box {
  display: flex;
  align-items: center;
  min-height: 3em;
  padding: 5px 5px 5px 28px;
  font-size: 10px;
  color: #333;
  line-height: 1.5;
  border-radius: 6px;
  background: #e8e8e8 url('../img/icon_prev_button.png') no-repeat 5px center;
  transition: background-color 0.2s, color 0.2s;
}
.article_link_prev_box:hover {
  background: #333 url('../img/icon_prev_button_np.png') no-repeat 5px center;
  color: #fff;
}

.article_link_next_box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 3em;
  padding: 5px 28px 5px 5px;
  font-size: 10px;
  color: #333;
  line-height: 1.5;
  border-radius: 6px;
  background: #e8e8e8 url('../img/icon_next_button.png') no-repeat calc(100% - 5px) center;
  transition: background-color 0.2s, color 0.2s;
}
.article_link_next_box:hover {
  background: #333 url('../img/icon_next_button_np.png') no-repeat calc(100% - 5px) center;
  color: #fff;
}

/* ===== Article Body ===== */
.article-body {
  display: flex;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}

.date-icon {
  width: 60px;
  flex-shrink: 0;
  text-align: center;
}
.date-icon img { display: block; margin: 0 auto; }
.date-icon .year { font-size: 8px; color: #666; text-align: center; }

.article_title {
  text-align: left;
  font-family: "Hiragino Maru Gothic Pro", sans-serif;
  color: #000099;
  font-size: 16px;
  text-shadow: 1px 1px 4px #666;
  padding: 0 0 0 10px;
  border-left: #000099 solid thick;
}

.article_contents {
  text-align: left;
  background-color: #fff;
  color: #666;
  font-size: 12px;
  padding: 20px 20px 0 10px;
}

.article-share {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  gap: 10px;
}
.twitter-share-link {
  font-size: 11px;
  color: #1da1f2;
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid #1da1f2;
  border-radius: 3px;
}
.twitter-share-link:hover { background: #1da1f2; color: #fff; }

.article_info, .article_comment_edit {
  text-align: left;
  background-color: #fff;
  color: #CC3300;
  font-size: 10px;
  margin-top: 5px;
  padding: 5px 25px 0 0;
}
.article_info a { color: #CC3300; text-decoration: none; }
#action { cursor: pointer; }
#action:hover { text-decoration: underline; }

/* ===== Comment Section ===== */
#new_comment {
  display: none;
}
#new_comment form {
  text-align: left;
  padding: 0 0 0 100px;
}
#new_comment input[type="text"],
#new_comment textarea {
  font-size: 10px;
  margin-bottom: 4px;
}

/* ===== Sidebar Elements ===== */
.index_cal { height: 200px; }

.index_rss {
  font-size: 10px;
  text-align: left;
  padding: 2px 10px 10px 10px;
  margin: 0;
}
.index_rss img { vertical-align: bottom; margin-right: 5px; }

.index_profile {
  font-size: 10px;
  text-align: left;
  transform: scale(0.8);
  transform-origin: left top;
  width: 125%;
}
.index_profile ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.index_profile ul li {
  margin: 0 10px 0 0;
  padding: 0;
}
.index_profile a:hover {
  color: #FF0000;
  text-decoration: underline;
}

/* Information sidebar images */
.itaku img {
  border: solid 3px #fff;
  background-color: #ffaa00;
  box-shadow: 0 0 10px gray;
  border-radius: 3px;
}
.itaku .title { font-size: 10px; font-weight: bold; }

/* DT (ero degree) widget */
.dt { margin-top: 10px; }
.dt-top    { display: block; }
.dt-middle { display: flex; align-items: stretch; height: 29px; }
.dt-center {
  text-align: center;
  background: url('../img/dt_var.png');
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
}
.dt-bottom { display: block; }

/* Counter images */
.counter { display: block; text-align: center; }

/* ===== Blog Content Classes ===== */
.blog_b01 { color: #000; font-weight: bold; }

.blog_h01 {
  clear: both;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #ccc;
  border-bottom: solid 1px #999;
}

.image_box { text-align: center; }
.image_box .blog_image01 {
  border: solid 5px #fff;
  background-color: #ffaa00;
  box-shadow: 0 0 15px gray;
  border-radius: 5px;
  cursor: zoom-in;
}

/* ===== Lightbox ===== */
#lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 1000;
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
}
#lightbox-overlay.active {
  display: flex;
}
#lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
  border-radius: 3px;
  cursor: default;
}

/* ===== Static Calendar (jCal CSS) ===== */
.jCal {
  width: 133px;
  text-align: center;
  margin: 0 auto;
}
.jCalMo {
  width: 133px;
  overflow: visible;
  white-space: nowrap;
}
.jCalMo::after { content: ''; display: block; clear: both; }

.jCal .month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  font-size: 8pt;
  color: #000;
  margin-bottom: 2px;
}
.jCal .cal-prev,
.jCal .cal-next {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 18px;
  font-size: 9pt;
  border: 1px solid #aaa;
  border-radius: 3px;
  background: linear-gradient(to bottom, #f5f5f5, #ddd);
  color: #444;
  flex-shrink: 0;
}
.jCal .cal-prev:hover,
.jCal .cal-next:hover {
  background: linear-gradient(to bottom, #e0e0e0, #bbb);
  border-color: #888;
  color: #000;
}
.jCal .cal-label { font-size: 8pt; }

.jCalMo .dow,
.jCalMo .day,
.jCalMo .pday,
.jCalMo .aday {
  width: 19px;
  font-size: 8pt;
  color: #000;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #eee;
  text-align: center;
  float: left;
}
.jCalMo .dow {
  background: #eee url('../js/jCal/eeGrad.gif') bottom repeat-x;
  height: 20px;
  line-height: 20px;
  border-bottom: 0;
}
.jCalMo .day, .jCalMo .pday, .jCalMo .aday {
  height: 17px;
  line-height: 17px;
}
.jCalMo .day { background: #fff; }
.jCalMo .pday, .jCalMo .aday { background: #e3e3e3; color: #ccc; }

/* ===== Article List (/?p=index) ===== */
#article-list {
  text-align: left;
  padding: 0 10px;
}

.article-list-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted #ddd;
}
.article-list-item:last-child { border-bottom: none; }

.article-list-date {
  flex-shrink: 0;
  font-size: 10px;
  color: #999;
  white-space: nowrap;
}

.article-list-title a {
  font-size: 12px;
  color: var(--link-color);
}
.article-list-title a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* ===== Calendar today highlight ===== */
.jCalMo .today {
  background: #000099;
  color: #fff;
  height: 17px;
  line-height: 17px;
}

/* ===== mopTip ===== */
span.mopTip {
  color: #F00;
  text-decoration: underline;
  cursor: help;
}

#mopTip01 {
  position: absolute;
  display: none;
  z-index: 999;
  font-size: 3px;
}
#mopTip01 .tip {
  vertical-align: top;
  background-color: #fff;
}
#mopTip01 .content {
  padding: 4px;
  font-size: 11px;
  cursor: default;
  line-height: 1.5em;
  color: #333;
}
#mopTip01 .leftTop   { font-size:3px; height:20px; width:20px; background:url(mopTips/leftTop.png) no-repeat; }
#mopTip01 .rightTop  { font-size:3px; width:20px;               background:url(mopTips/rightTop.png) no-repeat; }
#mopTip01 .leftBottom  { font-size:3px; height:20px; width:20px; background:url(mopTips/leftBottom.png) no-repeat; }
#mopTip01 .rightBottom { font-size:3px; background:url(mopTips/rightBottom.png) no-repeat; }
#mopTip01 .arrow       { height:20px; width:60px; background:url(mopTips/arrowTop.png) no-repeat; }
#mopTip01 .arrowBottom { height:20px; width:60px; background:url(mopTips/arrowBottom.png) no-repeat; }
#mopTip01 .left   { font-size:3px; width:20px; background:url(mopTips/left.png) repeat-y top; }
#mopTip01 .right  { font-size:3px; width:20px; background:url(mopTips/right.png) repeat-y; }
#mopTip01 .top    { background:url(mopTips/top.png) repeat-x; }
#mopTip01 .bottom { background:url(mopTips/bottom.png) repeat-x; }
#mopTip01 .arrowSet       { font-size:3px; }
#mopTip01 .arrowSetBottom { font-size:3px; }

/* Scroll-to-top button */
#scroll-to-top {
  width: 40px;
  height: 40px;
  background: rgba(80, 80, 80, 0.75);
  color: #fff;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
#scroll-to-top:hover {
  background: rgba(40, 40, 40, 0.9);
}

/* Floating article jump */
#floating-jump {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  background: #fff;
  border: 2px solid #000;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 10px 16px 12px;
  box-shadow: 0 -4px 14px rgba(0,0,0,0.3);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
#floating-jump.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
#floating-jump-label {
  font-size: 12px;
  font-weight: bold;
  color: #222;
  white-space: nowrap;
}
#floating-jump-select {
  width: 400px;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #555;
  border-radius: 4px;
  cursor: pointer;
  background: #444;
  color: #fff;
}

/* ===== Policy page ===== */
.policy { text-align: left; margin: 30px 20px 0 20px; padding: 0; }
.policy .title { color: #000; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 3px #ccc; border-bottom: 1px solid #999; margin-bottom: 15px; margin-top: 30px; padding-bottom: 5px; }
.policy .title:first-child { margin-top: 0; }
.policy .title .etitle { font-size: 12px; font-weight: normal; color: #666; font-family: Arial, sans-serif; }
.policy .sub_title { font-size: 14px; font-weight: bold; color: #000; padding: 7px 10px; margin-bottom: 0; border-radius: 4px 4px 0 0; border: 1px solid #aaa; border-bottom: none; background: #fff; box-shadow: 0px 0px 5px rgba(0,0,0,0.15); }
.policy .explain { font-size: 14px; color: #333; padding: 10px; margin-bottom: 25px; border-radius: 0 0 4px 4px; border: 1px solid #aaa; background: #eee; box-shadow: 2px 2px 5px rgba(0,0,0,0.15); }
.policy .explain ul { margin: 0; padding: 5px 0 5px 20px; }
.policy .explain li { color: #666; font-size: 12px; margin-left: 0; margin-bottom: 5px; line-height: 1.7; }

/* ===== Title overlay dialog ===== */
#title-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}
#title-overlay.active {
  display: flex;
}
#title-dialog {
  background: #fff;
  border-radius: 8px;
  padding: 40px 50px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-align: center;
  line-height: 1.8;
  max-width: 520px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

/* ===== Ported from blog.css ===== */

.image_box { text-align: center; }
.image_box .blog_image00 { background-color: #ffaa00; }
.image_box .blog_image01 { border: solid 5px #fff; background-color: #ffaa00; -webkit-box-shadow: 0px 0px 15px gray; border-radius: 5px; }
.image_box .img_title { padding-top: 5px; }
.image_box .img_title_left  { height: 32px; width: 15px; background: url(../js/fb/fancy_title_left.png) repeat-x; }
.image_box .img_title_main  { text-align: center; color: #fff; font-size: 10px; height: 32px; background: url(../js/fb/fancy_title_main.png) repeat-x; }
.image_box .img_title_right { height: 32px; width: 15px; background: url(../js/fb/fancy_title_right.png) repeat-x; }

.prof_box      { text-align: center; margin-bottom: 20px; padding: 5px; border: 1px solid #663300; }
.prof_title    { width: 460px; margin-left: 10px; }
.prof_name     { text-align: left; font-weight: bold; font-size: 16px; border-bottom: 1px #666 dotted; padding: 3px 3px 3px 0; margin: 0 10px; }
.prof_contents { text-align: left; font-size: 10px; padding: 3px 3px 3px 10px; }

.blog_center { text-align: center; margin: 10px 0; }

.box_shadow { box-shadow: 0 0 5px #000; border-radius: 5px; padding: 10px; background-color: #eeff99; width: 250px; }

.outer_box { text-align: center; width: 450px; }
.inner_box  { text-align: center; margin: 0 auto; }
.outer_box .secret_title     { margin: 5px; font-size: 13px; font-weight: bold; color: #000; }
.outer_box .secret_incollect { margin: 5px; font-size: 12px; font-weight: bold; color: #f00; }
.outer_box .secret_pass      { margin-right: 5px; width: 100px; border: solid 1px #999; text-align: center; }

.inv_me     { color: #003366; margin: 0 0 20px 0; }
.inv_guest1 { color: #660033; margin: 0 0 20px 0; }
.inv_guest2 { color: #006400; margin: 0 0 20px 0; }
.inv_guest3 { color: #996600; margin: 0 0 20px 0; }
.inv_name     { font-weight: bold; width: 60px; text-align: left; vertical-align: top; }
.inv_contents { width: 400px; text-align: left; vertical-align: top; }

.dis_top    { color: #003366; margin: 0 0 20px 0; }
.dis_top    .inv_name     { text-align: left; vertical-align: top; width: 70px; }
.dis_top    .inv_contents { text-align: left; vertical-align: top; padding-top: 10px; }
.dis_guest1 { color: #660000; margin: 0 0 20px 0; }
.dis_guest1 .inv_name     { text-align: left; vertical-align: top; width: 70px; }
.dis_guest1 .inv_contents { text-align: left; vertical-align: top; padding-top: 10px; }
.dis_all    { color: #660066; margin: 0 0 20px 0; }
.dis_all    .inv_name     { text-align: left; vertical-align: top; width: 70px; }
.dis_all    .inv_contents { text-align: left; vertical-align: top; padding-top: 10px; }

.book_info table      { width: 400px; border: 1px solid #663300; box-shadow: 0 0 5px gray; }
.book_info .td_img    { width: 100px; padding: 10px; }
.book_info .td_text   { text-align: left; vertical-align: top; width: 300px; padding: 10px; }
.book_info .book_title  { color: #000099; font-size: 16px; font-weight: bold; border-bottom: 1px solid #000099; }
.book_info .book_author { color: #000; font-size: 13px; margin-top: 5px; }
.book_info .book_date   { color: #333; font-size: 10px; margin-top: 5px; }
.book_info .book_price  { color: #f00; font-size: 12px; margin-top: 5px; }

/* ===== book_box (新刊リスト: bid=190 etc.) ===== */
.book_box {
  display: flex;
  flex-direction: column;
  margin: 6px 0;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fafafa;
  overflow: hidden;
}
.book_box .title {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 3px;
}
.book_box .contents {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.book_box .nobr.img {
  flex: 0 0 auto;
}
.book_box .nobr.img img {
  border: solid 3px #fff;
  box-shadow: 0 0 8px gray;
  border-radius: 3px;
  display: block;
}
.book_box .nobr.info {
  flex: 1;
  text-align: left;
  font-size: 12px;
}
.book_box .author {
  font-weight: bold;
  margin-bottom: 3px;
}
.book_box .other {
  color: #666;
  font-size: 11px;
  margin-bottom: 5px;
}
.book_box .link { font-size: 11px; }
.book_box .mangaoh a { color: #0066cc; }

/* ===== .special section (bid=192 etc.) ===== */
.special { text-align: center; margin: 0; padding: 0; }
.special .title_img { margin: 0 0 5px 0; }
.special .sub_title { text-align: left; font-size: 12px; font-weight: bold; color: #00f; padding: 20px 0 1px 0; margin-bottom: 5px; border-bottom: solid #00f 1px; }
.special .exp { text-align: left; font-size: 12px; color: #666; }
.special .round { font-size: 12px; color: #333; padding: 10px; margin-bottom: 0; border-radius: 4px; border: 1px solid #aaa; background: #eee; }
.special .gather_exp { font-size: 12px; color: #333; padding: 10px; margin-bottom: 0; border-radius: 4px; border: 1px solid #aaa; background: #fff; }
.special .gather_title { font-size: 14px; font-weight: bold; color: #fff; padding: 5px; margin-bottom: 10px; border-radius: 4px; background: #333; }
.special .gather_mail { margin: 10px 0 0 0; }
.special .gather_bar { text-align: right; font-size: 10px; font-weight: normal; color: #999; margin: 0 0 10px 0; }
.special .ero-index { width: 250px; text-align: left; padding: 0 0 0 10px; }
.special .info { text-align: center; margin: 0 0 10px 0; color: #f00; font-size: 11px; }
.special .ero-index .title { font-size: 14px; font-weight: bold; text-shadow: #999 0 1px 3px; border-bottom: 1px solid #000099; }
.special .ero-index ul { margin: 5px 0 10px 20px; padding: 0; }
.special .ero-index ul li { list-style-type: circle; font-size: 12px; }
.special .itaku { font-size: 12px; padding: 5px; margin: 10px 0 0 0; border-radius: 4px; background: #e6e6e6; }

/* ===== blog_box (bid=201 etc.) ===== */
.blog_box10 {
  border-radius: 4px;
  box-shadow: 0 0 20px #c0c0c0;
  background: linear-gradient(to bottom, #fff 39%, #d3d3d3);
  border: 1px solid #808080;
  background-color: #ddd;
  padding: 10px;
  font-size: 9pt;
  color: #2f4f4f;
  text-align: left;
}
.blog_box20 {
  border-radius: 4px;
  box-shadow: 0 0 20px #c0c0c0;
  background: linear-gradient(to bottom, #ffc0cb 55%, #fff);
  border: 1px solid #b22222;
  background-color: #ddd;
  padding: 10px;
  font-size: 9pt;
  color: #b22222;
  text-align: left;
}
.blog_box00 {
  width: 350px;
  color: #333;
  text-align: center;
  font-size: 10px;
  background-color: #ffccff;
  padding: 10px;
  border: solid 1px #ccc;
}
.blog_box00 .box_contents { text-align: left; }
.blog_box01 .box_contents { color: #000; padding: 0 10px 0 0; border: solid 1px #999; background-color: #d2fcd7; }
.blog_box01 .box_exp { color: #999; font-size: 10px; margin-top: 5px; }

/* ===== article_clink (bid=223 etc.) ===== */
.article_clink { font-size: 12px; }
.article_clink ul { padding-left: 0; margin: 4px 0 0 5px; }
.article_clink li { list-style: none; position: relative; margin: 0 0 2px; padding: 0 0 0 20px; background: url(../img/icon_tr.png) no-repeat 0 2px; }
.article_clink_title { font-size: 14px; font-weight: bold; color: #00f; }
.box_shadow01 { box-shadow: 0 0 8px rgba(0,0,0,0.2); border-radius: 4px; padding: 8px; }

/* ===== ajaxmail placeholder ===== */
.ajaxmail-placeholder {
  width: 460px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #aaa;
  border-radius: 4px;
  background: #f5f5f5;
  color: #999;
  font-size: 12px;
  margin: 10px 0;
}

/* ===== bid=23 interview-specific classes ===== */
.inv_23_h { color: #003366; margin: 0 0 8px 0; }
.inv_23_d { color: #660033; margin: 0 0 8px 0; }
.inv_23_m { color: #555;    margin: 0 0 8px 0; }
.inv_23_h .inv_name,
.inv_23_d .inv_name,
.inv_23_m .inv_name { width: 80px; text-align: center; }
.inv_img { display: block; text-align: center; margin-bottom: 3px; }
.inv_img img { border: solid 2px #fff; box-shadow: 0 0 5px gray; border-radius: 3px; width: 64px; height: auto; }
.notice_23 { border: 1px solid #f00; border-radius: 4px; padding: 10px; background: #fff0f0; margin: 10px 0; font-size: 12px; text-align: left; }
.gather_23 { border: 1px solid #aaa; border-radius: 4px; padding: 10px; background: #f9f9f9; margin: 10px 0; font-size: 12px; text-align: left; }

/* ===== doujin info table (bid=30 etc.) ===== */
.doujin table { width: 400px; border: 1px #aaa solid; border-collapse: collapse; border-spacing: 0; margin: 10px; }
.doujin .title { width: 100px; text-align: center; font-size: 12px; font-weight: bold; padding: 3px; background-color: #666; color: #fff; border: 1px solid #ccc; }
.doujin .contents { width: 300px; text-align: left; font-size: 12px; padding: 3px; background-color: #ddd; color: #111; border: 1px solid #ccc; }

/* ===== bid=30 specific ===== */
.img30 { border: solid 2px #fff; box-shadow: 0 0 5px gray; border-radius: 3px; }
.ps30 { font-size: 12px; color: #555; border-left: 3px solid #aaa; padding: 5px 10px; margin: 10px 0; background: #f9f9f9; }

/* ===== bid=32 interview-specific classes ===== */
.inv_32_k { color: #003366; margin: 0 0 8px 0; }
.inv_32_h { color: #660033; margin: 0 0 8px 0; }
.inv_32_n { color: #006400; margin: 0 0 8px 0; }

/* ===== book_img ===== */
.book_img { border: solid 3px #fff; box-shadow: 0 0 8px gray; border-radius: 3px; }

/* ===== bid=33 interview-specific classes ===== */
.inv_33_k { color: #003366; margin: 0 0 8px 0; }
.inv_33_r { color: #660033; margin: 0 0 8px 0; }

/* ===== bid=56 interview-specific classes ===== */
.inv_56_k { color: #003366; margin: 0 0 8px 0; }
.inv_56_m { color: #660033; margin: 0 0 8px 0; }

/* ===== bid=60 interview-specific classes ===== */
.inv_60_k { color: #003366; margin: 0 0 8px 0; }
.inv_60_a { color: #660033; margin: 0 0 8px 0; }

/* ===== bid=42 interview-specific classes ===== */
.inv_42_k { color: #003366; margin: 0 0 8px 0; }
.inv_42_g { color: #660033; margin: 0 0 8px 0; }
.inv_42_d { color: #555;    margin: 0 0 8px 0; }

/* ===== bid=36/37 interview-specific classes ===== */
.inv_36_k { color: #003366; margin: 0 0 8px 0; }
.inv_36_u { color: #660033; margin: 0 0 8px 0; }
.blog_box37 { border-radius: 4px; box-shadow: 0 0 20px #c0c0c0; background: linear-gradient(to bottom, #fff 39%, #d3d3d3); border: 1px solid #808080; padding: 10px; font-size: 9pt; color: #2f4f4f; text-align: left; }

/* ===== history table (bid=33 etc.) ===== */
.history table { width: 450px; border-collapse: collapse; font-size: 12px; margin: 5px 0; }
.history th { background: #555; color: #fff; padding: 4px 6px; border: 1px solid #888; text-align: center; }
.history td { padding: 3px 6px; border: 1px solid #bbb; background: #f5f5f5; }

/* ===== interview classes (remaining articles) ===== */
.inv_22_k { color: #003366; margin: 0 0 8px 0; }
.inv_22_w { color: #660033; margin: 0 0 8px 0; }
.inv_26_k { color: #003366; margin: 0 0 8px 0; }
.inv_26_m { color: #660033; margin: 0 0 8px 0; }
.inv_62_k { color: #003366; margin: 0 0 8px 0; }
.inv_62_y { color: #660033; margin: 0 0 8px 0; }
/* bid=64/65 group interview (has inv_img face photos) */
.inv_64_k { color: #003366; margin: 0 0 8px 0; }
.inv_64_e { color: #660033; margin: 0 0 8px 0; }
.inv_64_h { color: #006400; margin: 0 0 8px 0; }
.inv_64_i { color: #555;    margin: 0 0 8px 0; }
.inv_64_t { color: #996600; margin: 0 0 8px 0; }
.inv_64_w { color: #006666; margin: 0 0 8px 0; }
.inv_64_k .inv_name, .inv_64_e .inv_name, .inv_64_h .inv_name,
.inv_64_i .inv_name, .inv_64_t .inv_name, .inv_64_w .inv_name { width: 80px; text-align: center; }
.inv_67_k { color: #003366; margin: 0 0 8px 0; }
.inv_67_o { color: #660033; margin: 0 0 8px 0; }
.inv_67_t { color: #006400; margin: 0 0 8px 0; }
.inv_79_k { color: #003366; margin: 0 0 8px 0; }
.inv_79_a { color: #660033; margin: 0 0 8px 0; }

/* ===== blog_box variants (bid=28/29/31/144) ===== */
.blog_box28, .blog_box29, .blog_box31, .box01 {
  border-radius: 4px; box-shadow: 0 0 20px #c0c0c0;
  background: linear-gradient(to bottom, #fff 39%, #d3d3d3);
  border: 1px solid #808080; padding: 10px;
  font-size: 9pt; color: #2f4f4f; text-align: left;
}

/* ===== misc image/inline classes ===== */
.blog_01 { border: solid 5px #fff; background-color: #ffaa00; box-shadow: 0 0 15px gray; border-radius: 5px; }
.no { display: block; }
.pict { display: block; margin: 3px auto; }
.images { display: inline-block; }

/* ===== exp / notice (gather TD wrapper, inline note) ===== */
.exp { text-align: left; vertical-align: top; }
.notice { font-size: 11px; color: #c00; display: block; margin: 4px 0; }

/* ===== table01 (bid=95) ===== */
.table01 table { width: 460px; border: 1px #aaa solid; border-collapse: collapse; border-spacing: 0; margin: 10px; }
.table01 .title { width: 50px; text-align: center; font-size: 12px; font-weight: bold; padding: 3px; background-color: #666; color: #fff; border: 1px solid #ccc; }
.table01 .contents { width: 300px; text-align: left; font-size: 12px; padding: 5px 3px 5px 8px; background-color: #ddd; color: #111; border: 1px solid #ccc; }

/* ===== twitter_warning (bid=83-85,104-105) ===== */
.twitter_warning { text-align: center; padding: 15px; border-radius: 10px; box-shadow: 0 0 10px gray; border: 3px solid #fff; background-color: #f90; color: #fff; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; margin: 10px 0; }
.twitter_warning .twitter_warning_title { margin: 8px 0 5px 0; font-size: 15px; }
.twitter_warning_notice { font-size: 11px; }

/* ===== erogirls_page_menu (bid=157-159) ===== */
.erogirls_page_menu { display: flex; list-style: none; padding: 0; margin: 10px 0; gap: 5px; justify-content: center; }
.erogirls_page_menu li { width: 28px; height: 28px; line-height: 28px; text-align: center; border: 1px solid #aaa; border-radius: 3px; font-size: 12px; }
.erogirls_page_menu li.this { background: #555; color: #fff; font-weight: bold; }
.erogirls_page_menu li.link { background: #f5f5f5; }
.erogirls_page_menu li.link a { color: #333; text-decoration: none; display: block; width: 100%; height: 100%; }
.erogirls_page_menu li.link a:hover { background: #ddd; }