@charset "utf-8";
body {
	font: 16px "Hiragino Kaku Gothic ProN","メイリオ",'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	background: #ffffff;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #333;
    -webkit-text-size-adjust: 100%;
}

* { 
margin: 0; 
padding: 0; 
}

img{
	margin: 0;
	padding: 0;
	border:none;
}

p{
	margin: 0;
	padding: 0;
	font-size:16px;
	line-height:2.0;
}

a{
	margin: 0;
	padding: 0;
	color:#000;
	text-decoration:none;
}

ul{
	margin: 0;
	padding: 0;
}

li{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.clearfix:after {
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
h1{
	letter-spacing: 1px;
}

.btn_style{
	margin: 48px auto;
	overflow: hidden;
	width: 240px
}

#contact .btn_style{
	margin: 30px auto;
}
.btn_style a{
	width: 240px;
	height: 64px;
	line-height: 64px;
	color: #fff;
	background: #333333;
	box-shadow: 3px 0px 6px rgba(0,0,0,0.16);
	display: block;
	text-align: center;
	vertical-align: middle;
	border-radius: 32px;
	font-size: 12px;
}
.btn_style a:hover{
	box-shadow: 0px 0px 0px;
	opacity: 0.9;
}


/*メインイメージ------------------------------------------------*/
#top{
	background-image: url("../img/circle_pctop.png");
	background-repeat: no-repeat;
	background-size:900px 900px;
	background-position:center -90px;
}
.float_head{
	margin: auto;	overflow: hidden;
}
#top header{
	overflow: hidden;
	width: 100%;
}
.repeat_circle {
	z-index: -999;
	text-align: center;
	background-image: url("../img/circle_repeat.png");
	background-repeat: repeat-x;
	background-size:318px auto;
	background-position:center;
	position: absolute;
	top:474px;
	width: 100%;
	height: 46px;
	filter: drop-shadow(10px 10px 30px rgba(0,0,0,0.16));
	transform: translateZ(0);
}
.top_logo{
	display: none;
}
.top_logo img{
	width: 100%;
}
img.centerimg{
	width: 260px;
	text-align: center;
	margin:97px auto 54px;
	filter: drop-shadow(30px 30px 30px rgba(0,0,0,0.16));
}

#content01{
	width:100%;
	margin:125px 0 0;
	padding: 0;
	text-align: center;

}
#content01 h2{
	font-size: 30px;
	margin: 0 0 30px;
}
h2 .blue{
	color: #51D7EC;

}

h2 .orange{
	color: #FB7D2E;
}
#content01 p{
	margin: 30px 0;
}
#repeat_filter{
	height: 105px;
	width: 100%;
	background-image: url("../img/repeat_filter.png");
	background-repeat: repeat-x;
	background-size: auto 105px;
	background-position:50% 0;
	-webkit-animation: bgscroll 13s linear infinite;
	animation: bgscroll 13s linear infinite; 

}
@keyframes bgscroll{
0% {background-position: calc(50% + 0px) 0;}
6% {background-position:calc(50% + 0px) 0;}
9% {background-position: calc(50% - 117px) 0;}
15% {background-position: calc(50% - 117px) 0;}
18% {background-position: calc(50% - 117px*2) 0;}
24% {background-position: calc(50% - 117px*2) 0;}
27% {background-position: calc(50% - 117px*3) 0;}
33% {background-position: calc(50% - 117px*3) 0;}
36% {background-position: calc(50% - 117px*4) 0;}
42% {background-position: calc(50% - 117px*4) 0;}
45% {background-position: calc(50% - 117px*5) 0;}
51% {background-position:calc(50% - 117px*5) 0;}
54% {background-position: calc(50% - 117px*6) 0;}
60% {background-position: calc(50% - 117px*6) 0;}
63% {background-position: calc(50% - 117px*7) 0;}
69% {background-position: calc(50% - 117px*7) 0;}
72% {background-position: calc(50% - 117px*8) 0;}
79% {background-position: calc(50% - 117px*8) 0;}
82% {background-position: calc(50% - 117px*9) 0;}
88% {background-position: calc(50% - 117px*9) 0;}
91% {background-position:  calc(50% - 117px*10) 0;}
97% {background-position:  calc(50% - 117px*10) 0; }
100% {background-position: calc(50% - 117px*11) 0; }
}
#content01 #inner img{
    width: 100%;
    height: auto;
	padding: 0;
	margin: 0;
}
#about{
	margin: 150px auto;
	width: 900px;
}
#content02{
	overflow: hidden;
	background-image: url("../img/content_bg.png");
	background-repeat: no-repeat;
	background-size: auto 1160px;
	background-position:center;
}
#content02 h3{
	font-size:21px;
}
.float_left{
	float: left;
	width: 230px;
}
.float_right{
	float: right;
	width: 640px;
}
.filter01{
	width: 496px;
	text-align: left;
	margin: 0 0 30px 170px;
}
.filter02{
	width: 420px;
	text-align: left;
	margin: 255px 245px 0 0;
}
.filter03{
	width: 260px;
	text-align: left;
	margin: 230px 0 0;
}
.filter02 img{
	width: 200px;
	float: right;
	filter: drop-shadow(30px 30px 30px rgba(0,0,0,0.16));
}
.filter02 .filter02_text{
	padding: 346px 0 0;
	width: 225px;
}

.filter01 img,.filter03 img{
	width: 100%;
	filter: drop-shadow(30px 30px 30px rgba(0,0,0,0.16));
	margin: 0 0 30px;
}
#dl{
	width: 700px;
	margin: 0 auto;
}
#appIcon{
	width: 123px;
	float: left;
}
#appIcon img{
	width: 100%;
}
#dl #inner{
	width: 550px;
	float: right;
	text-align: left;
	margin: 0 0 48px;
}
#dl #inner h2{
	font-size: 21px;
	margin: 0 0 5px;
}
#dl #inner p{
	line-height: 1.6;
}
.app{
	clear: both;
}
#contact{
	margin: 180px auto 80px
}
.sp{
	display: none;
}

/*FOOTER------------------------------------------------*/

footer {
	width:100%;
	height: 50px;
	margin: 0;
	padding: 20px 0 5px 0;

}
footer p{
	font-size: 12px;
}
footer a{
	text-decoration: underline;

}

footer a:hover{
	text-decoration: none;
}



/*PRIVACY POLICY------------------------------------------------*/

#pp_bg{
	background-image: url("../img/circle.png");
	background-repeat: no-repeat;
	background-size:840px 840px;
	background-position:center -610px;
}
#pp_bg h1{
	font-size: 21px;

}
#privacy {
	width:100%;
	margin: 0;
	padding: 0;
	text-align:left;
}


#privacy #inner{
	max-width: 700px;
	width:100%;
	padding: 60px 0 100px 0;
	margin: 0 auto;
}

#privacy #inner p{
	padding: 0;
	margin: 0;
}

#privacy #inner p a{
	text-decoration: underline;
}

#privacy #inner p a:hover{
	text-decoration: none;
}

/*------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1090px) {

/*PRIVACY POLICY------------------------------------------------*/
	

#privacy #inner p{
	padding: 0 20px;
	margin: 0;
}
}

/*スマホ用-----------------------------------------------------------------------------------------------*/

@media screen and (max-width: 768px) {

/*HEADER------------------------------------------------*/
#top{
	background-image: url("../img/circle.png");
	background-repeat: no-repeat;
	background-size:950px 950px;
	background-position:center -50px;
}
img.centerimg{
	width: 260px;
	text-align: center;
	margin:0 auto 40px;
	filter: drop-shadow(30px 30px 30px rgba(0,0,0,0.16));
}
.top_logo{
	display: block;
	width: 260px;
	margin: 24px auto 16px;
}
.repeat_circle {
	top:550px;
}



/*メインイメージ------------------------------------------------*/
	
#content01{
	margin:140px 0 0;
}

#content01 p{
    width: 90%;
    max-width: 540px;
	padding: 0;
	margin:  30px auto;
}

#content01 #inner #pc{
    width: 100%;
    height: auto;
	padding: 0;
	margin: 0;
    display: none;
}

#content01 #inner #sp{
    width: 100%;
    height: auto;
	padding: 0;
	margin: 0;
	display: block;
}
#content02{
	width: 100%;
	overflow: visible;
	padding: 140px 0;
	background-image: url("../img/content_bgsp.png");
	background-repeat: no-repeat;
	background-size: auto 85%;
	background-position:30% 0px;
}


/*HELMOJI------------------------------------------------*/

#about {
	max-width: 1090px;
	width:100%;
	padding: 0;
	margin: 0 auto;
	overflow: visible;
	/*height: 100%;*/
}
.filter02 .filter02_text{
	padding: 30px 0 0;
}
#about section{
	margin: 90px 5%;
	padding: 0;
	float: none;
	width: 90%;
}
#about section.filter01{
	margin: 0 5% 90px;
}
#about section.filter03{
	margin:  90px 5% 0;
}
.float_left,.float_right,.filter02 img{
	overflow: visible;
	float: none;
	margin: 0 auto;
	width: 100%;
	max-width: 480px;
}

/*DOWNLOAD------------------------------------------------*/
#dl {
	width: 100%;
}
.sp{
	display: block;
}

#dl #inner{
	width: 90%;
	max-width: 500px;

	margin: 0 auto;
	padding: 15px 5% 30px;
	text-align: center;
	float: none;
}

#appIcon{
	float: none;
	margin: 0 auto;
}

/*CONTACT------------------------------------------------*/
	
#contact #inner{
	width:95%;
	max-width: 500px;
	margin: 0 auto;
}


/*FOOTER------------------------------------------------*/


}