@charset "utf-8";

body{

 background-color: #ffc;

}

div.outer div.box1{

 background-image: url(../../forklogo.gif);
 background-repeat: no-repeat;
 background-size: contain;
 background-position: 50% 15px;
 background-color: #00f;
 height: auto;
 padding-top: 90px;
 padding-bottom: 15px;

}

p.clrb{

 clear: both;

}

div.mokuji{

 border: 3px double #ccc;
 margin: 10px 0;
 padding: 10px;

}

div.mokuji ol{

 padding: 10px 0 0 25px;

}

div.mokuji ol li{

 margin-bottom: 15px;

}

table.f_course tr td:nth-child(2),
table.f_course tr td:nth-child(3){

 width: 50px;
 text-align: center;

}

table.f_course tr.mark td{

 background-color: #eee;

}

div.col3,
div.col2,
div.behavior{

 display: flex;
 flex-flow: column nowrap;
 align-items: center;

}

div.col3,
div.col2,
div.behavior div{

 width: 100%;

}

div.col2 div div.fdriving{

 width: 100%;
 text-align: center;

}

div.behavior div img{

 max-width: 100%;

}

ol.button{

 display: flex;
 flex-flow: row wrap;

}

ol.button li{

 display: block;
 font-size: 13px;
 color: #fff;
 width: 26px;
 height: 26px;
 text-align: center;
 list-style-type: none;
 border-radius: 13px;
 background-color: #00f;
 line-height: 26px;
 margin: 6px;

}

ol.button li a{

 color: #fff;
 display: block;
 width: 100%;

}

table.drive tr td:first-child,
table.type tr td:first-child{

 color: #fff;
 width: 135px;
 background-color: #aaa;

}

table.type tr td:first-child{

 width: 130px;

}

table.drive tr td div.anime{

 display: block;
 width: 110px;
 border: 1px solid #ccc;
 border-radius: 5px;
 text-align: center;
 background-color: #00f;

}

table.drive tr td div.anime a{

 display: block;
 width: 100%;
 color: #fff;
 padding: 3px 3px 3px 10px;
 border-radius: 5px;
 background-image: url(../../star-ani01.gif);
 background-position: 7px 7px;
 background-repeat: no-repeat;

}

h2.f_days{

 width: 100%;
 color: #fff;
 border-radius: 7px;
 text-align: center;
 padding: 10px;
 margin: 15px 0;
 background-color: #000;


}

h3{

 width: 100px;
 color: #fff;
 text-align: center;
 border-radius: 3px;
 padding: 3px;
 margin: 5px 0;
 background-color: #000;

}

img.test_course{

 max-width: 100%;

}

div.dl_box{

 border: 3px double #ccc;
 margin: 15px 0;
 padding: 10px 20px;

}

div.dl_box p{

 margin: 10px 0;

}

div.next_page{

 display: block;
 color: #fff;
 font-size: 17px;
 background-color: #00f;
 width: 170px;
 height: 50px;
 margin: 15px auto;
 text-align: center;
 border-radius: 5px;
 line-height: 50px;

}

div.next_page a{

 color: #fff;
 display: block;
 width: 100%;
 border-radius: 5px;

}

ol.fp_navi{

 display: flex;
 flex-flow: row nowrap;
 justify-content: center;

}

ol.fp_navi li{

 color: #fff;
 font-size: 15px;
 width: 30px;
 height: 30px;
 list-style-type: none;
 text-align: center;
 border-radius: 15px;
 background-color: #00f;
 margin: 0 5px;
 line-height: 30px;

}

ol.fp_navi li a{

 display: block;
 width: 100%;
 color: #fff;
 border-radius: 15px;

}

ol.fp_navi li.cp{

 background-color: #000;

}

ol.fp_navi li.arrow{

 width: 60px;

}

div#home_banner{

 width: 166px;
 margin: 10px auto;

}

@media screen and (min-width:330px){

div.outer div.box1{

 background-size: auto;

}

}/*330px*/

@media screen and (min-width:600px){

div.outer div.box1{

 padding-top: 90px;

}

div.box2{

 padding-top: 10px;

}

div.col3{

 flex-flow: row wrap;

}

div.col2{

 flex-flow: row nowrap;

}

div.col2,
div.col3{

 align-items: flex-start;

}

div.col3 div,
div.col2 div{

 width: 50%;

}

div.col2 div:first-child{

 margin-right: 15px;

}

table.drive tr td div.anime a{

 background-position: 5px 8px;

}

}/*600px*/

@media screen and (min-width:830px){

div.behavior{

 flex-flow: row nowrap;
 align-items: flex-start;
 margin: 30px 0;

}

div.behavior div:first-child{

 margin-right: 15px;

}

}/*830px*/

@media screen and (min-width:1000px){

div.col3{

 flex-wrap: nowrap;

}

div.col3 div{

 width: auto;
 padding: 10px;

}

}/*1000px*/