@charset "utf-8";
/* CSS Document */

#content {
width:950px;
margin:0 auto;
}

#content h2,
#content dl,
#content dt,
#content dd {
margin: 0;
padding: 0;
}

#content h1 {
margin:10px 5px 0 5px;
padding:0;
}

#content #spskj-date {
margin:10px 0 0;
padding:0;
text-align: center;
font-size:18px;
color:#bf0000;
}

#content #spskj-step1 {
text-align: center;
margin:40px 0 0;
padding:0 0 40px;
background: url(../images/arrow.png) center bottom no-repeat;
}

#content #spskj-step1 .btn-area {
margin:20px 0 0;
}



#content #spskj-step2 {
padding:80px 0 0;
background: url(../images/step2_bg.jpg) left top no-repeat;
text-align: center;
}

#content #spskj-step2 .info-area {
margin:20px 0 0;
padding:0 0 100px;
background: url(../images/arrow.png) center bottom no-repeat;
letter-spacing: -0.4em;
}

#content #spskj-step2 dl {
display: inline-block;
width:370px;
background: url(../images/contents_bg.jpg) left top repeat;
margin:0 10px;
padding:20px;
text-align: left;
letter-spacing: 0;
vertical-align: top;
}

#content #spskj-step2 dl ul {
position: relative;
width:295px;
margin:20px auto 0;
padding: 0;
list-style: none;
}

#content #spskj-step2 dl ul li.qrcode {
position: absolute;
top:0;
left: 0;
width:110px;
margin:0 10px 0 0;
}

#content #spskj-step2 dl ul li.appstore {
width:170px;
margin:0 0 0 120px;
}

#content #spskj-step2 dl ul li.googleplay {
width:170px;
margin:5px 0 0 120px;
}

#content #spskj-step2 dl ul li img {
width:100%;
height: auto;
}


#content #spskj-step3 {
padding:60px 0 0;
background: url(../images/step3_bg.jpg) left top no-repeat;
text-align: center;
}

#content #spskj-step3 .info-area {
margin:20px 0 80px;
letter-spacing: -0.4em;
}

#content #spskj-step3 dl {
position: relative;
display: inline-block;
width:370px;
height:200px;
background: url(../images/contents_bg.jpg) left top repeat;
margin:0 10px;
padding:20px;
text-align: left;
letter-spacing: 0;
vertical-align: top;
}

#content #spskj-step3 dl ul {
position: relative;
width:295px;
margin:20px auto 0;
padding: 0;
list-style: none;
}

#content #spskj-step3 dl .image-area {
position: absolute;
top:20px;
right: 20px;
text-align: center;
}

#content #spskj-step3 dl p {
position: relative;
margin:20px 130px 0 0;
line-height: 130%;
padding:10px 10px 10px 30px;
border: 1px dotted #ccc;
}

#content #spskj-step3 dl p strong {
color:#b80b0e;
}

#content #spskj-step3 dl p span {
font-size:90%;
position: absolute;
left:10px;
color:#b80b0e;
}

#content #spskj-step3 .btn-area {
margin:20px 0 0;
}

#content #campaign-detail {
margin:80px 0 0;
}

#content #campaign-detail h2 {
text-align: center;
}

#content #campaign-detail dl {
background: #efefef;
margin:20px 25px 0;
padding:0 25px 25px;
border:1px solid #9C8C7C;
}

#content #campaign-detail dt {
border-bottom:1px solid #9C8C7C;
padding:0 0 10px;
font-weight: bold;
margin:25px 0 0;
}

#content #campaign-detail dd {
margin:10px 0 0;
font-size: 90%;
}

@media (min-width: 481px){
.for-sp {
display: none;
}
}

@media (max-width: 480px){
.for-pc {
display: none;
}

#content {
width:100%;
margin:0 auto;
}

#content img {
width:100%;
height: auto;
}

#content h2 {
margin: 0;
padding: 0 5%;
}

#content dl,
#content dt,
#content dd {
margin: 0;
padding: 0;
}

#content #spskj-date {
margin:10px 4% 0;
padding:0;
text-align: center;
line-height: 150%;
}

#content #spskj-date dt {
width:45%;
float:left;
display: block;
margin:0 10px 0 0;
padding:3px 0 0;
vertical-align: top;
}

#content #spskj-date dd {
width:100%;
display: block;
margin:0 10px 0 0;
text-align: left;
line-height: 130%;
font-size:13px;
}

#content #spskj-date dd span {
font-size:90%;
}

#content #spskj-step1 {
text-align: center;
margin:40px 0 0;
padding:0 0 40px;
background: url(../images/arrow.png) center bottom no-repeat;
}

#content #spskj-step1 .btn-area {
margin:20px 5% 0;
}



#content #spskj-step2 {
padding:60px 0 0;
text-align: center;
background: url(../images/step2_bg.jpg) left top no-repeat;
background-size: 100% 95%;
}

#content #spskj-step2 .info-area {
margin:20px 0 0;
padding:0 0 60px;
background: url(../images/arrow.png) center bottom no-repeat;
letter-spacing: -0.4em;
}

#content #spskj-step2 dl dt {
min-height:65px;
}

#content #spskj-step2 dl {
display: inline-block;
width:40%;
background: url(../images/contents_bg.jpg) left top repeat;
margin:0 1%;
padding:10px 3%;
text-align: left;
letter-spacing: 0;
vertical-align: top;
}

#content #spskj-step2 dl ul {
position: relative;
width:100%;
margin:10px auto 0;
padding: 0;
list-style: none;
}

#content #spskj-step2 dl ul li.qrcode {
display: none;
}

#content #spskj-step2 dl ul li.appstore {
width:auto;
margin:0;
}

#content #spskj-step2 dl ul li.googleplay {
width:auto;
margin:5px 0
}

#content #spskj-step2 dl ul li img {
width:100%;
height: auto;
}


#content #spskj-step3 {
padding:40px 0 0;
background: url(../images/step3_bg.jpg) left top no-repeat;
background-size:100% 85%; 
text-align: center;
}

#content #spskj-step3 .info-area {
margin:20px 0 80px;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
letter-spacing: -0.4em;
}

#content #spskj-step3 dl {
display: inline-block;
width:40%;
height: auto;
background: url(../images/contents_bg.jpg) left top repeat;
margin:0 2% 0 5%;
padding:10px 2%;
text-align: left;
letter-spacing: 0;
vertical-align: top;
}


#content #spskj-step3 dl.kuji {
display: inline-block;
width:40%;
background: url(../images/contents_bg.jpg) left top repeat;
margin:0;
padding:10px 2%;
text-align: left;
letter-spacing: 0;
vertical-align: top;
}


#content #spskj-step3 dl ul {
position: relative;
width:295px;
margin:20px auto 0;
padding: 0;
list-style: none;
}

#content #spskj-step3 dl dt img {
width:auto;
height:auto;
max-width:100%;
max-height:60px;
}

#content #spskj-step3 dl .image-area {
margin:10px 0 0;
position: relative;
top:auto;
right: auto;
text-align: center;
}

#content #spskj-step3 dl .image-area img {
width:40%;
}

#content #spskj-step3 dl p {
margin:10px 4% 0;
height:auto;
line-height: 130%;
}

#content #spskj-step3 dl p strong {
color:#b80b0e;
}

#content #spskj-step3 dl p span {
font-size:90%;
}

#content #spskj-step3 .btn-area {
margin:20px 5% 0;
}

#content #campaign-detail {
margin:80px 0 0;
}

#content #campaign-detail h2 {
text-align: center;
}

#content #campaign-detail h2 img {
width:40%;
}

#content #campaign-detail dl {
background: #efefef;
margin:20px 25px 0;
padding:0 25px 25px;
border:1px solid #9C8C7C;
}

#content #campaign-detail dt {
border-bottom:1px solid #9C8C7C;
padding:0 0 10px;
font-weight: bold;
margin:25px 0 0;
}

#content #campaign-detail dd {
margin:10px 0 0;
font-size: 90%;
}
}