body{margin:0;color:#000;background:#fff;line-height:1.6}
a{overflow-wrap:anywhere}
#l{position:fixed;top:0;left:0;bottom:0;width:17%;background:#F0F0FF;overflow:auto}
#l ul{list-style:none;margin:30px 0 0 0;padding:0 0 0 10px}
#l li{margin:0 0 2em 0}
#l a{margin-left:3px}
#r{margin-left:17%;padding:0 16px 120px;min-height:100vh;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="470" height="130"><text x="10" y="80" textLength="420" lengthAdjust="spacingAndGlyphs" font-family="serif" font-size="46" font-style="italic" fill="%2399cc33" fill-opacity="0.35">SHIMODA Hiroshi</text></svg>')}
h1{text-align:center;margin:0;padding:20px 0 16px}
h2{font-size:1.15em;margin:1.6em 0 .6em}
hr{border:0;border-top:1px solid #999;margin:1.4em 0}
.new{color:red}
.box{max-width:880px;margin:0 auto}
.top{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.top .me{width:256px}
.top .me img{width:256px;border:0}
.top .news{flex:1;min-width:280px;max-width:560px}
.item{margin:0 0 1.2em 70px}
table.q{border-collapse:collapse}
table.q td{padding:4px 10px 4px 0;vertical-align:top}
.reports a{display:inline-block;width:110px;margin:0 10px 18px 0;text-align:center;font-size:.9em;vertical-align:top}
.reports img{width:110px;border:1px solid #999}
.movie{width:320px;height:180px;border:0;margin:0 10px 12px 0}
.foot{text-align:center;font-size:.85em;margin-top:40px}

/* スマホ：メニューを上に */
@media (max-width:700px){
  #l{position:static;width:auto}
  #l ul{margin:0;padding:10px;display:flex;flex-wrap:wrap;gap:6px 16px}
  #l li{margin:0}
  #r{margin-left:0}
  .item{margin-left:1em}
  .movie{width:100%;height:auto;aspect-ratio:16/9}
}
.photos{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 22px}
.photos img{height:150px;width:auto;max-width:100%;border:1px solid #ccc;object-fit:cover}
@media (max-width:700px){.photos img{height:100px}}
.sns{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:1.1em}