body {background-image:url(images/PICT0304.jpg)}
/*  body {background-color:#efffee}*/

/*PC 421以上--------------------------------*/
@media screen and (min-width: 421px){
.flame1 {
 display:inline-block;
 max-width:700px;
 margin:0px;padding:0px;
 border-right:2px #dddddd solid;
 }
.flame2 {
 display:inline-block;
 width:300px;
 vertical-align:top;
 margin-left:0px;
 padding:0px;
 }
.vwidtha {width:46%;min-width:380px;margin:2%;}
.vwidthb {width:35%;min-width:360px;margin:2%;}
.vwidthM {width:55%;margin-left:2%;}
.vwidthS {width:35%;margin-left:2%;}
.w46p {width:46%; margin-left:2%;}
.w23p {width:20%; margin-left:2%;}
.pc { display: block !important; }
.sp { display: none !important; }

   }

/* 500以下----------------------------------*/
@media screen and (max-width: 500px){
.vwidtha {width:95%;margin:2%;}
.vwidthb {width:90%;margin:2%;}
.vwidthM {width:95%;margin:2%;}
.vwidthS {width:90%;margin:2%;} 
.w46p {width:95%;margin:2%;}
.w23p {width:45%;margin:2%;}
   }

/*SMF-420以下--------------------------------*/
@media screen and (max-width: 420px){
.flame1 {
 display:block;
 width:100%
 margin:0;padding:0px;}
.flame2 {
 display:block;
 width:100%
 margin:0px;
 padding:0px;
 }
.flame2a {
 display:block;
 width:0px}
.vwidtha {width:95%;margin:2%;}
.vwidthb {width:90%;margin:2%;}
.vwidthM {width:95%;margin:2%;}
.vwidthS {width:90%;margin:2%;} 

.pc { display: none !important; }
.sp { display: block !important; }

}/*--------------------------------------*/


/*2,3列1段---------------------------------pc*/
@media screen and (min-width: 641px){
.hblk2 {
 display:inline-block;
 vertical-align: top; 
 width:46%; 
 margin:0 0
 }
.hblk3 {
 display:inline-block;
 vertical-align: top; 
 width:30%; 
 margin:0 0%;
 overflow:hidden;
 }
.hblk4 {
 display:inline-block;
 vertical-align: top; 
 width:24%; 
 margin:0 0;
 overflow:hidden;
 }
.parea{
 width:86%;
 max-width:1024px;
 margin:0 auto;
 padding-left:1%;
 }

 }
/*1列2段----------------------------------sp*/
@media screen and (max-width: 640px){
.hblk {
 display: block; 
 }.hblk3 {
 display: block; 
 overflow:hidden;
 }
.parea { 
 width:100%;
 }
 }

/*-----------------------------------------*/
/*先頭部トピックスのタイトル行用書式*/
.topicsttl {
 font-family:HGP創英角ﾎﾟｯﾌﾟ体;font-size:120%;
 background-color:mediumseagreen;color:yellow;
 padding:1px 10px;
}
/*個別トピックのタイトル行用書式*/
.topicttl1{
 background-color:mediumseagreen;color:white;
 padding:1px 10px;
}
.topicttl2{
 background-color:paleturquoise;color:blue;
 padding:1px 10px;
}
.topicttl3{
 background-color:turquoise;color:white;
 padding:1px 10px;
}
/*個別トピック本文用書式1*/
.topictext1{
 max-height:360px;
 background-color:aquamarine;
 overflow:auto;
 padding:1%;
 }
/*.topictext1 img {
 float:left; margin-right:2%;
 }*/
/*個別トピック本文用書式*/
.topictext2{
 max-height:360px;
 background-color:lemonchiffon;
 overflow:auto;
 padding:1%;
 }
.topictext2 img {
 float:left; margin-right:2%;
}
/*NEW!マーク用*/
.mknew {background-color:red;
 color:white;
 font-size:14px;
 font-family:MS ゴシック;}

.cmm {
 float:left;}


/*-----------------------------------------*/
body {
  -webkit-text-size-adjust: 100%;
}
div.topmess {
 max-width:700px;
 margin:0 auto;
 text-align: center;
 line-height:160%;
 color:#002200;
 background-color:#aaffaa;
 border-radius:32px ;
 box-shadow: 4px 4px 4px 0px #999 inset;
 padding:1px;
}
div.flleft{float:left}
div.ilb1 {
display:inline-block;
}
div.ilb2 {
display:inline-block;
vertical-align: top;
}
div.rshadow {
 padding:8px;
 border-radius:10px;
 box-shadow: 2px 2px 2px 0px #999 inset;
}
div.rshadowG {
 padding:8px;
 border-radius:10px;
 box-shadow: 2px 2px 2px 0px #999 inset;
 background-color: #88ff88;
 color:blue;
}
div.rshadowGw {
 padding:8px;
 border-radius:10px;
 box-shadow: 2px 2px 2px 0px #999 inset;
 background-color: #88bb88;
 color:white;
}

#wrap{
 width:99%;
 /*max-width:1024px;*/
 margin:0 auto;
 text-align:left;
 /*border:solid 1px #33aa33;#333;*/
 background-color:#88ff88;
 font-family:"HG丸ｺﾞｼｯｸM-PRO";
 line-height:160%;}


#head {
 padding:10px;
 height:60px;
 background-color: #ffffff;
 }
/*border-bottom:solid 1px #333;*/
.head-1 {
 font-size:160%;
 color:#00BB00; 
 font-family:"CommercialScript BT";}
.head-2 {
 font-size:140%;
 color:#00BB00; 
 font-family:"HG創英角ｺﾞｼｯｸUB";}
.head-3 {
 font-size:100%;
 color:#0099dd; 
 font-family:"HG丸ｺﾞｼｯｸM-PRO"; }

.day {font-family:"CommercialScript BT";
 font-size:120%;}

@media screen and (min-width: 1024px){
#menu { text-align:center;}
   }

#menu {
 /*border-bottom:solid 1px #333;*/
 background-color: #33aa33;
 }
#menu li{ 
 display: inline-block; 
 background-color: #33aa33; 
 padding:6px;
 }
#menu li a{
 text-decoration: none;
 color: #ffffff;
 width: 100%;
 text-align: center;
 line-height:160%
 }
#menu li a:hover{
 background-color: #F3D898;
 }
#menu li a:active{
 background-color: #FF8888;
 }
/*------------------------------*/
/*@media screen and (min-width: 1024px){
#pagemenu { text-align:center;}
   }*/

#pagemenu {
 text-align:center;
 background-color: #33ff33;
 color: #ffffff;
 font-weight:bold;
}
#pagemenu li{
 display: inline-block;
 background-color: #33ff33; 
 padding:4px 10px 4px 0;
}
#pagemenu li a{
 text-decoration: none;
 color: #fff;
 width: 100%;
 text-align: center;
 }
#pagemenu li a:hover{
 background-color: #F3D898;
}
/*-------------------------------*/

.bgcolW {background-color:#ffffff;}
.bgcolR {background-color:#ff8888;}
.bgcolG {background-color:#88ff88;}
.bgcolB {background-color:#8888ff;}
.bgcolY {background-color:#ffff88;}
.bgcolS {background-color:#88ffff;}
.bgcolP {background-color:#ff88ff;}
.bgcolZ {background-color:#aaffaa;}
.bgcoltp {background-color:transparent;}

.fcb{color:blue}
.fcg{color:Green}
.fsLw{font-size:120%;color:#ffffff}
.fsL{font-size:120%}
.fsLL{font-size:140%}
.fsLLL{font-size:160%}
.fsLb{font-size:120%;color:blue}
.fsLLb{font-size:140%;color:blue}
.fsLLLb{font-size:160%;color:blue}

.boxa {
 max-width:800px; 
 margin:0 auto;
 padding:8px;
 border-radius:10px;
}
.box1 {
 display: inline-block; 
 background-color:#aaffaa;
 text-align:center; 
 border-radius:20px ;
 box-shadow: 4px 4px 4px 0px #999 inset;
 width: 280px; 
 margin:0px 10px;
 color: #0000ff;
}
.box2 {
 display: inline-block; 
 vertical-align: top; 
 text-align:left; 
 max-width:550px;
 padding:10px; 
 margin:0px 10px;
 color: #0000ff;
 }
.box3 {
 display: block; 
 width:95%;
 max-width:800px;
 margin-left:4%; 
 /*color:blue;*/
 }

tb.tbstyl{
 border:0px;
 border-spacing:0;
 padding:0px;
}
td.tdstyl1{
 max-width:120px;
 text-align:center;
 vertical-align:top;
 line-height:140%;
 padding-left:10px;
}
td.tdstyl2{
 max-width:36px;
 font-size:100%;
 color:#8888ff;
 font-weight:bold;
 vertical-align:top;
 line-height:140%
}
.tdstyl3{
 max-width:600px;
 vertical-align:top;
 font-size:100%;
 line-height:140%;
 padding-right:30px;
}
.form0 {
 width:100%;
 max-width:500px;
 margin:10px; 
 padding:30px; 
 border:2px solid #ffffff; 
 border-radius:10px;
}

.form1 {
 max-width:200px;
 border-radius:6px;
 padding-left:10px;
 font-size:110%;
}
.form2 {
 width=95%
 max-width:400px;
 border-radius:6px;
 padding:10px;
 font-size:110%;
}
.form3 {
 width:160px;
 height:40px;
 border-radius:6px;
 padding-left:10px;
}

/*Animation--------------------------*/
	@keyframes moveimg {
	0% { left: 0px; top: 0px;}
	50% { left: 100px; top: 0px; }
	100% { left: 500px; top: 0px; }
	}
 
	#mov1{
	animation: moveimg 5s infinite;
	position: relative;
	}

#mov31{
	animation: moveimg31 5s 5;
	position: relative;
}
@keyframes moveimg31 {
	0% { left: 300px; top: 0px;}
	50% { left: 100px; top: -30px;}
	100% { left: 0px; top: 0px;}
}
.mov32 img{transition: 0.3s;
}
.mov32 img:hover{
	transform: translate(500px,5px);
}

.marquee {
 max-width: 50%;
 padding:0;
 margin: 0 auto;
 position: relative;
 overflow: hidden;
 text-align: left;
    /*border-top: 1px solid #c9171e;
    border-bottom: 1px solid #c9171e;*/
 color:#00ff00;
 font-weight: bold;
 text-shadow:
     1px 0 1px #000,
     0 1px 1px #000;
}
.marquee p:after {
 content:"";
 white-space:nowrap;
    /*padding-right:0px;*/
}
.marquee p {
 /*margin:16px;*/
 align:center;
 padding-left:600px;
 display:inline-block;
 white-space:nowrap;

-webkit-animation-name:marquee;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:marquee;
-moz-animation-timing-function:linear;
-moz-animation-duration:10s;
-moz-animation-iteration-count:infinite;
-ms-animation-name:marquee;
-ms-animation-timing-function:linear;
-ms-animation-duration:10s;
-ms-animation-iteration-count:infinite;
-o-animation-name:marquee;
-o-animation-timing-function:linear;
-o-animation-duration:10s;
-o-animation-iteration-count:infinite;
animation-name:marquee;
animation-timing-function:linear;
animation-duration:10s;
animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
    from   { -webkit-transform: translate(0%);}
    99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
    from   { -moz-transform: translate(0%);}
    99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
    from   { -ms-transform: translate(0%);}
    99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
    from   { -o-transform: translate(0%);}
    99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
    from   { transform: translate(0%);}
    99%,to { transform: translate(-100%);}
}

.text-anime1{
  margin-left:100px;
  color: #fff;
  text-shadow:1px 0 1px #000, 0 1px 1px #000;
  animation: text_animation1 2s ;
  animation-iteration-count:5;
}

@keyframes text_animation1{
  0%{ letter-spacing: -2em; }
  100% {letter-spacing: 0; }
}

.text-anime3{
  margin-left:200px;
  padding-top:6px;
  display:inline-block;
  text-align: left;
  color:#00ff00;
  font-weight: bold;
  text-shadow:
     1px 0 1px #000,
     0 1px 1px #000;
  animation: text_animation3 3s;
  animation-iteration-count:2;
}
@keyframes text_animation3{
  0%{ letter-spacing: -0.5em;
    transform: translateY(-1000px);  }
  50%{ letter-spacing: -0.5em;
    transform: none;  }
  100%{letter-spacing: 0; }
}
/*DayみどりScrp体imageり*/
.scp:before {
 content:"";
 display:inline-block;
 width:100px; 
 height:22px;
 background-image:url(images/day.gif);
 background-size:cover;
/*background-size:contain;*/
 background-repeat:no-repeat;
 vertical-align:middle;
 }
.scpB:before {
 content:"";
 display:inline-block;
 width:100px; 
 height:26px;
 background-image:url(images/dayB.gif);
 background-size:cover;
/*background-size:contain;*/
 background-repeat:no-repeat;
 vertical-align:middle;
 }
.scpB1:before {
 content:"";
 display:inline-block;
 width:133px; 
 height:34px;
 background-image:url(images/dayB.gif);
 background-size:cover;
/*background-size:contain;*/
 background-repeat:no-repeat;
 vertical-align:middle;
 }
.scpBlu:before {
 content:"";
 display:inline-block;
 width:100px; 
 height:26px;
 background-image:url(images/dayBlu.gif);
 background-size:contain;
 background-repeat:no-repeat;
 vertical-align:middle;
 }
.textfm1{
  display:inline-block;
  vertical-align:top; 
  padding-left:0px;
  padding-top:10px;
  line-height:120%;
  text-align: center;
  color:#00ff00;
  font-weight: bold;
  text-shadow:1px 0 1px #000, 0 1px 1px #000;
  animation: cc 0.3s 10;
  color:#00ff00;
}
@keyframes cc {
  0% {color:#00ff00;}
  50% {color:#ffffff;}
  100% {color:#00ff00;}
}

.txt:hover + .cmm {display: block; }
.txt {
 position: relative;      
  /*width: 200px;*/
 margin:20px;
  /*padding:10px;
 border: 1px solid #ccc;
 background: #33cc99;color: #fff;*/
 text-decoration: underline;
 color:blue;
 }
.cmm {
 display: none;
 position: absolute;top: 20px; left: 20px;
 width: 70%;
 padding: 16px;
 border-radius: 5px;
 background: #33cc99;
 color: #fff;
 font-weight: bold;
 }