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

@media screen and (min-width: 768px){
.sp_none{
display: block;
}	
.pc_none{
display: none;
}
h2{
font-size: 50px;
}
.stit{
font-size: 20px;
}
.stit span{
font-size: 27px;
margin-right: 5px;
}
.row{
display: flex;
}
.flow-root{
display: flow-root;
}

/*--------------------------------------------------------------
MV:
----------------------------------------------------------------
*/	
#visual {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
padding: 60px;
}
#visual .l p {
margin: 30px auto;
font-size: 22px;
}
#visual .l {
min-width: 60%;
margin-right: 50px;
}
	
/*--------------------------------------------------------------
Lead:
----------------------------------------------------------------
*/
#lead{
padding: 0 30px 100px 30px;
font-size: 20px;
}
	
/*--------------------------------------------------------------
What is:
----------------------------------------------------------------
*/	
#whatis{
padding: 100px 50px;
}
#whatis .img{
margin-bottom: 50px;
}
#whatis .tit{
margin-bottom: 15px;
min-width: 250px;
}
#whatis h3{
font-size: 25px;
margin-bottom: 10px;
}
	
/*--------------------------------------------------------------
features:
----------------------------------------------------------------
*/
#features{
padding: 100px 50px;
}
#features .flow-root{
margin-bottom: 70px;
}
#features .flow-root:last-child{
margin-bottom: 0;
}
#features .img ,#features .txt {
width: 47%;
}
#features .odd .img{
float: right;
}
#features .odd .txt {
float: left;
}
#features .even .img {
float: left;
}
#features .even .txt {
float: right;
}
#features .tit{
margin-bottom: 60px;
}
#features .txt h3 {
font-size: 25px;
margin-bottom: 10px;
}

/*--------------------------------------------------------------
top news:
----------------------------------------------------------------
*/
#top-news {
padding: 80px 50px;
}
#top-news a.btn {
text-align: center;
margin-left: 0;
margin-top: 15px;
}
#top-news .tit {
min-width: 200px;
}
#top-news .img {
max-width: 200px;
}
#top-news .img {
margin-right: 20px;
}
#top-news .news_box a:last-child{
margin-bottom: 0;
}
	
/*--------------------------------------------------------------
function:
----------------------------------------------------------------
*/
#function{
padding: 100px 50px;
}
#function .tit {
margin-bottom: 50px;
}
#function .grid{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-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;
}
#function .f-box{
width: 28%;
margin-right: 7%;
margin-bottom: 70px;
}
#function .f-box:nth-child(3n){
margin-right: 0;
}
#function .f-box .img {
width: 115px;
}
#function .cv_txt {
font-size: 22px;
}
#function .f-box .icon-tit {
font-size: 20px;
}
#function hr{
margin-top: 70px;
margin-bottom: 70px;
}

}

@media screen and (min-width: 900px){
h2{
font-size: 80px;
}
/*--------------------------------------------------------------
What is:
----------------------------------------------------------------
*/	
#whatis .tit{
margin-bottom: 15px;
min-width: 400px;
}
/*--------------------------------------------------------------
News:
----------------------------------------------------------------
*/		
#top-news .tit {
min-width: 350px;
}


}