/* エロタイムズ 平成初期ホームページ風テーマ（見た目はレトロ、作りはスマホ対応） */
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;padding:8px;background:#008080 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23008080'/%3E%3Cpath d='M10 6l1 3 3 1-3 1-1 3-1-3-3-1 3-1zM30 26l1 3 3 1-3 1-1 3-1-3-3-1 3-1z' fill='%2333a0a0'/%3E%3C/svg%3E");color:#000;font-family:"ＭＳ Ｐゴシック","MS PGothic","Osaka","Hiragino Kaku Gothic ProN",sans-serif;line-height:1.6}
a{color:#00f}
a:visited{color:#800080}
a:hover{color:#f00}
img{max-width:100%;height:auto}
.page{max-width:860px;margin:0 auto;background:#c0c0c0;border:2px solid;border-color:#fff #404040 #404040 #fff;padding:6px}
/* ヘッダー */
.head{text-align:center;background:#000080;color:#fff;padding:0 0 8px;border:2px solid;border-color:#404040 #fff #fff #404040}
.head__welcome{margin:0;overflow:hidden;white-space:nowrap;background:#000;color:#0f0;font-size:.8rem;padding:2px 0}
.head__welcome span{display:inline-block;padding-left:100%;animation:nagare 22s linear infinite}
@keyframes nagare{to{transform:translateX(-100%)}}
.head__logo{margin:10px 0 0;font-size:2.3rem;font-weight:bold;font-style:italic;letter-spacing:.08em;line-height:1.2}
.head__logo a{color:#ff0;text-decoration:none;text-shadow:2px 2px 0 #f00,4px 4px 0 #000}
.head__sub{margin:4px 0 10px;font-size:.85rem;color:#0ff}
.menu{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:0 4px}
.menu a,.btn95{display:inline-block;padding:5px 12px;background:#c0c0c0;color:#000;text-decoration:none;font-weight:bold;font-size:.9rem;border:2px solid;border-color:#fff #404040 #404040 #fff;cursor:pointer;font-family:inherit}
.menu a:hover,.btn95:hover{color:#f00}
.menu a:active,.btn95:active{border-color:#404040 #fff #fff #404040}
.menu a.now{background:#ff0}
.submenus{margin:8px 6px 0;text-align:left;background:#000;border:1px solid #0ff;padding:3px 6px}
.submenu{margin:0;font-size:.8rem;line-height:1.9;color:#0ff}
.submenu b{color:#ff0;font-weight:normal;margin-right:4px}
.submenu a{color:#fff;margin-right:10px;white-space:nowrap}
.submenu a:visited{color:#ccc}
.submenu a:hover,.submenu a.now{color:#ff0}
.btn95--go{background:#ff0;font-size:1.05rem;padding:9px 16px}
.rainbow{border:0;height:4px;margin:8px 0;background:linear-gradient(90deg,#f00,#f80,#ff0,#0c0,#00f,#808,#f00)}
.crumb{margin:0 0 6px;font-size:.8rem;background:#fff;padding:2px 6px;border:1px solid #808080}
.pr{margin:0 0 6px;font-size:.75rem;color:#800000}
/* ウィンドウ */
.win{background:#c0c0c0;border:2px solid;border-color:#fff #404040 #404040 #fff;margin:0 0 10px}
.win__bar{margin:0;padding:3px 8px;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-size:1rem;font-weight:bold;line-height:1.4}
.win__body{padding:8px;background:#fffff0;border:2px solid;border-color:#808080 #fff #fff #808080;margin:3px}
.win__body>p:first-child{margin-top:0}
.win--sub .win__bar{background:linear-gradient(90deg,#606060,#a0a0a0)}
.win--work .win__bar{font-size:1.1rem}
.new{color:#f00;font-weight:bold;animation:pika 1s steps(2) infinite}
@keyframes pika{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.new,.head__welcome span{animation:none}.head__welcome span{padding-left:0;white-space:normal}.head__welcome{white-space:normal}}
/* 作品リスト */
.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px}
.item{display:flex;gap:8px;padding:5px;background:#fff;border:1px solid #808080;min-width:0}
.item__img{flex:0 0 76px}
.item__img img{display:block;width:76px;height:100px;object-fit:cover;border:1px solid #000}
.item__txt{min-width:0;font-size:.85rem;line-height:1.45}
.item__title{font-weight:bold}
.rank{color:#f00;font-weight:bold}
.svc{font-size:.7rem;padding:0 4px;color:#fff;background:#000080}
.svc--dl{background:#c00060}
.stars{color:#f80;letter-spacing:-1px}
.dim{color:#666}
.links{margin:8px 0 0;font-size:.9rem;line-height:1.9}
.note{font-size:.75rem;color:#444;margin:8px 0 0}
/* 作品単体ページ */
.work{display:flex;gap:12px;flex-wrap:wrap}
.work__img{flex:0 0 240px;margin:0;max-width:100%}
.work__img img{display:block;border:2px solid;border-color:#404040 #fff #fff #404040}
.work__info{flex:1 1 260px;min-width:0}
.work__rate{margin:0 0 8px;font-size:.95rem}
.spec{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff}
.spec th,.spec td,.hub th,.hub td{border:1px solid #808080;padding:4px 6px;text-align:left;vertical-align:top}
.spec th{width:6.5em;background:#d8d8ff;white-space:nowrap}
.work__cta{margin:12px 0 0;text-align:center}
.work__cta--bottom{margin:4px 0 12px}
.cap{margin:0;padding:8px;background:#fff;border:1px dashed #808080;font-size:.92rem}
.sample{display:block;width:100%;max-width:640px;margin:0 auto;background:#000}
.caps{margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.caps img{display:block;width:100%;border:1px solid #000}
.hub{width:100%;border-collapse:collapse;background:#fff;font-size:.9rem}
.hub th{width:9em;background:#d8d8ff}
/* フッター */
.foot{font-size:.8rem;text-align:center;padding:4px}
.foot p{margin:4px 0}
.foot__note{color:#444}
/* 年齢確認 */
.agegate{position:fixed;inset:0;z-index:99;display:flex;align-items:center;justify-content:center;padding:12px;background:#008080}
.agegate__box{max-width:420px;width:100%;text-align:center}
.agegate__btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.age-ok .agegate{display:none}
html:not(.age-ok) .page{visibility:hidden}
@media (max-width:520px){body{padding:3px}.head__logo{font-size:1.8rem}.work__img{flex-basis:100%}.work__img img{margin:0 auto;max-height:340px}.caps{grid-template-columns:repeat(2,1fr)}.hub th{width:6.5em}}
/* ---- スマホ向けの調整（見た目は平成風のまま、指で押しやすく・読みやすく） ---- */
.btn95,.menu a{-webkit-tap-highlight-color:rgba(255,255,0,.4)}
.agegate .btn95{min-height:44px;padding:10px 16px;font-size:1rem}
@media (max-width:640px){
  html{font-size:17px;-webkit-text-size-adjust:100%}
  body{padding:2px}
  .page{padding:3px;border-width:1px}
  .head{padding-bottom:6px}
  .head__welcome{font-size:.72rem}
  .head__logo{font-size:1.7rem;margin-top:6px}
  .head__sub{font-size:.72rem;margin:2px 0 6px}
  /* メニューは横に1列。指で左右に流せる */
  .menu{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 4px 2px}
  .menu::-webkit-scrollbar,.submenu::-webkit-scrollbar{display:none}
  .menu a{flex:0 0 auto;min-height:44px;padding:10px 14px;font-size:.9rem;display:flex;align-items:center}
  .submenus{margin:6px 4px 0;padding:0 6px}
  .submenu{white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;font-size:.85rem;line-height:1}
  .submenu b{display:inline-block;padding:13px 0}
  .submenu a{display:inline-block;padding:13px 2px;margin-right:12px}
  .submenu+.submenu{border-top:1px dotted #0ff}
  .crumb{font-size:.78rem;padding:6px;overflow-x:auto;white-space:nowrap}
  .win__bar{font-size:.95rem;padding:6px 8px}
  .win__body{padding:7px}
  .items{grid-template-columns:1fr;gap:5px}
  .item{padding:6px;gap:10px}
  .item__img{flex-basis:92px}
  .item__img img{width:92px;height:122px}
  .item__txt{font-size:.9rem;line-height:1.5}
  .item__title{display:inline-block;padding:3px 0}
  .links{line-height:2.6;font-size:.95rem}
  .work{display:block}
  .work__img{text-align:center}
  .work__img img{display:inline-block;max-height:60vh;width:auto;max-width:100%}
  .work__rate{margin-top:8px}
  .spec{font-size:.88rem}
  .spec th{width:5.5em;white-space:normal}
  .work__cta .btn95{display:block;width:100%;min-height:52px;padding:14px 8px;font-size:1.05rem}
  .cap{font-size:.95rem;line-height:1.75}
  .caps{grid-template-columns:repeat(2,1fr)}
  .hub{font-size:.9rem}
  .hub th{width:6em}
  .hub th a{display:inline-block;padding:8px 0}
  .foot{font-size:.82rem}
  .foot__menu{line-height:2.5}
}