@charset "utf-8";

/* @group basis */
html      { line-height: 1.5; width: 100%; height: 100%; }
body      { font-size: 100%; margin: 0; padding: 0; color: #000033; -webkit-text-size-adjust: 100%; 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; }
a img:hover { opacity: 0.8; }
a:link      { color: #000099; text-decoration: none; }
a:visited   { color: #006600; text-decoration: none; }
a:active    { color: #0099ff; text-decoration: underline; }
a:hover     {
    color: #ff0000; background-color: #99ffff;
    border-radius: 4px; text-decoration: underline; text-shadow: 0 0 4px #ffff00;
    background: linear-gradient(to bottom, #99ffff, #ccffff 50%, #99ffff);
}

select, input { font-weight: normal; font-size: 110%; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea {
    border-radius: 4px; transition: 0.2s;
    border: 2px solid white; background-color: #f8ffff; box-shadow: 0 0 2px blue;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="number"]:hover, textarea:hover {
    border: 2px solid pink; background-color: #ffffee; box-shadow: 0 0 2px pink;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, textarea:focus {
    border: 2px solid red; background-color: #ffffdd; box-shadow: 0 0 2px red;
}
/* @end */


/* @group For all window */
#wt-header       { position: fixed; top: 0; left: 0; z-index: 9998; width: 100%; margin: 0; padding: 0; text-align: left; opacity: 0.9; box-shadow: 0 4px 8px gray; background-color: #004a00; background: linear-gradient(to bottom, #009900, #004a00); }
#wt-header h1    { margin: 0; padding: 0; position: absolute; left: 0; top: 0; text-align: left; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 4px #9999ff; }
#wt-header-title { color: #ffff00; }
#wt-header-link  { margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; width: 100%; overflow: hidden; white-space: nowrap; font-size: 12px; text-align: left; background-color: #0066cc; background: linear-gradient(to bottom, #0099ff, #003366); }

#wt-header-menu  { position: fixed; top: 1px; right: 1px; z-index: 9999; text-align: right; }
#wt-header-drop  { position: absolute; top: 36px; right: 4px; z-index: 9998; background-color: rgba( 192, 255, 192, 0.8 ); text-align: center; padding: 0.5em; box-shadow: 2px 2px 4px gray; }

#wt-footer       { position: relative; text-align: right; background-color: #004a00; background: linear-gradient(to bottom, #009900, #004a00); }
#wt-footer-str   { margin: 0; padding: 0; position: absolute; right: 0; bottom: 0; text-align: right; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 4px #9999ff; }
#wt-footer-title { color: #ffff00; }
#wt-footer-link  { margin: 0; padding: 0; position: absolute; right: 0; top: 0; width: 100%; overflow: hidden; white-space: nowrap; font-size: 12px; text-align: right; background-color: #0066cc; background: linear-gradient(to bottom, #0099ff, #003366); }

.wt-link-on          { height: 20px; margin: 0; padding: 0 4px; color: #ff6600; background-color: #99ffff; background: linear-gradient(to bottom, #ccffff, #00ffff); }
.wt-link-off         { height: 20px; margin: 0; padding: 0 4px; color: #ffffff; background-color: #0099ff; background: linear-gradient(to bottom, #00ccff, #006699); transition: 0.2s; }
.wt-link-off:hover   { color: #ff6600; background-color: #99ffff; background: linear-gradient(to bottom, #ccffff, #00ffff); }
.wt-link-off a       { color: #ffffff; transition: 0.2s; }
.wt-link-off a:hover { color: #ff6600; }

#wt-header .wt-link-on             { float: left; border-left: 1px solid #00ffff; }
#wt-header .wt-link-off            { float: left; border-left: 1px solid #006699; }
#wt-header .wt-link-on:last-child  { border-right: 1px solid #00ffff; }
#wt-header .wt-link-off:last-child { border-right: 1px solid #006699; }
#wt-footer .wt-link-on             { float: right; border-right: 1px solid #00ffff; }
#wt-footer .wt-link-off            { float: right; border-right: 1px solid #006699; }
#wt-footer .wt-link-on:last-child  { border-left: 1px solid #00ffff; }
#wt-footer .wt-link-off:last-child { border-left: 1px solid #006699; }

#contents-wrapper       { position: relative; width: 100%; height: 100%; margin: 0; padding: 56px 0 0 0; }
#contents-wrapper:after { content: "."; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }
#center-body            { text-align: center; }
#right-banner           { font-size: 90%; text-align: center; }

.link-body        { font-size: 80%; font-weight: bold; text-align: center; color: #ffffff; text-shadow: 0 0 2px #000066; box-shadow: 1px 1px 4px gray; padding: 0.1em; }
.link-body1       { background-color: #ff2e12; background: linear-gradient(to bottom, #ff7766, #ff2e12); transition: 0.2s; }
.link-body1:hover { background-color: #ff9966; background: linear-gradient(to bottom, #ffcc99, #ff9966); }
.link-body3       { background-color: #7200ac; background: linear-gradient(to bottom, #7200ac, #4e0038); transition: 0.2s; }
.link-body3:hover { background-color: #cc00ff; background: linear-gradient(to bottom, #cc00ff, #7200ac); }

.banner-title    { font-size: 130%; font-weight: bold; text-align: center; margin: 0 2%; padding: 0.2em; border: 1px solid #66cc66; color: #000099; text-shadow: 0 0 2px gray; background-color: #ccffcc; background: linear-gradient(to bottom, #eeffee, #99ff99); }

.banner-mirror       { font-weight: bold; text-align: center; margin: 0 2%; padding: 0.2em; border-bottom: 1px gray solid; transition: 0.2s; }
.banner-mirror:hover { color: #660000; border: 1px solid #00ffff; background-color: #ccffff; background: linear-gradient(to bottom, #ccffff, #00ffff); }
.banner-mirror1      { color: #000066; border: 1px solid #999999; background-color: #cccccc; background: linear-gradient(to bottom, #ffffff, #cccccc); }
.banner-mirror2      { color: #000066; border: 1px solid #ffff00; background-color: #ffffcc; background: linear-gradient(to bottom, #ffffcc, #ffff00); }

.banner-link       { font-weight: bold; text-align: center; margin: 0 2%; padding: 0.2em; border-bottom: 1px gray solid; color: #000066; border: 1px solid #999999; background-color: #cccccc; background: linear-gradient(to bottom, #ffffff, #cccccc); transition: 0.2s; }
.banner-link:hover { color: #660000; border: 1px solid #00ffff; background-color: #99ffff; background: linear-gradient(to bottom, #ccffff, #00ffff); }
.banner-link1    { color: #000066; border: 1px solid #999999; background-color: #cccccc; background: linear-gradient(to bottom, #ffffff, #cccccc); }
.banner-link2    { color: #660000; border: 1px solid #00ffff; background-color: #99ffff; background: linear-gradient(to bottom, #ccffff, #00ffff); }

.menu-box   { margin: 0.2em auto 0 auto; padding: 0; width: 300px; border: 1px solid #0000ff; text-align: center; }
.menu-title { margin: 0; padding: 0.1em 0.2em; color: #ffffcc; font-weight: bold; font-size: 120%; background-color: #0000ff; background: linear-gradient(to bottom, #0099ff, #0000ff); }
.menu-link  { margin: 0; padding: 0.1em 0.2em; color: #000000; font-weight: bold; font-size: 100%; background-color: #eeeeee; border-bottom: 1px solid #cccccc; background: linear-gradient(to bottom, #ffffff, #cccccc); transition: 0.2s; }
.menu-link:hover      { background-color: #eeffff; border-bottom: 1px solid #ccffff; background: linear-gradient(to bottom, #ffffff, #99ffff); }
.menu-link:last-child { border: none; }

.web-link       { margin: 0.2em auto 0 auto; padding: 0.2em; width: 300px; color: #ffff00; font-weight: bold; text-align: center; box-shadow: 2px 2px 8px gray; background-color: #0000ff; background: linear-gradient(to bottom, #0099ff, #0000ff); transition: 0.2s; }
.web-link:hover { background-color: #00ccff; background: linear-gradient(to bottom, #66ccff, #0099ff); }

.cm-banner       { margin: 0.1em auto; text-align: center; }
.font-var-s      { font-size:  80%; }
.font-var-m      { font-size: 100%; }
.font-var-l      { font-size: 110%; }
.font-var-x      { font-size: 125%; }
.font-tiny       { font-size:  70%; }
.font-small      { font-size:  85%; }
.font-normal     { font-size: 100%; }
.font-large      { font-size: 110%; }
.font-extra      { font-size: 125%; }

h1               { font-size: 200%; margin: 0.6em auto; color: #004a00; font-weight: bold; text-shadow: 4px 4px 16px gray; }
h2               { font-size: 150%; margin: 0.3em auto; color: #009900; font-weight: bold; text-shadow: 4px 4px 8px gray; }

.common-header   { text-align: left;  background-color: #004a00; margin: 0.2em; box-shadow: 4px 4px 8px gray; text-shadow: 1px 1px 4px #99ff99; }
.common-footer   { text-align: right; background-color: #004a00; margin: 0.2em; box-shadow: 4px 4px 8px gray; text-shadow: 1px 1px 4px #99ff99; }
.common-outline  { background-color: #ffffcc; margin: 0.5em auto; padding: 0.5em; border: 2px solid #ff9900; box-shadow: 4px 4px 16px gray; text-shadow: 1px 1px 4px #9999ff; }
.common-index    { background-color: #ddffff; margin: 0.5em auto; padding: 0.5em; border: 2px solid #0000ff; box-shadow: 4px 4px 16px gray; text-shadow: 1px 1px 4px #9999ff; }
.common-chapter  { font-size: 130%; color: #004a00; font-weight: bold; margin: 0.5em 12px; padding: 0.2em 0.5em; text-align: left; box-shadow: 4px 4px 16px gray; text-shadow: 2px 2px 8px #006666; border-left: 8px solid #004a00; border-bottom: 2px solid #004a00; background-color: #ccffcc; background: linear-gradient(to bottom, #eeffee, #ccffcc); }
.common-section  { font-size: 120%; color: #004a00; font-weight: bold; margin: 0.5em 12px; padding: 0.2em 0.5em; text-align: left; border-bottom: 1px dashed #004a00; text-shadow: 1px 1px 4px #ff0000; }
.common-part     { font-size: 110%; margin: 0.2em 0; font-weight: bold; }
.common-content  { font-size: 100%; margin: 0.5em 12px; padding: 0.5em; text-align: left; background-color: #ffffee; border: 2px solid #004a00; box-shadow: 4px 4px 16px gray; }
.common-mail     { background-color: #ffeeff; margin: 0.5em auto; padding: 0.5em; border: 2px solid #ff99ff; box-shadow: 4px 4px 16px gray; text-shadow: 1px 1px 4px #9999ff; }

.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; }
.left       { text-align: left; }
.center     { text-align: center; }
.right      { text-align: right; }
.large      { font-size: 150%; }
.big        { font-size: 120%; }
.small      { font-size: 80%; }
.tiny       { font-size: 65%; }
.font-large { font-size: 150%; }
.font-big   { font-size: 120%; }
.font-small { font-size: 80%; }
.font-tiny  { font-size: 65%; }
.clear-both { clear: both; }
.hidden     { display: none; }

#wtcount {
  display: flex; justify-content: flex-end; /* flex-start, center, flex-end */
}
#wtcount span {
  display: inline-block;
  color: #ffffcc; background-color: #333333;
  font-size: 10px; font-weight: bold; text-align: center;
}

.jscounter  { font-size: 80%; padding: 0 0.1em; color: #ffff00; background-color: #000000; font-weight: bold; font-style: italic; }
.wtcount    { font-size: 80%; padding: 0 0.1em; color: #ffff00; background-color: #000000; font-weight: bold; font-style: italic; }
.counter    { font-size: 80%; text-align: right; font-weight: bold; font-style: italic; color: #ff9900; }
.modified   { font-size: 80%; margin: 0.1em; text-align: right; font-weight: bold; color: #ff9900; }
.copyright  { font-size: 80%; text-align: right; }
.address    { font-size: 80%; text-align: right; font-style: italic; }
.wtpage     { text-align: right; }
.announce   { font-size: 90%; text-align: center; font-weight: bold; color: #0066cc; }
.jsnote     { font-size: 80%; margin: 0 0.5em; text-align: left;  font-style: italic; color: #666666; }
.engnote    { font-size: 80%; margin: 0 0.5em; text-align: right; font-style: italic; color: #666666; }
.wtclock    { font-size: 80%; margin: 0 0.5em; text-align: right; font-style: italic; color: #000099; }
.indent1    { text-align: left; margin: 0.2em 0.5em 0.2em 2.0em; }
.indent2    { text-align: left; margin: 0.2em 0.5em 0.2em 4.0em; }
.indent3    { text-align: left; margin: 0.2em 0.5em 0.2em 6.0em; }
/* @end For all window */


/* For smart phone banner */
body         { margin-bottom: 58px; }
.smartphone1 { margin: 0; padding: 0; position: fixed; left: 0px; bottom: 0px; width: 100%; height: 54px; text-align: center; background-color: #000000; opacity: 0.5; text-align: center; }
.smartphone2 { margin: 0; padding: 0; position: fixed; left: 0px; bottom: 2px; width: 100%; height: 50px; text-align: center; text-align: center; }
@media screen and ( max-width : 319px ) {
    body         { margin-bottom: 0; }
    .smartphone1 { display: none; }
    .smartphone2 { display: none; }
}
@media screen and ( min-width : 480px ) {
    body         { margin-bottom: 68px; }
    .smartphone1 { height: 64px; }
    .smartphone2 { height: 56px; }
}
@media screen and ( min-width : 640px ) {
    body         { margin-bottom: 0; }
    .smartphone1 { display: none; }
    .smartphone2 { display: none; }
}


/* For smartphone window (small) */
@media screen and ( max-width : 480px ) {
    select	     { font-size: 90%; }
    input 	     { font-size: 90%; }
    textarea 	     { font-size: 90%; }
    #center-body     { font-size: 90%; }
}

/* For smartphone window (small) */
@media screen and ( min-width : 481px ) {
    select	     { font-size: 100%; }
    input 	     { font-size: 100%; }
    textarea 	     { font-size: 100%; }
    #center-body     { font-size: 100%; }
}

/* For smartphone window (small) */
@media screen and ( max-width : 640px ) {
    #wt-header       { height:  36px; }
    #wt-header-link  { display: none; }
    #wt-header-menu  { display: block; }
    #wt-footer       { height:  36px; }
    #wt-footer-link  { display: none; }
}

/* For smartphone window (big) */
@media screen and ( min-width : 641px ) {
    select	     { font-size: 110%; }
    input 	     { font-size: 110%; }
    textarea 	     { font-size: 110%; }
    #center-body     { font-size: 110%; }
    #wt-header       { height:  56px; }
    #wt-header-link  { display: block; height: 20px; text-align: left; }
    #wt-header-menu  { display: none; }
    #wt-footer       { height:  56px; }
    #wt-footer-link  { display: block; height: 20px; text-align: right; }
    .link-body       { font-size:  90%; }
}

/* For tablet window */
@media screen and ( max-width : 800px ) {
    #contents-wrapper { display: table; table-layout: fixed; }
    #center-body      { display: table-cell; width: 100%; padding: 0.1em; }
    #right-banner     { display: table-footer-group; float: none; width: 100%; }
}

/* For tablet window */
@media screen and ( min-width : 801px ) {
    select	  { font-size: 100%; }
    input 	  { font-size: 100%; }
    textarea 	  { font-size: 100%; }
    #center-body  { font-size: 100%; padding: 0.2em 344px 0.2em 0.2em; }
    #right-banner { display: block; float: right; width: 340px; }
    .link-body    { font-size: 100%; }
}

/* For PC window (full size) */
@media screen and ( min-width : 1000px ) {
    select	     { font-size: 105%; }
    input 	     { font-size: 105%; }
    textarea 	     { font-size: 105%; }
    #center-body     { font-size: 105%; padding: 0.2em 348px 0.2em 0.2em; }
}

/* For PC window (large size) */
@media screen and ( min-width : 1200px ) {
    select	     { font-size: 110%; }
    input 	     { font-size: 110%; }
    textarea 	     { font-size: 110%; }
    #center-body     { font-size: 110%; padding: 0.3em 352px 0.3em 0.3em; }
}

/* For Print */
@media print {
    #center-body  { padding: 0.2em; }
    #wt-header    { display: none; }
    #wt-footer    { display: none; }
    #left-banner  { display: none; }
    #right-banner { display: none; }
    .noprint      { display: none; }
    .cm-banner    { display: none; }
    .smartphone1  { display: none; }
    .smartphone2  { display: none; }
    marquee       { display: none; }
    .common-header  { box-shadow: none; }
    .common-footer  { box-shadow: none; }
    .common-outline { box-shadow: none; }
    .common-index   { box-shadow: none; }
    .common-chapter { box-shadow: none; }
    .common-content { box-shadow: none; }
    .common-mail    { box-shadow: none; }
}


/* Animation */

.newitem { color: #ff0000; font-weight: bold; font-style: italic; text-shadow: 0 0 4px #ff9900; animation: anim-newitem 5s ease infinite normal; -webkit-animation: anim-newitem 5s ease infinite normal; -moz-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; }
}

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

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