/*---base---*/

body{
font-family:Verdana, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-weight:normal;
font-style:normal;
font-size:85%;
line-height:150%;
text-align: center;
color:#333333;
background:none;
}

*{
margin:0px;
padding:0px;
}

h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:lighter;
}

img{
border-width: 0px;
border-style: none;
vertical-align:top;
}

table {
font-size:100%;
line-height:150%;
}

table td{
vertical-align:top;
}


#wrapper{
margin:0px auto;
width:96%;
text-align:left;
}

#main{
width:100%;
float:left;
margin-top:1em;
}

a:link,a:visited{
color:#0000FF;
text-decoration:none;
}

a:active,a:hover{
color:#999999;
text-decoration:none;
}

.title01 {
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), color-stop(0.5, #333333), color-stop(0.5, #121212), 				to(#121212));
	background:#333333 !important;

	font-size:120%;
width:100%;
	margin-bottom:5px;
	height:3em;
	text-indent:1em;
	line-height:3em;
	font-weight:bold;
	color:#fff;
	text-shadow:#000 1px 1px 1px;
	border-radius: 5px 5px 5px 5px;
	border: 1px solid #000;
	}
	

.title02 {
	float:left;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), color-stop(0.5, #EFEFEF), color-stop(0.5, #DEDEDE), to(#FFFFFF));
	font-size:120%;
width:100%;
	margin-bottom:5px;
	height:3em;
	text-indent:1em;
	line-height:3em;
	font-weight:bold;
	color:#333;
	text-shadow:#CCC 1px 1px 1px;
	border-radius: 5px 5px 5px 5px;
	border: 1px solid #ccc;
	}

.title02 img{
	vertical-align:middle;
	padding-bottom:2px;
	margin-left:1em;
}
.shadow{
	box-shadow:#999 1px 1px 1px;
}
.title02 img.shadow{
	padding-bottom:0px;
}

.iphonbox01 {
width:100%;
}

.iphonbox01_left {
width:50%;
	float:left;
}

.iphonbox01_right {
	float:right;
width:50%;
	margin-bottom:20px;
}
.txt01{
	float:left;
	width:90%;
	padding-left:1em;
}

.pb01 img{
	box-shadow:#999 1px 2px 3px;
}

.pb01{
	padding:0.6em;
	border:solid 1px #CCC;
	border-radius:5px 5px 5px 5px;
	background:#efefef;
	float:left;
}
.pb02{
	padding:0.6em;
	border:solid 1px #CCC;
	border-radius:5px 5px 5px 5px;
	background:#efefef;
	float:left;
}


/*--top---*//*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.m5 { margin-bottom:5px;}
.m10 { margin-bottom:10px;}
.m12 { margin-bottom:12px;}
.m15 { margin-bottom:15px;}
.m18 { margin-bottom:18px;}
.m20 { margin-left:0px; margin-bottom:20px;}
.m30 { margin-bottom:30px;}
.m40 { margin-bottom:40px;}
.m50 { margin-bottom:50px;}
.m60 { margin-bottom:60px;}
.mt10 { margin-top:10px;}


.ml1em{margin-left:1em;}
.ml10 { margin-left:10px; display:inline;}
.ml50 { margin-left:50px; display:inline;}
.ml30 { margin-left:30px; display:inline;}
.mr10 { margin-right:10px; display:inline;}

.pl10 { padding-left:10px;}
.pl20 { padding-left:20px;}
.pr10 { padding-right:10px;}

.flt { float:left;}
.flr { float:right;}


.section{
	float:left;
	width:100%;
	
}

.red{
	color:#F60;
}

.clear{
	clear:both;
	
}


.btn01 a {
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#99CC00), color-stop(0.5, #76A900), color-stop(0.5, #669900), to(#77AA00));
    border: 1px solid #669900;
    border-radius: 5px 5px 5px 5px;
    color: white;
    display: block;
    font-size: 15px;
    font-weight: bold;
    height: 32px;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 3px #001500;
    width: 150px;
}

.subtitle01{
	text-shadow:#CCC 1px 1px 1px;
	color:#638E1E;
	font-size:120%;
	font-weight:bold;
}

.subtitle02{
	text-shadow:#CCC 1px 1px 1px;
	color:#333;
	font-size:120%;
	font-weight:bold;
}

.detail_box01 {
    background: -webkit-linear-gradient(center top , #FFFFFF 0%, #E5E5E5 100%) repeat scroll 0 0 #BEBEBE;
    border: 1px solid #CCCCCC;
    border-radius: 10px 10px 10px 10px;
    height: auto;
    padding: 1em;
    text-align: left;
	clear:both;
    width: 90%;
}

/*chrome*/
@-webkit-keyframes turnX{
0%{-webkit-transform: rotateX(0deg);}
100%{-webkit-transform: rotateX(360deg);}
}

@-webkit-keyframes turnY{
0%{-webkit-transform: rotateY(0deg);}
100%{-webkit-transform: rotateY(360deg);}
}

@-webkit-keyframes turnZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(360deg);}
}


/*firefox*/
@-moz-keyframes binX{
		0%	{	-moz-transform:rotateX(0deg);}
		100%{-moz-transform:rotateX(360deg);}
}



.txt_alert{
-webkit-animation-name: turnX;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;

-moz-animation-name: binX;
-moz-animation-duration:2s;
-moz-animation-iteration-count: 1;
color:#F00;
}