body         {
              font-family:serif;
              background-image : url(gif/back1.gif);
              width: 860;
}
div         {
             margin-right:auto;
             margin-left:auto;
}
div.kakudai:hover  {
             transform:  scale(1.1, 1.1);
}
table.wid    {
             width: 860px;
}
.wid2        {
             width: 700px;
}
.wid3        {
             width: 215px;
}
.wid4       {
             width: 430px;
}
.wid50       {
             width: 50px;
}
.wid80       {
             width: 80px;
}
.wid86       {
             width: 86px;
}
.wid100       {
             width: 100px;
}
.wid120    {
             width: 120px;
}
.wid1        {
             width: 160px;
}
.wid170       {
             width: 170px;
}
.wid215       {
             width: 215px;
}
.wid240       {
             width: 240px;
}
.wid380       {
             width: 380px;
}
.wid520      {
             width: 520px;
}
.wid760       {
             width: 760px;
}
.bac          {
              background:#dcdcdc;
}
.bac1         {
              background:#f0ffff;
}
.bac2         {
              background:#f5f5dc;
}
.bac3         {
              background:#fafad2;
}
.bac4         {
              background-image:url(gif/back2.gif);
}
.bac5         {
             background-image:url(gif/back3.gif);
}
.bac6         {
              background-image:url(gif/bc.png);
}
.bac7         {
              background-image:url(gif/back4.gif);
}
.bac8         {
              background-image:url(gif/back5.gif);
}
td.wido4       {
             width: 430px;
}
h1:hover           {
              text-align:center;
             transform:  scale(1.2, 1.2);
}
div.anime    {
              background:  red;
              margin:  -40px 0px;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              animation: anime 10s infinite linear;
}
@keyframes anime  {
                  0%{transform:translate(   40px,   0px);} 
                50%{transform:translate(   350px,  0px);}
                100%{transform:translate(   40px,   0px);}
}
.sakai       {
               font-size:3em;
               color: #993399;
               font-family:sans-serif;
               text-shadow:4px 4px 4px #808080;
               text-align:center;
}
h2           {
              color:aqur;
              font-family:sans-serif;
              text-align:center;
}
h3           {
              text-align:center;
              color:#fff8dc;
              background-image : url(gif/back1.jpg);
              padding:0.3em 0.3em 0.3em 0.3em;
              margin-top:1em;
}
hr           {
              height:0px;
              color:#88ec88;
              width:860px;
}
hr#abc           {
              height:0px;
              color:#88ec88;
              width:800px;
}
.sa          {
             border-width:2px;
             border-color:#ff6600;
             border-style:solid;
}
.sa1          {
             border-width:1px;
             border-color:#000000;
             border-style:solid;
}
.bord        {
             border-width: 1px;
             border-style:solid;
             border-color:black;
             border-collapse:collapse;
}
.bord1       {
             border:solid 2px;
             border-style:solid;
             border-color:black;
             border-collapse:collapse;
}
.ta        {
             width:100%;
             border:solid 1px;
             border-collapse:collapse;
}
.naka        {
              text-align:center;
}
.naka1       {
              margin-right:auto;
              margin-left:auto;
              width:860px;
}
.naka2       {
              margin-right:auto;
              margin-left:auto;
              width:380px;
}
.left         {
             text-align:left;
}
.left1        {
             float:left;
}
.right         {
             text-align:right;
}
.clear       {
             clear:both;
             clear: left;
}
#cont:afte           {
                          max-width: 860px;
                          margi: auto;
                          display: block;
                          content: "";
                          clear: both;   /*回り込み解除*/
}
figure                 {
                          float: left;                       /*　左に寄せて後続を右に回り込ませる*/
                          margin: 7px 15px 0px 10px;   /*画像の周囲のスペース*/
                          display: inline-block;
                          text-align: center;
}
figure img           {
                          display: block;
                          margin: auto;
                          width: 100%;
}
figcaption           {
                          display: block;
                          color: #2f4f4f;
                          font-size:1em;
              font-family:sans-serif;
                          margin: 5px 0 5px 0;  /*画像とキャプションのスペース*/
}
.caption#ue         {
            caption-side:top;
}
.caption#sita         {
            caption-side:bottom;
}
p            {
              font-size:1em;
              line-height:1.3em;
              font-family:sans-serif;
              padding:0.5em 1em 0.5em 1em;
}
.ao        {
              color: blue;
}
.aka       {
              color: red;
}
.midori    {
              color: green;
}
.shadow    {
              text-shadow:3px 3px 3px #808080;
}
.boxshadow      {
               box-shadow:5px 5px 5px #808080;
}
.mo        {
              font-family:sans-serif;
              font-size:1em;
}
.mo1       {
              font-family:sans-serif;
              font-size:0.8em;
}
.mo2       {
              font-family:sans-serif;
              font-size:0.9em;
}
.mo4       {
              color: red;
              font-family:sans-serif;
}
.mo5       {
              color: blue;
              font-family:sans-serif;
}
.mo13       {
              font-size:1.3em;
              font-family:sans-serif;
}
.moji7       {
              text-align:center;
              font-size: 2em;
              font-family:"Times New Roman",serif;
              text-shadow:5px 5px 5px #808080;
              line-height: 1.3em;
              color:blue;                            /*文字色：ブルー*/
}
.top          {
              vertical-align: text-top;
}
.futoji      {
              font-weight:bold;
}
.line        {
              line-height: 1.2em;
}
.pad        {
             padding: 0.3em 0.3em 0.3em 0.3em;
}
.pad1      {
              padding:0.5em 1em 0.5em 1em;
}
.pad2       {
              padding:20px;
}
.margi     {
              margin:20px;
}
.hyodai      {
              font-size:2em;
               color: blue;
               font-family:sans-serif;
               text-shadow:3px 3px 3px #808080;
               text-align:center;
              padding:0.1em 0.25em 0.25em 0.25em;
}
.style-1     {
              background-image : url(gif/bc1.tif);
              width: 680px;
              height: 400px;
              overflow: scroll;
              padding:10px;
}
.style-2     {
              position: ;
              top: 0px:
              left: 0px;
              width: 320px;
              height: 180px;
              disply: block;
              z-index: 99;
}
.style-3     {
              position:relative;
              top: 0px;
              left: 120px;
              width: 640px;
              height: 360px;
              disply: block;
              z-index: 99;
              border: 2px solid red;
}
.style-4     {
              width:460px;
              height:620px;
              disply: block;
              border: 2px solid blue;
              padding:10px;　　　　　　　
}
.im          {
             float:left;
             margin: 0 20px 0 0;
}
.caution   {
	     display:none;
}
.btn       {
             border: solid 1px bler;
             padding: 6px;
             box-shadow: 2px 2px 4px #888;
              text-align:center;
              background-color:#ccffff;
}
button:hover {
             background: #ffff88;
             transform:  scale(1.1, 1.1);
}
@media(max-width: 480px){
       .container{
          flex-direction: column;
       }
}