/* 作例のビフォー：作り直す前を想定した見本。低予算のサイトによくある要素を全部入れてある。
   このサイト（HOLOGLITCH）の色と書体の決まりは使わない。点滅と音は入れない */
body{margin:0;color:#333;font-family:"MS PGothic",Osaka,sans-serif;font-size:12px;line-height:1.4;
  background-color:#dcefc4;background-image:radial-gradient(#b5d68a 2px,transparent 2px),radial-gradient(#b5d68a 2px,transparent 2px);
  background-size:14px 14px;background-position:0 0,7px 7px}
a{color:#00c}
.sample{margin:0;padding:6px 10px;background:#25382e;color:#fff;font:12px/1.6 system-ui,sans-serif}
.sample a{color:#fff}
#wrap{width:960px;margin:0 auto}

#header{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:linear-gradient(#fff,#e6f2d8)}
#header .logo{display:block}
#gnav{display:flex;margin:0;padding:0;list-style:none;background:linear-gradient(#3a9a3a,#1d6b1d)}
#gnav li{border-right:1px solid #9c9}
#gnav a{display:block;padding:4px 10px;color:#fff;font-size:11px;text-decoration:none}
#welcome{margin:10px 0;color:#f60;font-size:15px;font-weight:bold;text-align:center}

#qr{margin:0 auto 10px;padding:10px;width:620px;background:#fff;text-align:center}
#qr img{display:block;margin:0 auto}
#qr p{margin:4px 0 0;font-size:11px}

.marquee{overflow:hidden;background:#1d4d1d;color:#ff0;font-size:14px;font-weight:bold}
.marquee p{margin:0;padding:3px 0;white-space:nowrap;display:inline-block;animation:flow 30s linear infinite}
@keyframes flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}

#carousel{position:relative;width:900px;height:240px;margin:10px auto}
#carousel img{position:absolute;inset:0;opacity:0;transition:opacity .6s}
#carousel img.on{opacity:1}

#cols{display:flex;gap:10px;padding:0 8px 10px}
#side{width:180px;flex:none}
#side ul{margin:0;padding:0;list-style:none;font-size:10px}
#side li{padding:1px 0}
.side-ttl{margin:8px 0 3px;padding:2px 5px;background:#060;color:#ff0;font-weight:bold}
.side-text{margin:0;font-size:10px}
#main{flex:1;min-width:0}
#main h2{margin:12px 0 4px;padding:2px 6px;font-size:14px}
.h-red{background:#c00;color:#fff}
.h-green{background:#090;color:#ff0}
.h-blue{background:#03c;color:#fff}
.h-yellow{background:#ff0;color:#c00}
.news{margin:0}
.news dt{color:#c00;font-weight:bold}
.news dd{margin:0 0 2px 1em}
.text{margin:4px 0}
.works{margin:4px 0;font-size:9px;line-height:1.25;color:#444}
.tbl{border-collapse:collapse;width:100%;font-size:11px}
.tbl th,.tbl td{border:1px solid #9c9;padding:3px 6px;text-align:left;vertical-align:top}
.tbl th{width:90px;background:#cfc;white-space:nowrap}
.tbl td{background:#fff}
#main .tel{display:block;margin:6px 0}

#footer{padding:6px;background:#060;color:#fff;font-size:10px;text-align:center}
#footer p{margin:2px 0}
.count{padding:0 3px;background:#000;color:#0f0;font-family:monospace;letter-spacing:2px}

@media (prefers-reduced-motion:reduce){.marquee p{animation:none}#carousel img{transition:none}}