body {
	background-color: #3A8FB7; font-family: 'Montserrat', sans-serif; 
}
a{
color: #fff;
text-decoration: none; 
}
a:hover{
color: #ccc;
}


#base {width : 310px; font-size:10px; color:#fff; text-align: center;
	  margin : 200px auto 0 auto}
.sns{text-align: left;}
.sns p {font-size: 15px;}	  
.sns img{margin:0 7 0 0;}

.news{
margin : 40px auto 0 auto;
color:#fff;
  height:auto;
  width: 310px;
  padding:20px;
  font-size:14px;
  border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border:3px solid #fff;
  background-color: #3A8FB7;
}

.box{width: 150px; height: 150px; line-height: 150px; text-align: center; position: relative; font-size:10px; color:#fff; }
.bd div{background: #fff; position:absolute;-webkit-transition:all 0.3s;transition:all 0.3s;}
.bd div.bdT{width: 100%; height:2px; top:0; left:0;}
.bd div.bdB{width: 100%; height:2px; bottom:0; right:0;}
.bd div.bdR{height:100%; width :2px; right:0; top:0;}
.bd div.bdL{height:100%; width :2px; left:0; bottom:0;}


.bd1 div{-webkit-transition:all 0.1s;transition:all 0.1s;}
.bd1 div.bdT{transition-delay:0.3s;}
.bd1 div.bdL{transition-delay:0.2s;}
.bd1 div.bdB{transition-delay:0.1s;}
.bd1 div.bdR{transition-delay:0s;}
.box:hover .bd1 div.bdT{width: 0;transition-delay:0s;}
.box:hover .bd1 div.bdL{height:0;transition-delay:0.1s;}
.box:hover .bd1 div.bdB{width: 0;transition-delay:0.2s;}
.box:hover .bd1 div.bdR{height:0;transition-delay:0.3s;}

.bd2 div{-webkit-transition:all 0.2s;transition:all 0.2s;}
.box:hover .bd2 div.bdT{width: 5px; height: 5px;}
.box:hover .bd2 div.bdB{width: 5px; height: 5px;}
.box:hover .bd2 div.bdR{width: 5px; height: 5px;}
.box:hover .bd2 div.bdL{width: 5px; height: 5px;}

.bd3 div{-webkit-transition:all 0.2s;transition:all 0.2s;}
.box:hover .bd3 div.bdT{-webkit-transform: translate(0,20px); transform: translate(0,20px);}
.box:hover .bd3 div.bdB{-webkit-transform: translate(0,-20px); transform: translate(0,-20px);}
.box:hover .bd3 div.bdR{-webkit-transform: translate(-20px,0); transform: translate(-20px,0);}
.box:hover .bd3 div.bdL{-webkit-transform: translate(20px,0); transform: translate(20px,0);}

.bd4 div{-webkit-transition:all 0.2s;transition:all 0.2s;}
.box:hover .bd4 div.bdT{-webkit-transform:rotate(45deg) translate(0,20px);  transform:rotate(45deg) translate(0,20px);}
.box:hover .bd4 div.bdB{-webkit-transform:rotate(45deg) translate(0,-20px); transform:rotate(45deg) translate(0,-20px);}
.box:hover .bd4 div.bdR{-webkit-transform:rotate(45deg) translate(-20px,0); transform:rotate(45deg) translate(-20px,0);}
.box:hover .bd4 div.bdL{-webkit-transform:rotate(45deg) translate(20px,0);  transform:rotate(45deg) translate(20px,0);}


#open01,#open02,#thanks {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
 #thanks p{
    text-align: center;
}
.close_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-indent: -9999px;
    position: absolute;
    background: #000;
    opacity: 0.5;
    z-index: 5;
}
 
.modal_window {
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -250px;
    width: 500px;
    height: 500px;
    text-align: center;
    display: block;
    background: #3A8FB7;
    position: absolute;
    z-index: 10;
}
 
.modal_window h2 {
    margin-bottom: 20px;
    width: 500px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    text-indent: 15px;
    background: #305A56;
}
.modal_window p {
    padding: 0 15px 15px 15px;
    font-size: 12px;
    color: #fff;
    line-height: 160%;
    text-align: left;
}
.modal_window a {
    color: #ccc;
}
 
 
/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
    0% {opacity:0;display:block;}
    100% {opacity:1;}
}
div#modal div:target {
    -webkit-animation-name: modalFadeIn; 
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    opacity: 1;
    display:block;
}


.form-container {
   border: 3px solid #fff;
   background: #3A8FB7
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   font-family: 'Helvetica Neue',Helvetica,sans-serif;
   text-decoration: none;
   vertical-align: middle;
   min-width:300px;
   padding:20px;
   width:300px;
   margin : 20px auto
   }
.form-field {
   border: 1px solid #ccc;
   background: #ffffff;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   color: #000;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
   padding:8px;
   margin-bottom:20px;
   width:280px;
   }
textarea {
   border: 1px solid #c9b7a2;
   background: #ffffff;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   color: #000;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
   padding:8px;
   margin-bottom:20px;
   width:280px;
   }
.form-field:focus {
   background: #fff;
   color: #725129;
   }
.form-container h2 {
   text-shadow: #fdf2e4 0 1px 0;
   font-size:18px;
   margin: 0 0 10px 0;
   font-weight:bold;
   text-align:center;
    }
.form-title {
   margin-bottom:10px;
   color: #fff;
   }
.submit-container {
   margin:8px 0;
   text-align:right;
   }
.submit-button {
   border: 0px solid #000000;
   background: #d1d1d1;
   background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#d1d1d1));
   background: -webkit-linear-gradient(top, #e6e6e6, #d1d1d1);
   background: -moz-linear-gradient(top, #e6e6e6, #d1d1d1);
   background: -ms-linear-gradient(top, #e6e6e6, #d1d1d1);
   background: -o-linear-gradient(top, #e6e6e6, #d1d1d1);
   background-image: -ms-linear-gradient(top, #e6e6e6 0%, #d1d1d1 100%);
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #ffffff 0 1px 0;
   color: #60635c;
   font-family: helvetica, serif;
   padding: 8.5px 18px;
   font-size: 14px;
   text-decoration: none;
   vertical-align: middle;
   }
.submit-button:hover {
   border: 0px solid #756975;
   text-shadow: #000000 0 1px 0;
   background: #8fafc4;
   background: -webkit-gradient(linear, left top, left bottom, from(#8ab2bd), to(#8fafc4));
   background: -webkit-linear-gradient(top, #8ab2bd, #8fafc4);
   background: -moz-linear-gradient(top, #8ab2bd, #8fafc4);
   background: -ms-linear-gradient(top, #8ab2bd, #8fafc4);
   background: -o-linear-gradient(top, #8ab2bd, #8fafc4);
   background-image: -ms-linear-gradient(top, #8ab2bd 0%, #8fafc4 100%);
   color: #ffffff;
   }
.submit-button:active {
   text-shadow: #4f4f4e 0 1px 0;
   border: 0px solid #757575;
   background: #7d8c91;
   background: -webkit-gradient(linear, left top, left bottom, from(#a3a3a3), to(#8fafc4));
   background: -webkit-linear-gradient(top, #a3a3a3, #7d8c91);
   background: -moz-linear-gradient(top, #a3a3a3, #7d8c91);
   background: -ms-linear-gradient(top, #a3a3a3, #7d8c91);
   background: -o-linear-gradient(top, #a3a3a3, #7d8c91);
   background-image: -ms-linear-gradient(top, #a3a3a3 0%, #7d8c91 100%);
   color: #fff;
   }