@import url(https://fonts.googleapis.com/css?family=Lato:900);
*, *:before, *:after{
  box-sizing:border-box;
}


  body{
  text-align: center;
  font-size: 100%;
  background-color:#383c3c;
  background-image: url(img/sndn-back.jpg);
  line-height: 1.3em;
  font-family: 'Lato', sans-serif;
}


  A { text-decoration: none; }
  A:link { color: #FFFFFF; }
  A:visited { color: #fffffc; }
  A:hover { color: #9fc24d; }
  A:active { color: #CC6666; }
  A:#link { color: #FFFFFF; }

  div#one { width: 650px;
 border-style: none;
 overflow: auto;
 background-color: #b0c4de;
 background-image: url(tyty.jpg);
 line-height: 140%; color: #008b8b;
 }

  div#foo{
  width: 90%;
  margin: 0 auto;
  text-align: center;
}
  .letter{
  display: inline-block;
  font-weight: 800;
  font-size: 45px;
  margin: 5px;
  position: relative;
  color: #c70067;
  transform-style: preserve-3d;
  perspective: 400;
  z-index: 1;
}
  .letter:before, .letter:after{
  position:absolute;
  content: attr(data-letter);
  transform-origin: top left;
  top:0;
  left:0;
}

  .letter, .letter:before, .letter:after{
  transition: all 0.3s ease-in-out;
}

  .letter:before{
  color: #ffffff;
  text-shadow: 
    -1px 0px 1px rgba(255,255,255,.8),
    1px 0px 1px rgba(0,0,0,.8);
  z-index: 3;
  transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
}


  .letter:after{
  color: rgba(0,0,0,.11);
  z-index:2;
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
}
  .letter:hover:before{
  color: #ffffff;
  transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
}
  .letter:hover:after{
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
}


  div#two { 
  background-color: #008b8b;
 color:  #b0c4de;
 margin: 0px 
 }

  
  div#three { width: 550px;
 padding: 15px;
 text-align: left;
 background-color: #ea5550;
 border: solid 5px #ea5550;
 font-size: 18px;
 overflow: auto;
 line-height: 130%;
 }

  div#four { width: 500px;
 padding: 15px;
 text-align: left;
 background-color: #fcc800;
 border: solid 5px #fcc800;
 font-size: 13px;
 overflow: auto;
 line-height: 130%; }

  div#five { width: 500px;
 padding: 15px;
 text-align: left;
 background-color: #00a497;
 border: solid 5px #00a497;
 font-size: 13px;
 overflow: auto;
 line-height: 130%; }

  p.example1 { font-size: 120%; line-height: 110%; }

  p.example2 { font-size: 220%; line-height: 10%; font-weight: 900; }

  p.example3 { font-size: 140%; line-height: 130%; font-weight: 800; }

  p.sample4 {line-height: 150%; }


  div#etc { width: 360px; border-style: none; overflow: auto; background-color: #e8d3c7; line-height: 190%; padding: 20px;}

  div#left { float:left; padding: 10px; text-align: right; }

  div#right { float:right; padding: 2px; text-align: right; }

  p.f { width: 540px; text-align: right; font-weight: bold; }

  p.s { font-size: 14px; }
  p.ss { font-size: 10px; }

  .no { font-weight: normal; }
  .b { font-weight: bold; }
  .s { font-size: 12px; }

  p.r { text-align: right; }

  p.mi { color: #006600; font-size: 18px; font-weight: bold; }



  div#shutuen {
 width: 630px;
 line-height: 1em;
 table-align: center;
 }

  div#shutuen p {
 background-color: #b0c4de;
 font-size: 14px;
 color: #fffffc;
 text-align: center;
 padding: 5px;
 line-width: 50%; }

  div#shutuen TD {
 font-size: 18px;
 font-weight: bold;
 text-align: center;
 line-height: 30px;
 background-color: #008b8b;
 color: #e5c1cd; }

  div#shutuen IMG { width: 100px; }



  div#staff { width: 630px; font-size: 15px; text-align: center; padding: 6px; font-weight: bold; color: #fffffc; line-height: 120%; }
  div#staff p { font-size: 12px; color: #fffffc; background-color: #006e54;  padding: 3px; font-weight: bold; text-align: center }

  div#misute { width: 500px; padding: 15px; text-align: left; background-color: #fffffc; border: solid 8px #95483f; font-size: 14px; overflow: auto }

  div#misute p { color: #006600; font-weight: bold; text-align: center;  word-wrap:break-all; }



  div#tayori { width: 90px; padding: 8px; background-color: #CC9900; color: #FFFFFF; font-weight: bold; }

  div#nittei { width: 570px; padding: 10px; background-color: #fef9fb; font-size: 16px; border: solid 7px #44617b; line-height: 1.2em; }

  TD.top { vertical-align: top; text-align: center; }

  div#nittei TABLE { font-size: 14px; border: solid 1px #ec6800; }
  div#nittei TD { width: 25px; text-align: center; border: solid 1px #a0a1f2; background-color:#badcad; padding: 3px; }
  div#nittei TD.w { width: 70px; }
  div#nittei TD.p { width: 100%; }
  div#nittei TD.r { background-color: #f0908d; }
  div#nittei TD.g { background-color: #a3d6cc; }
  div#nittei .red { color: red; }
  div#nittei .blue { color: blue; }

  div#hatubai { width: 100px; font-size: 16px; background-color: #00e600; font: bold; padding: 5px; color: #FFFFFF; }

  div#kane TD { text-align: center; width: 130px; font-size: 14px; }