.effect2 {
    position: relative;
}
.effect2:before, .effect2:after {
    background: none repeat scroll 0 0 #777777;
    bottom: 18px;
    box-shadow: 0 15px 10px #777777;
    content: "";
    left: 10px;
    max-width: 300px;
    position: absolute;
    top: 80%;
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    width: 50%;
    z-index: -1;
}
.effect2:after {
    left: auto;
    right: 10px;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
}
.effect3:before {
    background: none repeat scroll 0 0 #777777;
    bottom: 18px;
    box-shadow: 0 15px 10px #777777;
    content: "";
    left: 10px;
    max-width: 300px;
    position: absolute;
    top: 80%;
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    width: 50%;
    z-index: -1;
}
.effect3 {
    position: relative;
}
.effect6 {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    position: relative;
}
.effect6:before, .effect6:after {
    border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
    bottom: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    content: "";
    left: 10px;
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: -1;
}
.effect6:after {
    left: auto;
    right: 10px;
    transform: skew(8deg) rotate(3deg);
    -webkit-transform: skew(8deg)  rotate(3deg);
    -moz-transform: skew(8deg)  rotate(3deg);
    -ms-transform: skew(8deg)  rotate(3deg);
    -o-transform: skew(8deg)  rotate(3deg);
}
.effect7 {
    width : 1000px;
    margin : 5px auto;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    position: relative;
}
.effect7:before, .effect7:after {
    border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
    bottom: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    content: "";
    left: 10px;
    position: absolute;
    right: 10px;
    top: 0;
    z-index: -1;
}
.effect7:after {
    left: auto;
    right: 10px;
    transform: skew(8deg) rotate(3deg);
    -webkit-transform: skew(8deg)  rotate(3deg);
    -moz-transform: skew(8deg)  rotate(3deg);
    -ms-transform: skew(8deg)  rotate(3deg);
    -o-transform: skew(8deg)  rotate(3deg);
}
/*==================================================
 * Effect 8
 * ===============================================*/
.effect8
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -ms-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -ms-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    -webkit-border-radius:100px / 10px;
    -ms-border-radius:100px / 10px;
} 
.effect8:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}
.box {
    background: none repeat scroll 0 0 #F3F3F3;
    border-radius: 2px 2px 2px 2px;
    margin: 40px auto;
    width: 650px;
}


#momoclo_box {
    background-color:#FFFFFF;
    width : 930px;
    margin : 5px auto; 
    -webkit-box-shadow: 5px 15px 10px #777777;
    -moz-box-shadow: 5px 15px 10px #777777;
    -ms-box-shadow: 5px 15px 10px #777777;
    -o-box-shadow: 5px 15px 10px #777777;
    box-shadow: 5px 15px 10px #777777;
}
#red_box{
    clear: both;
    -webkit-box-shadow: 5px 15px 10px #777777;
    -moz-box-shadow: 5px 15px 10px #777777;
    -ms-box-shadow: 5px 15px 10px #777777;
    -o-box-shadow: 5px 15px 10px #777777;
    box-shadow: 5px 15px 10px #777777;
}
#purple_box{
    float : left; 
    width : 650px;
}
#pink_box{
    float : right;
    width : 280px;
}
#yellow_box{
    width : 930px;
    background-color : #b0e0e6;
    text-align: right;
    clear: both;
}
#mini_box{ 
    width : 928px;
    height : 250px;
    background-color : #75A9FF;
}

#green_box{
    clear: both;
    float : left; 
    width : 465px;
    height : 250px;
    background-color : #75A9FF;
}
#blue_box{
    float : right;
    width : 465px;
    height : 250px;
    background-color : #75A9FF;
}
.ovi {
    background-color : #75A9FF;
    font-size: 14px;
} 
.konseputo {
    background-color : #66CC00;
} 
#info_box{
    border : 2px solid #FF9900;
    padding : 5px;
}
#pickup_box{
    padding : 2px;
}
#tel_box{
    float : right;
    width : 650px;
}
#taitoru_box{
    float : left; 
    width : 280px;
position: absolute;
top: 50px
}
#momo_box{
    width : 930px;
    clear: both;
}
/*==================================================
 * 背景アニメーション
 * ===============================================*/
.botan{
    background-color : #ffffff;
}
.botan:hover{
 animation : gradation 0s .1s;
    -moz-animation : gradation 0s .1s;
    -webkit-animation : gradation 0s .1s;
    -o-animation : gradation 0s .1s;
    -ms-animation : gradation 0s .1s;
  animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
}
@keyframes gradation{
  0% { background-color : #F3F3F3; }
  100% { background-color : #75A9FF ; }
}
@-moz-keyframes gradation{
  0% { background-color : #F3F3F3; }
  100% { background-color : #75A9FF ; }
}
@-webkit-keyframes gradation{
  0% { background-color : #F3F3F3; }
  100% { background-color : #75A9FF; }
}
@-o-keyframes gradation{
  0% { background-color : #F3F3F3; }
  100% { background-color : #75A9FF; }
}
@-ms-keyframes gradation{
  0% { background-color : #F3F3F3; }
  100% { background-color : #75A9FF; }
}
/*==================================================
 * メールフォーム
 * ===============================================*/
 #demo {
        width:60%;
    }
    #demo ul {
        list-style:none;
        margin:0; padding:0;
    }
    #demo li {
        list-style:none;
        margin:0; padding:6px;
        clear:both;
    }
    #demo label {
        display:block;
        font-weight:bold;
        color:#666;
    }
    #demo li span {
        float:left;
        margin:0 5px 0 0; padding:0;
    }
    #demo li span label {
        color:#999;
        font-weight:normal;
        font-size:80%;
    }
    #demo input.field,
    #demo textarea {
        background:#fff url("img/css/fieldborder.png") repeat-x 0 0;
        border:1px solid #ddd;
        border-top-color:#ccc;
        border-left-color:#ccc;
        padding:3px;
    }
    #demo textarea {
        width:100%;
    }
    #demo input#email {
        width:200px;
    }