@charset "UTF-8";
/* CSS Document */
body{
width: 100%;
height: 100%
}
#wapper{
width: 100%;
height: 100%
}
#contents{
width: 800px;
margin: 0 auto;
}
.contents-inner{
width: 800px;
padding-top: 2em;
float: left;
padding-bottom: 3em;
}
.main {
float: left;
width: 100%;
}
img.main-img {
float: left;
width: 100%;
}
.text-area {
float: left;
background: #fff;
border: 1px solid #60F;
margin-bottom: 2em;
width: 100%;
}
.text-area-inner {
padding: 60px;
float: left;
box-sizing:border-box;
width: 100%;
}
.tit {
float: left;
text-align: center;
border-bottom: 1px dashed #60f;
font-weight: 700;
margin-bottom: 1.6em;
padding-bottom: 1.6em;
width: 100%;
}
p.tit_sub {
color: #F09;
font-size: 24px;
}
p.tit_main {
color: #60f;
font-size:36px;
}
.exp,.exp2 {
float: left;
margin-left: 18px;
padding-bottom: 2em;
display: block;
}
.exp p,.exp2 p{
color: #444;
font-size: 18px;
text-indent: -18px;
display: block;
}
.exp p:before {
content: "●";
color: #f09;
}
.exp2 p:before {
content: "※";
color: #f09;
}
.oubo{
float: left;
width: 100%;
}
.oubo p{
display: block;
width: 100%;
height: 86px;
line-height: 90px;
background: #ccc;
box-sizing:border-box;
border-radius: 43px;
color: #888;
text-align: center;
font-size: 36px;
}
.oubo a:hover{
background: #FF00AE;

}
.oubo a:active{
box-shadow: inset 0 0 15px #AE0077;
color: #FFAADA;
}
.close_btn {
  text-align: center;
}
.close_btn a{display: block;
}
@media screen and (max-width: 799px){
#contents{
  width: 100%;
}
.contents-inner{
  width: 94%;
  padding-left: 3%;
padding-top: 10px;
}
.text-area {
margin-bottom: 1.6em;
}
.text-area-inner {
padding: 1.6em;
}
p.tit_sub {
font-size: 18px;
padding-bottom: .4em;
}
p.tit_main {
font-size: 25px;
line-height: 1.2em;
}
.exp {
margin-left: 16px;
padding-bottom: 1em;
width: 96%;
}
.exp p{
font-size: 16px;
text-indent: -16px;
}
.oubo p{
height: 48px;
line-height: 50px;
border-radius: 24.5px;
font-size: 24px;
}
}
@media screen and (min-width: 1px) and (max-width: 480px){
#contents{
}
.contents-inner{
width: 96%;
padding-left: 2%;
}
.text-area {
margin-bottom: 1.4em;
}
.text-area-inner {
padding: 1em;
}
.tit{
  text-align:left;
}
p.tit_sub {
font-size: 16px;
padding-bottom: .2em;
}
p.tit_main {
font-size: 18px;
line-height: 1.2em;
}
.exp,.exp2 {
margin-left: 14px;
padding-bottom: .6em;
}
.exp p,.exp2 p{
font-size: 14px;
text-indent: -14px;
}
.oubo{
  padding-bottom:1em;
}
.oubo p{
height: 44px;
line-height: 47px;
font-size: 20px;
}
}
.thanks p{
	padding-bottom: 1em;
	text-align: center;
}

.bg1{background-image:url(../images/bg1.png);
animation:border 14s linear infinite;
-moz-animation:border 14s linear infinite;
-webkit-animation:border 14s linear infinite
}
.bg2{background-image:url(../images/bg2.png);
animation:bg2 10s linear infinite;
-moz-animation:bg2 10s linear infinite;
-webkit-animation:bg2 10s linear infinite
}

@keyframes border{0%{background-position:0 0;}100%{background-position:400px -400px;}}
@-moz-keyframes border{0%{background-position:0 0;}100%{background-position:400px -400px;}}
@-webkit-keyframes border{0%{background-position:0 0;}100%{background-position:400px -400px;}}

@keyframes bg2{0%{background-position:0 0;}100%{background-position:-200px -200px;}}
@-moz-keyframes bg2{0%{background-position:0 0;}100%{background-position:-200px -200px;}}
@-webkit-keyframes bg2{0%{background-position:0 0;}100%{background-position:-200px -200px;}}

a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
color: #09f
}
a img:hover{
  opacity: 0.8;
}