@charset "utf-8";

* { box-sizing: border-box; }

html      { line-height: 1.5; }
body      { margin: 0; padding: 0; color: #000000; background-color: #eeffee; }
img       { vertical-align: middle; max-width: 100%; }
p         { margin: 0.5em 0; text-indent: 1.0em; }

a           { transition: 0.2s; }
a img       { border: none; transition: 0.2s; }
a:link      { color: #0000cc; }
a:visited   { color: #000099; }
a:active    { color: #0099ff; }
a:hover     {
    color: #ff0000; background-color: #ccffcc;
    text-shadow: 0 0 0.5em #ffff00; 
    background: linear-gradient(to bottom, #99ff99 0%, #ccffcc 50%, #99ff99 100%);
}

h1        { font-weight: bold; text-align: center; margin: 0.5em auto 0.2em auto; text-shadow: 1px 1px 2px gray; }
h2        { font-weight: bold; text-align: center; margin: 0.5em auto 0.2em auto; text-shadow: 1px 1px 2px gray; }
h3        { font-weight: bold; text-align: left; margin: 0.2em auto; text-shadow: 1px 1px 2px gray; }

ul, ol    { margin: 0.5em 0 0.5em 2.0em; }

select    { background-color: #ffffee; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
}

input, button, textarea { transition: 0.5s; outline: 0; border: 1px solid #cccccc; }
input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="number"], textarea     {
    border-radius: 4px; padding: 2px; 
    box-shadow: 0 0 2px #000000; border: 1px solid #cccccc; background-color: #f8ffff;
    font-size: calc( 16px + 0.2vmin );
}
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="date"]:hover, input[type="number"]:hover, textarea:hover {
    box-shadow: 0 0 2px #ff0000; border: 1px solid #ff9900; background-color: #ffffee;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="number"]:focus, textarea:focus {
    box-shadow: 0 0 4px #ff0000; border: 1px solid #ff0000; background-color: #ffff99;
}

input[type="submit"], input[type="reset"], button {
    box-shadow: 0 0 2px #666666; border-radius: 4px;
    background-color: #eeeeee;
    background: linear-gradient(to bottom, #f8f8f8 0%, #dddddd 100%);
}
input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
    box-shadow: 0 0 4px pink; background-color: #ffffee;
    background: linear-gradient(to bottom, #fffff8 0%, #ffffdd 100%);
}
input[type="submit"]:focus, input[type="reset"]:focus, button:focus {
    box-shadow: 0 0 4px red; background-color: #ffffcc;
    background: linear-gradient(to bottom, #fffff8 0%, #ffffcc 100%);
}

.indent    { margin-left: 1.0em; }
.box       {
  background-color: #ffffff;
  margin: 0.1em 0.2em; padding: 0.4em;
  min-height: 8.0em; text-align: left;
  border-radius: 4px; box-shadow: 0 0 2px #999999;
}
.box:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } /* clearfix */

.limage   {
  margin: 0.2em auto; padding: 0.2em;
  height: auto;
  background-color: #ffffff;
  box-shadow: 0 0 2px #999999;
  width: 90%;
}
.list     { margin-left: 1.0em; text-indent: -1.0em; }
.link     { font-weight: bold; margin: 0.2em; padding: 0.2em; background-color: #ffffcc; border: 1px solid #ff9900; }

.illust010r { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  10%; float: right; }
.illust020r { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  20%; float: right; }
.illust025r { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  25%; float: right; }
.illust030r { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  30%; float: right; }
.illust040r { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  40%; float: right; }
.illust050r { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  50%; float: right; }
.illust060r { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  60%; float: right; }
.illust070r { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  70%; float: right; }
.illust080r { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  80%; float: right; }
.illust090r { margin: 0 auto; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  90%; }
.illust100r { margin: 0 auto; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width: 100%; }
.illust010l { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  10%; float: left; }
.illust020l { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  20%; float: left; }
.illust025l { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  25%; float: left; }
.illust030l { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  30%; float: left; }
.illust040l { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  40%; float: left; }
.illust050l { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  50%; float: left; }
.illust060l { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  60%; float: left; }
.illust070l { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  70%; float: left; }
.illust080l { margin: 0; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  80%; float: left; }
.illust090l { margin: 0 auto; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width:  90%; }
.illust100l { margin: 0 auto; padding: 0.5em; text-align: center; font-weight: bold; text-shadow: 1px 1px 2px gray; width: 100%; }

.left     { text-align: left; }
.center   { text-align: center; }
.right    { text-align: right; }
.bold     { font-weight: bold; }
.strong   { font-weight: bold; color: #ff0000; background-color: #ffff00; }
.italic   { font-style: italic; }
.black    { color: #000000; }
.red      { color: #ff0000; }
.green    { color: #009900; }
.blue     { color: #0000ff; }
.cyan     { color: #00ffff; }
.pink     { color: #ff00ff; }
.yellow   { color: #ffff00; }
.gray     { color: #999999; }
.white    { color: #ffffff; }
.line     { text-decoration: underline; }
.shadow   { box-shadow: 0.1em 0.1em 0.4em gray; }
.brclear  { clear: both; }
.hidden   { display: none; }

/* clearfix */
.clearfix { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }

.center     { text-align: center; }
.font-tiny  { font-size:  70%; }
.font-small { font-size:  85%; }
.font-big   { font-size: 115%; }
.font-large { font-size: 130%; }

a.button         {
    margin: 0.2em; padding: 0.2em 0.5em;
    font-weight: bold; text-decoration: none;
    text-shadow: 1px 1px 2px gray; box-shadow: 0.1em 0.1em 0.4em gray;
    border: 1px solid #ff9900; border-radius: 4px;
    background-color: #ffffcc;
    background: linear-gradient(to bottom, #ffffcc 0%, #ffff99 20%, #ffff00 80%, #ffcc00 100%);
    transition: 0.2s;
}
a.button:link    { color: #0000cc; }
a.button:visited { color: #000099; }
a.button:active  { color: #0099ff; }
a.button:hover   { color: #ff0000; text-shadow: 0 0 0.5em #ffffff; background-color: #ffcc99; border: 1px solid #ff0000; box-shadow: 0.2em 0.2em 0.5em gray; background: linear-gradient(to bottom, #ffcc99 0%, #ffcc66 20%, #ffcc00 80%, #ff9900 100%); }

a.pagelink {
    padding: 0.1em 0.5em;
    text-decoration: none;
    box-shadow: 0 0 2px #666666; border-radius: 4px;
    background-color: #eeeeee;
    background: linear-gradient(to bottom, #f8f8f8 0%, #dddddd 100%);
}
a.pagelink:hover {
    box-shadow: 0 0 2px pink; background-color: #ffffee;
    background: linear-gradient(to bottom, #fffff8 0%, #ffffdd 100%);
}
a.pagelink:focus {
    box-shadow: 0 0 2px red; background-color: #ffffcc;
    background: linear-gradient(to bottom, #fffff8 0%, #ffffcc 100%);
}

#head-table { width: 100%; border-collapse: separate; border-spacing: 0.1em; margin: 0 auto; }

.head-area1  {
    color: #000000; font-size: 30px; font-weight: bold; text-align: center; vertical-align: middle;
    width: 50px; height: 50px;
    white-space: nowrap;
    text-shadow: 1px 1px 2px gray; box-shadow: 0 0 2px black, 0.1em 0.1em 0.4em lightgray;
    margin: 0; padding: 0;
    background-color: #ddffdd;
    background: linear-gradient(to bottom, #ddffdd 0%, #ccffcc 20%, #aaffaa 80%, #66ff66 100%);
}
.head-area2  {
    position: relative;
    margin: 0; padding: 0;
    background-image: url(/images/top160.jpg);
    background-size: cover; background-position: center; background-repeat: repeat-x;
}
.head-str1  {
    position: absolute; left: 0; bottom: 0;
    margin: 0; padding: 0.1em; border: 0;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}
.head-str2  {
    display: inline-block;
    margin: 0; padding: 0 0.2em; border: 0;
    color: #ffffff; font-size: 100%; font-weight: bold; text-align: left;
    white-space: nowrap;
    text-shadow: 0 0 2px black;
}
.head-area3  {
    margin: 0; padding: 0; border: 0;
    width: 120px;
    color: #ffffff; font-size: 24px; font-weight: bold; text-align: center; vertical-align: middle;
    text-shadow: 1px 1px 2px blue;
    white-space: nowrap;
    background-color: #ff6666;
    background: linear-gradient(to bottom, #ffcccc 0%, #ff6666 20%, #ff3333 80%, #ff0000 100%);
}

.toplink    {
    margin: 0; padding: 2px; cursor: pointer;
    box-sizing: border-box; line-height: 1.1;
    color: #000099; text-align: center; white-space: nowrap;
    font-weight: bold;
    border-radius: 0; box-shadow: 0 0 2px #ff9900;
    transition: 0.2s;
}
.toplink1   {
    background-color: #ffffcc;
    background: linear-gradient(to bottom, #fffff8 0%, #ffffcc 20%, #ffff99 80%, #ffee66 100%);
}
.toplink2   {
    background-color: #ffcc33;
    background: linear-gradient(to bottom, #ffeecc 0%, #ffdd99 20%, #ffcc66 80%, #ffaa00 100%);
}
.toplink:hover {
    color: #990099;
    background-color: #ff9900;
    background: linear-gradient(to bottom, #ffaa00 0%, #ffcc66 20%, #ffcc66 80%, #ffaa00 100%);
}

.leftlink   {
    width: 100%;
    margin: 0; padding: 0.2em 0.5em; cursor: pointer;
    color: #000066; text-align: center; font-weight: bold; white-space: nowrap;
    text-shadow: 1px 1px 2px lightgray; overflow: hidden; text-overflow: ellipsis;
    transition: 0.2s;
}
.leftlink1  {
    background-color: #99ffff;
    background: linear-gradient(to bottom, #f8ffff 0%, #ccffff 100%);
}
.leftlink2  {
    background-color: #33ccff;
    background: linear-gradient(to bottom, #f8ffff 0%, #ccffff 20%, #99ffff 80%, #00ffff 100%);
}
.leftlink:hover {
    color: #ff0000;
    background-color: #00ffff;
    background: linear-gradient(to bottom, #00ffff 0%, #ccffff 20%, #99ffff 80%, #00ffff 100%);
}

.special    { font-size: 90%; text-align: center; font-weight: bold; color: #003399; text-shadow: 0px 0px 2px #ffff00; }

#box-header   { margin: 0; padding: 0; text-align: center; }
#box-menu     { margin: 0; padding: 0; text-align: center; position: -webkit-sticky; position: sticky; top: 0; z-index: 90; }
#box-content { display: table; table-layout: fixed; margin: 0; padding: 0; width: 100%; text-align: center; }
#box-footer  { margin: 0; padding: 0; text-align: center; font-style: italic; padding: 0.2em; text-shadow: 1px 1px 2px gray; }

.box-menu     { margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.box-menuitem { width: calc( 100%/3 ); }
@media screen and ( min-width: 640px ) {
  .box-menuitem { width: calc( 100%/6 ); }
}

#box-topic     { text-align: center; overflow: hidden; }

#toplink-b     { display: none;  width: 100%; margin: 0 auto; }
#toplink-s     { display: table; width: 100%; margin: 0 auto; }

#content-body   { display: table-row-group;    width: 100%; text-align: center; }
#content-nav    { display: table-footer-group; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; z-index: 99; }
#content-images { text-align: center; }
#mailform       { width: 90%; background-color: #ffccff; margin: 1.0em auto; padding: 0.2em; box-shadow: 0.2em 0.2em 0.5em gray; text-shadow: 1px 1px 4px #9999ff; border-radius: 4px; }

#wthonji-popup { background-color: #ffffcc; border: 1px solid #ff6600; box-shadow: 2em 2em 2em rgba(0, 0, 0, 0.5); border-radius: 4px; z-index: 999; }

#fontsize-menu { position: absolute; right: 36px; top: 0; cursor: pointer; margin: 0; padding: 0; }
#button-menu   { position: absolute; top: 1px; right: 1px; text-align: right; z-index: 9999; }
#drop-menu     {
   position: absolute; top: 36px; right: 4px; z-index: 9998;
   background-color: rgba(255, 255, 255, 0.9);
   text-align: center; font-weight: bold;
   padding: 0.5em; border: 0;
   box-shadow: 0 0 2px #999999;
}

.wtcount { font-size: 80%; }

.show-elem          { /* opacity: 1.0 !important; transform: translate(0px, 0px) !important; */ }
.wttopic-elem       { transition: 0.5s; /* opacity: 0.0; transform: translate(0px, 20px); transform-origin: top center; */ }
.wttopic-elem:hover { background-color: #ffffcc; }


/* ========== Animation ========== */

.newitem    { color: #ff0000; font-weight: bold; font-style: italic; text-shadow: 0 0 4px #ff6600;
              animation:         anim-newitem 5s ease infinite normal;
              -webkit-animation: anim-newitem 5s ease infinite normal;
              -moz-animation:    anim-newitem 5s ease infinite normal;
              -o-animation:      anim-newitem 5s ease infinite normal;
            }
@keyframes anim-newitem {
      0% { color: #ff0000; }
     80% { color: #ff0000; }
     90% { color: #ffff00; }
    100% { color: #ff0000; }
}
@-webkit-keyframes anim-newitem {
      0% { color: #ff0000; }
     80% { color: #ff0000; }
     90% { color: #ffff00; }
    100% { color: #ff0000; }
}
@-moz-keyframes anim-newitem {
      0% { color: #ff0000; }
     80% { color: #ff0000; }
     90% { color: #ffff00; }
    100% { color: #ff0000; }
}
@-o-keyframes anim-newitem {
      0% { color: #ff0000; }
     80% { color: #ff0000; }
     90% { color: #ffff00; }
    100% { color: #ff0000; }
}

.newlink    { color: #330099; font-weight: bold; text-shadow: 0 0 2px #ff0000;
              animation:         anim-newlink 5s ease infinite normal;
              -webkit-animation: anim-newlink 5s ease infinite normal;
              -moz-animation:    anim-newlink 5s ease infinite normal;
              -o-animation:      anim-newlink 5s ease infinite normal;
            }
@keyframes anim-newlink {
      0% { color: #6600cc; }
     80% { color: #6600cc; }
     90% { color: #ffff00; }
    100% { color: #6600ff; }
}
@-webkit-keyframes anim-newlink {
      0% { color: #6600cc; }
     80% { color: #6600cc; }
     90% { color: #ffff00; }
    100% { color: #6600ff; }
}
@-moz-keyframes anim-newlink {
      0% { color: #6600cc; }
     80% { color: #6600cc; }
     90% { color: #ffff00; }
    100% { color: #6600ff; }
}
@-o-keyframes anim-newlink {
      0% { color: #6600cc; }
     80% { color: #6600cc; }
     90% { color: #ffff00; }
    100% { color: #6600ff; }
}

.notice     { animation:         anim-notice 5s ease infinite normal;
              -webkit-animation: anim-notice 5s ease infinite normal;
              -moz-animation:    anim-notice 5s ease infinite normal;
              -o-animation:      anim-notice 5s ease infinite normal;
            }
@keyframes anim-notice {
      0% { transform: scale3d(1.0, 1.0, 1.0); }
     90% { transform: scale3d(1.0, 1.0, 1.0); }
     95% { transform: scale3d(1.2, 1.2, 1.2); }
    100% { transform: scale3d(1.0, 1.0, 1.0); }
}
@-webkit-keyframes anim-notice {
      0% { -webkit-transform: scale3d(1.0, 1.0, 1.0); transform: scale3d(1.0, 1.0, 1.0); }
     90% { -webkit-transform: scale3d(1.0, 1.0, 1.0); transform: scale3d(1.0, 1.0, 1.0); }
     95% { -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2); }
    100% { -webkit-transform: scale3d(1.0, 1.0, 1.0); transform: scale3d(1.0, 1.0, 1.0); }
}
@-moz-keyframes anim-notice {
      0% { -moz-transform: scale3d(1.0, 1.0, 1.0); transform: scale3d(1.0, 1.0, 1.0); }
     90% { -moz-transform: scale3d(1.0, 1.0, 1.0); transform: scale3d(1.0, 1.0, 1.0); }
     95% { -moz-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2); }
    100% { -moz-transform: scale3d(1.0, 1.0, 1.0); transform: scale3d(1.0, 1.0, 1.0); }
}
@-o-keyframes anim-notice {
      0% { -moz-transform: scale3d(1.0, 1.0, 1.0); transform: scale3d(1.0, 1.0, 1.0); }
     90% { -moz-transform: scale3d(1.0, 1.0, 1.0); transform: scale3d(1.0, 1.0, 1.0); }
     95% { -moz-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2); }
    100% { -moz-transform: scale3d(1.0, 1.0, 1.0); transform: scale3d(1.0, 1.0, 1.0); }
}

.honjimark {
             animation:         anim-honjimark 60s infinite linear;
             -webkit-animation: anim-honjimark 60s infinite linear;
             -moz-animation:    anim-honjimark 60s infinite linear;
             -o-animation:      anim-honjimark 60s infinite linear;
           }
@keyframes anim-honjimark {
      0% { transform: scale(1.0,1.0); }
     98% { transform: scale(1.0,1.0); }
     99% { transform: scale(-1.0,1.0); }
    100% { transform: scale(1.0,1.0); }
}
@-webkit-keyframes anim-honjimark {
      0% { -webkit-transform: scale(1.0,1.0); }
     98% { -webkit-transform: scale(1.0,1.0); }
     99% { -webkit-transform: scale(-1.0,1.0); }
    100% { -webkit-transform: scale(1.0,1.0); }
}
@-moz-keyframes anim-honjimark {
      0% { -moz-transform: scale(1.0,1.0); }
     98% { -moz-transform: scale(1.0,1.0); }
     99% { -moz-transform: scale(-1.0,1.0); }
    100% { -moz-transform: scale(1.0,1.0); }
}
@-o-keyframes anim-honjimark {
      0% { -o-transform: scale(1.0,1.0); }
     98% { -o-transform: scale(1.0,1.0); }
     99% { -o-transform: scale(-1.0,1.0); }
    100% { -o-transform: scale(1.0,1.0); }
}

.honjistr {
             color: #ffffff;
             animation:         anim-honjistr 60s infinite linear;
             -webkit-animation: anim-honjistr 60s infinite linear;
             -moz-animation:    anim-honjistr 60s infinite linear;
             -o-animation:      anim-honjistr 60s infinite linear;
           }
@keyframes anim-honjistr {
      0% { color: #ffffff; }
     98% { color: #ffffff; }
     99% { color: #ffff00; }
    100% { color: #ffffff; }
}
@-webkit-keyframes anim-honjistr {
      0% { color: #ffffff; }
     98% { color: #ffffff; }
     99% { color: #ffff00; }
    100% { color: #ffffff; }
}
@-moz-keyframes anim-honjistr {
      0% { color: #ffffff; }
     98% { color: #ffffff; }
     99% { color: #ffff00; }
    100% { color: #ffffff; }
}
@-o-keyframes anim-honjistr {
      0% { color: #ffffff; }
     98% { color: #ffffff; }
     99% { color: #ffff00; }
    100% { color: #ffffff; }
}

.menuin {
          opacity: 1.0;
	  transform-origin: 50% 0%;
          animation:         anim-menuin 0.5s 1 ease;
          -webkit-animation: anim-menuin 0.5s 1 ease;
          -moz-animation:    anim-menuin 0.5s 1 ease;
          -o-animation:      anim-menuin 0.5s 1 ease;
        }
@keyframes anim-menuin {
      0% { opacity: 0.01; transform: scale(1.00, 0.01); }
    100% { opacity: 1.00; transform: scale(1.00, 1.00); }
}
@-webkit-keyframes anim-menuin {
      0% { opacity: 0.01; -webkit-transform: scale(1.00, 0.01); }
    100% { opacity: 1.00; -webkit-transform: scale(1.00, 1.00); }
}
@-moz-keyframes anim-menuin {
      0% { opacity: 0.01; -moz-transform: scale(1.00, 0.01); }
    100% { opacity: 1.00; -moz-transform: scale(1.00, 1.00); }
}
@-o-keyframes anim-menuin {
      0% { opacity: 0.01; -o-transform: scale(1.00, 0.01); }
    100% { opacity: 1.00; -o-transform: scale(1.00, 1.00); }
}

.menuout {
          opacity: 0.01;
	  transform-origin: 50% 0%;
          animation:         anim-menuout 0.5s 1 ease;
          -webkit-animation: anim-menuout 0.5s 1 ease;
          -moz-animation:    anim-menuout 0.5s 1 ease;
          -o-animation:      anim-menuout 0.5s 1 ease;
        }
@keyframes anim-menuout {
      0% { opacity: 1.00; transform: scale(1.00, 1.00); }
    100% { opacity: 0.01; transform: scale(1.00, 0.01); }
}
@-webkit-keyframes anim-menuout {
      0% { opacity: 1.00; -webkit-transform: scale(1.00, 1.00); }
    100% { opacity: 0.01; -webkit-transform: scale(1.00, 0.01); }
}
@-moz-keyframes anim-menuout {
      0% { opacity: 1.00; -moz-transform: scale(1.00, 1.00); }
    100% { opacity: 0.01; -moz-transform: scale(1.00, 0.01); }
}
@-o-keyframes anim-menuout {
      0% { opacity: 1.00; -o-transform: scale(1.00, 1.00); }
    100% { opacity: 0.01; -o-transform: scale(1.00, 0.01); }
}

.topicin {
          opacity: 1.00;
          height: 11.5em;
          animation:         anim-topicin 2s 1 ease;
          -webkit-animation: anim-topicin 2s 1 ease;
          -moz-animation:    anim-topicin 2s 1 ease;
          -o-animation:      anim-topicin 2s 1 ease;
        }
@keyframes anim-topicin {
      0% { opacity: 0.01; height: 0.1em; }
    100% { opacity: 1.00; height: 11.5em; }
}
@-webkit-keyframes anim-topicin {
      0% { opacity: 0.01; height: 0.1em; }
    100% { opacity: 1.00; height: 11.5em; }
}
@-moz-keyframes anim-topicin {
      0% { opacity: 0.01; height: 0.1em; }
    100% { opacity: 1.00; height: 11.5em; }
}
@-o-keyframes anim-topicin {
      0% { opacity: 0.01; height: 0.1em; }
    100% { opacity: 1.00; height: 11.5em; }
}

.topicout {
          opacity: 0.01;
          height: 0.0em;
          animation:         anim-topicout 1s 1 ease;
          -webkit-animation: anim-topicout 1s 1 ease;
          -moz-animation:    anim-topicout 1s 1 ease;
          -o-animation:      anim-topicout 1s 1 ease;
        }
@keyframes anim-topicout {
      0% { opacity: 1.00; height: 11.5em; }
    100% { opacity: 0.01; height: 0.1em; }
}
@-webkit-keyframes anim-topicout {
      0% { opacity: 1.00; height: 11.5em; }
    100% { opacity: 0.01; height: 0.1em; }
}
@-moz-keyframes anim-topicout {
      0% { opacity: 1.00; height: 11.5em; }
    100% { opacity: 0.01; height: 0.1em; }
}
@-o-keyframes anim-topicout {
      0% { opacity: 1.00; height: 11.5em; }
    100% { opacity: 0.01; height: 0.1em; }
}



/* ========== Responsive Design ========== */

h1          { font-size: 150%; }
h2          { font-size: 130%; }
h3          { font-size: 120%; }
.box        { font-size: 100%; }
.toplink    { font-size:  90%; }


/* For smartphone */
html, input, select, textarea { font-size: calc( 16px + 0.2vmin ); }
.head-area3  { display: none; }
/* .limage      { width: 85%; } */

/* For tiny window */
@media screen and ( min-width : 480px ) {
    /* html, input, select, textarea { font-size: 100%; } */
}

/* For small window */
@media screen and ( min-width : 560px ) {
    /* html, input, select, textarea { font-size:  110%; } */
}

/* For small window */
@media screen and ( min-width : 640px ) {
    .head-area3  { display: table-cell; }
}

/* For middle window */
@media screen and ( min-width : 641px ) {
    /* html, input, select, textarea { font-size: 100%; } */
    .toplink      { font-size:  80%; }
    #toplink-b    { display: table; }
    #toplink-s    { display: none; }
    #content-body { display: table-cell; text-align: center; padding: 0 0.1em; }
    #content-nav  { display: table-cell; width: 180px; white-space: nowrap; text-align: center; padding: 0 0.2em; }
    .box          { padding: 0.6em; }
    /* .limage       { width: 170px; } */
    #fontsize-menu { right: 0px; top: 0; }
    #button-menu   { display: none; }
}

/* For big window */
@media screen and ( min-width : 800px ) {
    /* html, input, select, textarea { font-size: 110%; } */
    .head-area2   { background-image: url(/images/top180.jpg); }
    .toplink     { font-size:  90%; }
    #content-nav { width: 200px; }
    .box         { padding: 0.7em; }
    /* .limage      { width: 180px; } */
}

/* For large window */
@media screen and ( min-width : 1000px ) {
    /* html, input, select, textarea { font-size: 120%; } */
    .head-area2   { background-image: url(/images/top200.jpg); }
    .toplink     { font-size: 100%; }
    #content-nav { width: 220px; }
    .box         { padding: 0.8em; }
    /* .limage      { width: 200px; } */
}

/* For largest window */
@media screen and ( min-width : 1280px ) {
    /* html, input, select, textarea { font-size: 140%; } */
    #content-nav { width: 240px; }
    .box         { padding: 1.0em; }
    /* .limage      { width: 220px; } */
}

/* For Print */
@media print {
    .noprint       { display: none; }
    #head-table    { display: none; }
    #box-menu      { display: none; }
    #box-topic     { display: none; }
    #box-search    { display: none; }
    #content-body  { display: block; }
    #content-nav   { display: none; }
    #wthonji-popup { display: none; }
    #fontsize-menu { display: none; }
    #button-menu   { display: none; }
    #drop-menu     { display: none; }
    .box           { box-shadow: none; margin: 0.1em 0.5em; }
    .shadow        { box-shadow: none; }
    #mailform      { box-shadow: none; }
}