.counter {
 width:100%;
 text-align: center;
}

@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50%{
    transform: scale3d(1.4, 1.4, 1.3);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.animation {

  animation-duration: 1s; 
  animation-name: pulse;
animation-iteration-count: infinite;
}

.type-1 {
  animation-duration: 7s; 
}
.type-2 {
  animation-duration: 5s; 
}
.type-3 {
  animation-duration: 6s; 
}




#google_translate_element{
 text-align: center;
}

h5{ text-align: center;
    color:;
}

h2{color: black;}

.blinking {
    -webkit-animation: 0.5s linear 0s alternate none infinite running blink;
    -moz-animation: 0.5s linear 0s alternate none infinite running blink;
    animation: 0.5s linear 0s alternate none infinite running blink;
}
@-webkit-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@-moz-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}

body{
   font-family: 'Meiryo',"ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Osaka", sans-serif;
}
@media screen and (min-width: 490px){
.more{display:none;}}
@media screen and (min-width: 490px){
.jisin{display:none;}}
@media screen and (min-width: 490px){
.jikan{display:none;}}
@media screen and (min-width: 490px){
.homes{display:none;}}
@media screen and (min-width: 490px){
.housingcomplex{display:none;}}
@media screen and (min-width: 490px){
.box{display:none;}}
@media screen and (min-width: 490px){
.haikitou{display:none;}}
@media screen and (min-width: 490px){
.matercock{display:none;}}
@media screen and (min-width: 490px){
.buttoncap{display:none;}}
@media screen and (min-width: 490px){
.resetbutton{display:none;}}
@media screen and (min-width: 490px){
.threeminute{display:none;}}
@media screen and (min-width: 490px){
.whatisgasmeter{display:none;}}
@media screen and (min-width: 490px){
.placewith{display:none;}}
@media screen and (min-width: 490px){
.matersyousai{display:none;}}
@media screen and (min-width: 490px){
.howtoreturn{display:none;}}
@media screen and (min-width: 490px){
.modoru{display:none;}}
@media screen and (min-width: 490px){
.redright{display:none;}}
@media screen and (min-width: 490px){
.safety{display:none;}}
@media screen and (min-width: 490px){
.copy{display:none;}}
@media screen and (min-width: 490px){
.counter{display:none;}}
@media screen and (min-width: 490px){
.ripple{display:none;}}
@media screen and (min-width: 490px){
.bg{display:none;}}
@media screen and (min-width: 740px){
.portrait{display:none;}}
@media screen and (min-width: 490px){
#clock_frame{display:none;}}
@media screen and (min-width: 490px){
.cm{display:none;}}
@media screen and (min-width: 490px){
.cp_cssslider{display:none;}}


@media screen and (max-width: 720px){
div.pconly{display:none;}}
@media screen and (max-width: 580px){
div.portrait{display:none;}}

table { border-radius: 7px;
}

/* 説明文 */ 
@media screen and (min-width: 490px){
.description01{display:none;}}

.description01{max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 1px;
            color: #red;
            font-size: 22px;
}

/* 説明文 */ 
@media screen and (min-width: 490px){
.description02 {display:none;}}

.description02 {max-width: 100%;
               height: auto;
               text-align: center;
               margin-top: 20px;
              color: #ffff66;
              background-color: #000080;
              font-size: 14px;
}
@media screen and (min-width: 490px){
.description03 {display:none;}}

.description03 {max-width: 100%;
               height: auto;
               text-align: center;
               margin-top: 20px;
               color: #000080;
               font-size: 14px;
}






.allback {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: #ccffff;
    overflow-x:hidden;
}
body {background-color: #ccffff;
      overflow-x:hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}


/* レッドライト */   
div.redright img { width: 100vw;  
                  padding:0px 0px;  
                  margin-top: -45px;
                  margin-left: 0px;
}
 
.ripple {
    position: relative; 
    left:45.5%;
    top: 88vw;
    z-index: 20;
    width: 60px;
    height: 40px;
    background-color: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(82,211,255,1);
    animation-name: rippleAnimation;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    -webkit-animation-name: rippleAnimation;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    -moz-animation-name: rippleAnimation;
    -moz-animation-timing-function: ease-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 2s;
}
@keyframes rippleAnimation {
    0% {
        transform: scale(1, 1);
        opacity: 1;
    }
    100% {
        transform: scale(2.5, 2.5);
        opacity: 0;
    }
}
@-webkit-keyframes rippleAnimation {
    0% {
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(2.5, 2.5);
        opacity: 0;
    }
}
@-moz-keyframes rippleAnimation {
    0% {
        -moz-transform: scale(1, 1);
        opacity: 1;
    }
    100% {
        -moz-transform: scale(2.5, 2.5);
        opacity: 0;
    }
}

.bg {z-index: 10;
     width: 100%;
     position: absolute;
     padding:0px 0px;  

}
/* レッドライトここまで */  
/* ここからバランス */

.cm {text-align: center;              
              margin-top: ;
              margin-right: %;
              max-width: 100%;
              height: auto;
}
/* ここからカウンターとコピーライト */

.copy {text-align:bottom;
    max-width:100%;
    height:auto;
    margin-top: 10px;
    font-size: 10px;
}

.counter {text-align:bottom;
    max-width:100%;
    height:auto;
    margin-top: 0%;
    margin-left: 7px;
    text-align: center;
}
p {text-align: center;
    max-width:100%;
    height:auto;
    margin-bottom: 10px;
    font-size: 12px;
}

.pconly { max-width: 100%;
          height: auto;
          margin: 0 auto;
          text-align: center;
          margin-top: 3px;
background-image: url(gas/kyokuback03.png);
background-size: 100% auto;
}
.portrait { max-width: 100%;
          height: auto;
          margin: 0 auto;
          text-align: center;
          margin-top: 3px;
          background-color: #ff3300;
}

.whatisgasmeter {    
                  max-width: 100%;
                  margin: 0 ;
                  margin-top: -146%;                 
                  margin-left: 27%; 

}
.whatisgasmeter:active {position: relative;
	             top: 5px;}

.placewith {text-align: left;
            margin-top: -260%;
            margin-left: 10%;

}
.placewith:active {position: relative;
	             top: 5px;}

.howtoreturn {text-align: right;              
              margin-top: -255%;
              margin-left: -15%;

}
.howtoreturn:active {position: relative;
	             top: 5px;}

.cm:active {position: relative;
	             top: 5px;}

/* 雲の案内ここまで、 */

.matersyousai { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 1px;

}

.more { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 1px;

}

.jisin { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 1px;

}

.jikan { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 1px;

}

.homes { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 10px;
}

.housingcomplex { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 10px;
}

.box { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 10px;
}

.haikitou { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 10px;

}

.matercock { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 10px;

}

.buttoncap { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 10px;

}

.resetbutton { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 10px;

}

.threeminute { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 10px;

}


.modoru { max-width: 100%;
            height: auto;
            margin: 0 auto;
            text-align: center;
            margin-top: 10px;
            margin-left: 50px;
}
div.modoru:active {position: relative;
	             top: 5px;}



.gazouwaku {   
     border:1px solid #333;/* 外枠の色 */   
     padding:10px;/* 余白 */   
     background-color:#c71585;/* 余白部分の色 */   
}   

.gazouwaku02 {  
     border:1px solid #333;/* 外枠の色 */   
     padding:10px;/* 余白 */   
     background-color:#ff002b	;/* 余白部分の色 */   
}   

.gazouwaku03 {  
     border:1px solid #333;/* 外枠の色 */   
     padding:10px;/* 余白 */   
     background-color:#800000	;/* 余白部分の色 */   
}   





/* Google Webフォントを利用設定するCSSをインポート */
@import url(http://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps);

/* body要素(全体) */
body
{
    /* 文字色 */
    color: #cc0066;
    /* 背景色 */
    background-color: #ccffff;
}

/* class="clock_frame" のdiv要素 */
div.clock_frame
{
    /* 横幅を親要素であるbodyの100%(同じ幅)にする */
    width: 80%;
}

/* span要素のデフォルト */
span
{
    /* 本来はインライン要素であるspanをブロック要素として扱う */
    display: block;
    /* ここでは親要素であるdivの内部で右に寄せて配置させる */
    float: center;
    /* 横幅を親要素であるdivの85%にする */
    width: 80%;
    /* フォントの種類を一番上で指定したGoogle Webフォントに設定する */
    font-family: 'Georgia', cursive;
}

/* id="clock_date" のspan要素 */
span#clock_date
{
    /* この要素の中におけるテキストを右詰めにする デフォルト値のtext-align:leftを上書き */
    text-align: right;
    /* フォントの大きさを親要素であるdivで設定されたサイズ(px)の0.5倍にする */
    font-size: 0.5em;
    /* 右のパディングの幅を親要素であるdivで設定されたフォントサイズ(px)の0.5倍にする */
    padding-right: 0.5em;
}

/* id="clock_time" のspan要素 */
span#clock_time
{
    /* フォントの大きさを親要素であるdivで設定されたサイズ(px)の2倍にする */
    font-size: 2em;
}

/* ここからバナー広告 */
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_cssslider {
background:#ccffff;/* ここはバナー広告の背景色*/
border: 10px solid #ffffff;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
/* ここはバナー広告のサイズ画像+上下10pxが必要 */
width:360px;
height: 170px;
margin:2em auto;
overflow:visible;
position:relative;
text-align: center;
margin-top: -14px;
margin-left: 0;
}
.cp_cssslider .mask {
overflow:hidden;
height:150px;/* 下に消えていく長さ（ボーダー分を差し引く） */
}
.cp_cssslider ul {
margin:0;
padding:0;
position:relative;
}
/* tooltip */
.cp_cssslider .tooltip {
background:rgba(0,0,0,0.7);
width:100%;
height: 100%;
position:relative;
bottom:95px;
left:-300px;
-webkit-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
.cp_cssslider .tooltip h1 {
color:#fff;
padding:0 0 0 20px;
}
.cp_cssslider li:hover .tooltip{
left:0px;
}
.cp_cssslider:hover li,
.cp_cssslider:hover .cp_progressbar {
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
.cp_cssslider li {
width:100%;
 height: auto;
position:absolute;
top:-200px;
list-style:none;

}
.cp_cssslider li:nth-child(1){
-webkit-animation:cycle1 50s linear infinite;
animation:cycle1 50s linear infinite;
}
.cp_cssslider li:nth-child(2){
-webkit-animation:cycle2 50s linear infinite;
animation:cycle2 50s linear infinite;
}
.cp_cssslider li:nth-child(3){
-webkit-animation:cycle3 50s linear infinite;
animation:cycle3 50s linear infinite;
}
.cp_cssslider li:nth-child(4){
-webkit-animation:cycle4 50s linear infinite;
animation:cycle4 50s linear infinite;
}

.cp_cssslider li:nth-child(5){
-webkit-animation:cycle5 50s linear infinite;
animation:cycle5 50s linear infinite;
}
@keyframes cycle1 {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:200px; opacity:0; z-index:0; }
21% { top:-200px; opacity:0; z-index:-1; }
50% { top:-200px; opacity:0; z-index:-1; }
92% { top:-200px; opacity:0; z-index:0; }
96% { top:-200px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@keyframes cycle2 {
0%  { top:-200px; opacity:0; }
16% { top:-200px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:200px; opacity:0; z-index:0; }
41% { top:-200px; opacity:0; z-index:-1; }
100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle3 {
0%  { top:-200px; opacity:0; }
36% { top:-200px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:200px; opacity:0; z-index:0; }
61% { top:-200px; opacity:0; z-index:-1; }
100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle4 {
0%  { top:-200px; opacity:0; }
56% { top:-200px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:200px; opacity:0; z-index:0; }
81% { top:-200px; opacity:0; z-index:-1; }
100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle5 {
0%  { top:-200px; opacity:0; }
76% { top:-200px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:200px; opacity:0; z-index:0; }
}


/* バナー広告サイト制作広告 */   
.intelligence img { width: 100%;  
                  padding:0px 0px;  
                  margin-top: 0px;            
}

.sms { width:100%;
     height:auto;
     text-align:center; 
     background-color: #ff0099;
     margin-top: -35px;
}
.sms:active {position: relative;
	             top: 5px;}

.copy img { width: 100%;  
            padding:0px 0px;  
            margin-top: 0px;            
}