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

/* float解除 */
.mainDownload ul:after,.nnews:after,.nnewswrap:after,.snsmini:after,.imnews:after,.newBoxi,.inner3:after,.usercasebottom:after{
	content:" ";
	display:block;
	clear:both
}


body{
	min-width:100%;
}



/* ------------------------------------------
button-i *i*
------------------------------------------ */
.button-i{
	border:solid 2px #4084dd;
	border-radius:0.3em;
	text-align:center;
	background:#fff;
	margin: 1em auto;
	font-size:1em;
}
	
.button-i a{
	display:block;
	color:#4084dd;
	padding:0.5em;
}

.button-i a:hover ,.button-iW a:hover{
	background-color:#4084dd;
	color:#fff;
	text-decoration:none;
}

.ability .button-i, .newfunction .button-i, .usercase2 .button-i{
	margin-top:3em;
	font-size:1.5em;
}

/* ------------------------------------------
mainV *i*
------------------------------------------ */
.mainV{
width:100%;
margin:0 auto;
}

.banner{
	text-align:center;
}

.banner img{
width:80%;
max-width: 100%;
height: auto;

}


/* ------------------------------------------
snsmini *i*
------------------------------------------ */
#sns{
	width:300px;
	margin-right:0;
	margin-left:auto;
	margin-bottom:1em;
}

.snsmini{
	width:100%;
	background-color:#fff
}
/* ------------------------------------------
imnews *i*
------------------------------------------ */
.imnews{
	/*font-size:14px;*/
	font-size:16px;
	line-height:1.6em;
	background-color:#fff;
	padding:15px 20px 15px 20px;
	border:2px solid #999;
	margin:10px;
	
}

.imnews1{
	float:left;
	width:120px;
}
.imnews2{
	float:left;
	width:100px;
	padding:5px;
	margin:0;
}
.imnews3{
	float:left;
	font-size:16px;
	padding:5px;
	margin:0;
	margin-right:10px;
	margin-top:10px;
}

/*.imnews h2{
	background-color:#e97981;
	color:#fff;
	width:100px;
	padding:5px;
	text-align:center;
	margin:0;
	margin-right:10px
}*/

.imnews h2{
	background-color:#e97981;
	color:#fff;
	width:90%;
	padding:10px;
	text-align:center;
	font-size:1.8em;
	margin:0 auto;
}

.campaign .newbox .imnews{
	font-size:14px;
	background-color:#fdfddd;
	padding:10px;
	border:1px dashed #999;
	margin:10px;
}

.campaign .newbox .imnews h3{
	font-size:16px;
	font-weight:bold;
	color:#333333;
}

/* キャンペーン枠内のストアバナーの設定*/
.imnews ul{ 
	text-align:center;
		padding-bottom:10px;

}

.imnews li{
	display: inline;
	margin:  10px;
}

.imnews li img{
	padding-top:20px ;
}

.imnews ul a:hover img{
	opacity: 0.7;
  	filter: alpha(opacity=70);
  	-ms-filter: "alpha(opacity=70)";
}

.imnewsp{
	padding-top:20px;
}
.imnewsps{
	font-size:0.8em;
	line-height:1.2em;
	padding-top:10px;
}

/* ------------------------------------------
newInfoMini
------------------------------------------ */

.newInfoMini{
overflow:hidden;
margin-right:0;
margin-left:auto;
padding-top:1em;
max-width:360px;
}

.newInfoMiniTtl{
font-size:1.1em;
text-align:left;
padding:1em 0 1em 1em;
display:block;
width:160x;
}
.newInfoMini .upfotter2{
display:block;
margin:0;
padding:0;
width:180px;
}
.newInfoMini:after,.newInfoMini .upfotter2:after{
content:"";
display:block;
clear:both
}
.newInfoMini .upfotter2 li{
padding:0;
margin:0;
margin-left:1em;
float:left;
}
.newInfoMini .follow i{
font-size:1.5em;
vertical-align:middle;
margin:0;
}
.newInfoMiniTtl, .newInfoMini .upfotter2{
float:left;
}

/* ------------------------------------------
newbox *i*
------------------------------------------ */

.newbox{
	clear: both;
	margin: 0 auto;
	padding-left: 2%;
	padding-right: 2%;
	padding-top:50px;
	padding-bottom: 50px;
}
.newbox h1{
	color:#333;
	font-size:3em;
	text-align:center;
	margin-bottom:20px;
}
.newbox img{
	width:100%;
}
.boxA,.boxB,.boxC,.download,.nnews{
/*0626	width:320px;*/
	margin:2.5%;
	width:95%;
}



.MSmoviebox{
	text-align:center;
	}
	
.MSmoviebox ul li{
	display:inline-block;
	}

.MSmoviebox iframe{
	padding:2em;
	padding-top:1em;
	width:auto;
	}


/* ------------------------------------------
linkbox *i*
------------------------------------------ */

.linkbox a{
	display:block;
	background-color:#e87c84;
	color:#fff;
	text-decoration:none;
	width:150px;
	padding:10px;
}

.linkbox a:hover{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”;
}

.linkboxtitle{
	font-size:16px;
	padding-bottom:16px}

.linkboxcomment{
	font-size:16px}

/* ------------------------------------------
box-style
------------------------------------------ */

.inner1 h2,.inner1A h2,.inner1 p,.inner1A p{
	padding:0;
	margin:0}

.inner1 h2,.inner1A h2{
	font-size:1.5em;
}
.inner1 p,.inner1A p{
	font-size:0.8em;
}

.inner1 a{
	display:block;
	color:#fff;
	width:100%;
	text-align:center;
	padding:0.5em 0;}
.inner1A{
	color:#fff;
	text-align:center;
	padding:10px 0;
	margin:0 auto;
	background-color:#333;
	border-bottom:solid 5px #35b7ca;
	border-radius:5px 5px 0 0;
}


.download .inner1{
	background-color:#333;
	border-bottom:solid 5px #4084dd;
	border-radius:5px 5px 0 0 }

.boxA .inner1{
	background-color:#65c9e9;
	border-bottom:solid 5px #4db8e4;
	border-radius:5px 5px 0 0 }

.boxB .inner1{
	background-color:#f2bf6e;
	border-bottom:solid 5px #eba85a;
	border-radius:5px 5px 0 0 }

.boxC .inner1{
	background-color:#e84c58;
	border-bottom:solid 5px #dd3041;
	border-radius:5px 5px 0 0 }

.inner2{
	width:258px;
	margin:0 auto;
	padding-top:10px;
	font-size:1.2em
}


.inner2 a:hover img{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”;
}

.innerwrap{
	border:1px solid #ddd;
	border-radius: 5px;
	box-shadow:1px 1px 3px #efefef;
}

.innerc{
	margin-top:1em;
	line-height:1.5em
}





/* ------------------------------------------
nnews *i*
------------------------------------------ */
.nnewswrap{
	float:left;
	padding:1em 0 0 1em;
}


.nnews4{
	float:left;
	max-width:390px;
	padding:1em;
	-webkit-box-sizing:border-box;
	-moz-box-sizing::border-box;
	box-sizing:border-box;
	font-size:1.2em
}
.nnews3{
	float:left;
	padding:1em;
	width:30px;
}

.inner3{
	border-bottom:1px dotted #ddd;
}

.nnews a,.download a{
	display:block;
}


.downloadc{
	text-align:right;
	padding:1em;
	font-size:1.1em;
}


.download a:hover,.nnews .innerwrap a:hover{
	background-color:#4084dd;
	color:#fff;
	text-decoration:none;
}


/* ------------------------------------------
 mainDownload *i*
------------------------------------------ */
.mainDownload{
	margin:0;
	padding:1em 0 0  1.3em;
	border-bottom:1px dotted #ddd;
	font-size:1.3em;
}

.mainDownload a{
    width: auto;
    margin-right: 0;
}

.mainDownload p{
	margin-bottom:0.8em;
}


.mdL a img{
width:130px;
}

.mdR a img{
width:120px;
}

.mdL a:hover,.mdR a:hover{
	background-color:#fff;
}

.mainDownload ul{
display:block;
width:280px;
}

.mainDownload li{
float:left;
padding:0.3px
}



/* ------------------------------------------
 ability *i*
------------------------------------------ */
.ability{
	padding-bottom: 30px;
}

.ability h1{
	font-size:2.5em;
}

.ability .subnewbox{
position:relative}

.ability .subnewbox .linkbox{
position:absolute;
bottom:2%;
left:2%
}


.ability .subtitle{
	font-size:1.8em;
	text-align:center;
	margin-bottom:0.5em;
	color:#333;
}

.ability .subtitle2{
	font-size:1.8em;
	margin-bottom:1.2em;
	text-align:center;
	color:#4084dd;
}


.ability .subnewboxp{
	display:none;
}




/* ------------------------------------------
 campaign *i*
------------------------------------------ */
.campaign{
	padding-bottom:1em;
	/*background-color:#d6f1fd;*/
	border:solid 5px #009fe6;
	margin-bottom:3em;
}

.campaign h1{
	font-size:2.5em;
	padding:10px;
	background-color:#009fe6;
	color:#fff;
	text-align:center;
}


.campaign h2{
	font-size:1.8em;
	padding-top:1em;
	color:#051b8a;
	font-weight:bold;
}

.campaign .subnewbox{
	position:relative;
	padding-left:10px;
	padding-right:10px;

}
.campaign p{
	font-size:1.3em;
}

.campaign p span{
	color:#fc0208;
	font-size:120%;
	font-weight:bold;
}
.campaign img{
	padding:10px;
	margin-bottom:1em;
}


.campaign ol .dicimal{
	list-style-type: decimal;
}
.campaign ol li{
	padding:10px;

}

.campaign .subtitle{
	font-size:1.8em;
	text-align:center;
	margin-bottom:0.5em;
	color:#333;
}

.campaign .subtitle2{
	font-size:1.8em;
	margin-bottom:1.2em;
	text-align:center;
	color:#4084dd;
}


.campaign .subnewboxp{
	display:none;
}




/* ------------------------------------------
 newfunction *i*
------------------------------------------ */
.newfunction{
	background-color:#31c397;
	margin-bottom:0;
	width:100%
}

.newfunction .newbox{
	margin-bottom:0;
}
.newfunction h1{
	color:#fff;
	font-size:2.5em;
}

.newfunction h1 span{
	background:#0a83ea;
	padding-left:5px;
	padding-right:5px;
}

.newfunction .subnewbox{
	background-color:/*rgba(255,255,255,0.2);*/#ffffff;
	padding:10px;
	position:relative
}


.newfunction .subnewbox .linkbox{
position:absolute;
right:1em;
bottom:3em;
}

.newfunction .newbox .subtitle{
	font-size:1.8em;
	text-align:center;
	margin-bottom:1.5em;
	color:#fff;
}

.newfunction .subtitle2{
	font-size:1.8em;
	margin-top:1em;
	margin-bottom:0.8em;
	text-align:left;
	color:#333333;
}

.newfunction p span{
	font-size:1.5em;
	margin-bottom:1.2em;
	text-align:center;
	color:#333333;
}

/* ------------------------------------------
usercaseb-i *i*
------------------------------------------ */


.usercasetop{
	background-color:rgba(255,255,255,0.9);
	width:280px;
	height:120px;
	position:absolute;
	left:-4em;
	bottom:-4em;
}

.usercase h1{
	text-align:left;
	margin:0;
	font-size:2.5em;
}


.usecasetext-1{
	font-size:3em;
	padding-right:10px
}

.usecasetext-2{
	font-size:1.5em
}


.usercase{
	background:url(../img/img_school.png);
	background-size:cover;
	padding:80px;
	margin-top:50px;
}


.usercase .newbox{
	width:30%;
}

.usercase .newbox {
	position:relative;
	width:100%;
	height:100px
}


.usecasetext li{
	float:left
}


/* ------------------------------------------
 usercase2 *i*
------------------------------------------ */


.usercasebottom-1{
	width:191px;
	margin:0 auto;
	text-align:center;
}

.usercase2 .newbox{
	padding-top:40px
}

.usercasebottom-1 img{
	width:191px;
	height:172px;
	margin:0 auto;
}

.usercasebottom-2{
	font-size:1.3em;
	display:block;
	padding: 0 5px;
	width:18em;
	margin:0 auto
}

.usercasebottom-2 a{
	text-decoration:underline;
}


.usercasebottom-2 p{
	padding-top:20px
}






/* ------------------------------------------
upfooter位置 *i*
------------------------------------------ */
.upfotter_back{
	background-color:#f9f9f9;
	padding:30px 0;
	width:100%}


.upfotter1 ,.upfotter3{
	width:198px;
	height:239px;
	margin:0 auto;
	border:dotted 1px #ddd}

.upfotter2{
	margin:0 auto;
	width:198px;}


.upfotter1 ,.upfotter2 ,.upfotter3{
	margin-bottom:30px
}

.upfotter1 img a,.upfotter3 img a{
	margin-bottom:30px;
	border-style:dashed 5px #ff1
}

.upfotter1 a:hover,.upfotter3 a:hover{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”;
}


/* ------------------------------------------
follow *i*
------------------------------------------ */
.follow ul{
	margin:0;
	padding:0;
	list-style:none
}

.follow li a{
	display:block;
	margin-bottom:10px;
	padding:10px;
	border-radius:4px;
	color:#ffffff;
	font-size:14px;
	text-decoration:none
}

.follow li a:hover{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”;
}

.follow-tw{
	background-color:#63bafb
}

.follow-fb{
	background-color:#5288f7
}

.follow-tm{
	background-color:#34465d
}


.follow i{
	margin-right:10px;
	font-size:24px;
	vertical-align:middle
}


/* 補足説明 */
.follow p{
	margin-top:0;
	margin-bottom:20px;
	padding:10px;
	background-color:#dddddd;
	font-size:14px;
	text-align:center
}

.follow-info {
	position: relative;
	background: #dddddd;
}

.follow-info:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(221, 221, 221, 0);
	border-top-color: #dddddd;
	border-width: 15px;
	margin-left: -15px;
}



/* ########## 420以下  i########## */
@media screen and (max-width: 420px){
.upfotter_back .upfotter2{
	display:none
}
}


/* ########## 480以下  i########## */
@media screen and (max-width: 420px){
.usercase2 .button-i{
	margin-top:1em;
}

.ability .subnewbox{
	display:none;
}

.ability .subnewboxp{
	display:block;
}

}


/* ########## 420px以上629以下  i########## */
@media screen and (min-width: 420px) and (max-width: 629px)  {


/* ------------------------------------------
upfooter位置 *i*
------------------------------------------ */
.upfotter{
	width:410px;
	margin:0 auto;
}

.upfotter{
	content:"";
	display:block;
	clear:both;
}

.upfotter1{
	float:left;
}

.upfotter3{
	float:right
}
.upfotter_back .upfotter2{
	clear:both;
}

}





/* ########## 481px以上  i########## */
@media screen and (min-width: 481px){

.newfunction br{
display:none
}

.ability .subnewboxp{
	display:none;
}

.ability .subnewbox{
	display:block;

}

}

/* ########## 630px以上  i########## */
@media screen and (min-width: 630px){



/* ------------------------------------------
upfooter位置 *i*
------------------------------------------ */
.upfotter_back .upfotter{
	width:620px;
	margin:0 auto;
}

.upfotter_back .upfotter,.upfotter_back .upfotter_back{
	content:"";
	display:block;
	clear:both;
	overflow:hidden;
}

.upfotter_back .upfotter1,.upfotter_back .upfotter3,.upfotter_back .upfotter2{
	float:left
}

.upfotter_back .upfotter1,.upfotter_back .upfotter3{
	margin-right:10px
}



}

/* ########## 640px以上  i########## */
@media screen and (min-width: 640px){

.download,.boxA,.boxB,.boxC{
float:left;
width:46%;
margin:2%
}

.ability br,.newfunction br{
display:none
}


.ability .button-i, .newfunction .button-i, .usercase2 .button-i{
	width:20em;
	font-size:1.5em;
}

.usercasebottom{
	width:630px;
	margin:0 auto;
	
}
.usercasebottom-1{
	float:left;
}
.usercasebottom-2{
	float:right;
}

.usercasebottom-2{
	width:26em;
	padding-left:1em
}
}




/* ########## 900px以上  i########## */
@media screen and (min-width: 900px){
.download,.boxA,.boxB,.boxC,.nnews{
margin:2% 0;
}

.download,.boxA,.boxC{
	padding-left:1%
}
.nnews,.download,.boxA,.boxC{
	padding-right:1%
}

.nnews{
width:60%;
float:right;
background-color:#fff;
}

.download{
width:37%;
float:left;
}

.boxA{
	clear:both
}
.boxA,.boxB,.boxC{
	width:32%;
}

}