html,body{
	margin:0; 
	padding:0;
	background-color:#fff;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size:14px;
	font-weight:normal;
	color:#666;
	line-height:1.5;
}
#wrapper{
	text-align:center;
	padding:20px;
	background:url(bg.png)no-repeat center bottom;
	background-size:cover;
	border-radius:10px;
	overflow:hidden;
}
#step1{
	width:52%;
	float:left;
}
#step1 h2{
	font-size:16px;
	line-height:30px;
	color:#fff;
	background-color:#906;
}
#step1 p{
	font-size:10px;
	font-weight:normal;
	white-space:nowrap;
	line-height:1.2;
	height:2.4em;
	-webkit-transition: color 0.5s;
	-moz-transition: color 0.5s;
	-ms-transition: color 0.5s;
	-o-transition: color 0.5s;
	transition: color 0.5s;
}
#step1 ul{
	overflow:hidden;
	padding:0 5px;
	background-color:rgba(255,255,255,0.8);
}
#step1 ul li{
	width:25%;
	padding-top:5px;
	margin:3px 0 5px;
	float:left;
	text-align:center;
	border-radius:5px;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
}

.shadow{
	box-shadow:1px 1px 5px #ccc;
}

#step1 ul li div{
	width:65%;
	margin:0 auto 5px;
	padding-top:65%;
	border-radius:50%;
	border:1px solid #666;
	box-shadow:1px 1px 10px #aaa;
	cursor:pointer;
	position:relative;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
#step1 ul li div:after{
	content:'';
	display:block;
	width:100%;
	padding-top:100%;
	position:absolute;
	top:0;
	left:0;
	border-radius:50%;
	background:url(shadow.png)no-repeat center center;
	background-size:100%;
}
#step1 ul li div:hover{
	opacity:0.8;
}

#step1 ul li:last-child{
	width:100%;
}
#step1 ul li:last-child img{
	width:200px;
}


.cont_wrapper {
    width: 45%;
    margin: 0;
    padding-bottom:60px;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
    float:right;
}
.inner {
	width:100%;
	padding-top:110%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    transition: .6s;
}
.front,
.back {
	width:100%;
	padding:1px 1px 5%;
    position: absolute;
    top: 0;
    left: 0;
    /*
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    */
}
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
 /*   display:none; */
}
.front img,
.back img{
	width:100%;
}
.front h2,
.back h2{
	text-align:left;
	padding:2% 3% 0;
	font-size:18px;
}
.front h2 br,
.back h2 br{
	display:none;
}
.front p,
.back p{
	height:40px;
	text-align:left;
	padding:0 3%;
	font-size:14px;
	line-height:1.5;
}

.page{
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}







@media screen and (max-width:640px){
html {
	-webkit-text-size-adjust: 100%;
}
#wrapper{
	padding:15px 20px;
}
#step1{
	width:100%;
	float:none;
}
#step1 h2{
	display:none;
}
#step1 ul li{
	width:25%;
}
#step1 ul li div{
	width:50%;
	padding-top:50%;
}
#step1 ul li div:hover{
	opacity:1;
}

#step1 ul li p{
//	display:none;
}
#step1 ul li:last-child{
	display:none;
}

.cont_wrapper {
    width: 80%;
    float:none;
    margin:0 auto 10px;
    padding-bottom:40px;
}
.inner {
	padding-top:106%;
}
.front,
.back {
	padding:1px 1px 3%;
}
.cont_wrapper h2{
	display:none;
}
.cont_wrapper p{
	font-size:13px;
	margin-top:10px;
	letter-spacing:-0.07em;
}
.cont_wrapper p br{
	display:none;
}

}