@charset "euc-jp";
/* msforce drive
---------------------------------------------------------------------- */
#msf-drive {
	background-color:#000;
	font-family:"heisei-kaku-gothic-std", "¥á¥¤¥ê¥ª", "¥Ò¥é¥®¥Î³Ñ¥´ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, sans-serif;
	font-weight:300;
	vertical-align:middle;
	line-height:1.6
}

/* main */
#msf-drive header{color:#fff}
#msf-drive main{ max-width:1000px;color:#fff; margin:0 auto; padding-top:1em; overflow:hidden}
#msf-drive section{ margin-bottom:8em}
#msf-drive article{ margin-bottom:1em; padding:1em}

.orange{
	background: #cb5c18;
	background: -moz-linear-gradient(left, #cb5c18 0%, #e27110 50%, #f29847 100%);
	background: -webkit-linear-gradient(left, #cb5c18 0%,#e27110 50%,#f29847 100%);
	background: linear-gradient(to right, #cb5c18 0%,#e27110 50%,#f29847 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb5c18', endColorstr='#f29847',GradientType=1 );
	-webkit-box-shadow: 0 0 10px 5px #cb5c18;
	-moz-box-shadow: 0 0 10px 5px #cb5c18;
	box-shadow: 0 0 10px 5px #cb5c18;
}
.triangle { width:130px; margin:3em auto}

#msf-drive main h2{ width:20%; margin:0 .5em; padding:.3em 0 .1em; text-align:center; font-size:180%; font-weight:900}
#msf-drive h3{ font-size:280%; font-weight:900; line-height:2;text-align:center}
#msf-drive h3 br{ display:none}
#msf-drive h4{ font-size:150%; font-weight:900; line-height:1.5; margin:0 auto 2em; padding-left:80px; background:url(img/point.png) no-repeat}
#msf-drive .fade{ display:none}

/* top */

/* story */
#msf-drive #story p{ text-align:center}

#msf-drive #story .btn{ width:30%; margin:2em auto; border:2px solid; text-align:center}
#msf-drive #story i{ margin-right:.8em}
#msf-drive #story a{ display:block; padding:.8em; color:#fff;transition: all .5s;}
#msf-drive #story a:hover{ color:#000; background-color:#fff; text-decoration:none}
#msf-drive #story .l{ font-size:200%; font-weight:900; text-align:center}
#msf-drive #story .ll{ font-size:280%; font-weight:900; padding:.2em; text-align:center}
#msf-drive #story .inbox{ width:90%; margin:1em auto; padding:0.4em 0 0}

/* concept */
#msf-drive #concept .l{ font-size:200%; font-weight:900; text-align:center; padding:.5em 0 .4em}
#msf-drive #concept .m{ font-size:180%; font-weight:900; text-align:center; padding:0.3em 0.3em 0.2em}
#msf-drive #concept .inner{ width:90%; margin:0 auto}
#msf-drive #concept .inner .left{ float:left; width:40%}
#msf-drive #concept .inner .right{ float:right; width:60%}
#msf-drive #concept table{ width:100%; margin-top:2em}
#msf-drive #concept table th{ font-size:300%; font-weight:900; border-bottom:1px solid}
#msf-drive #concept table td{ padding:0.5em 0.15em; text-align:center; font-weight:900; font-size:200%}
#msf-drive #concept table td p{ font-weight:900; padding:.15em 0 0em}
#msf-drive #concept .lll{ font-size:500%; font-weight:900; text-align:center}
#msf-drive #concept .ll{ font-size:180%; font-weight:900; text-align:center}
#msf-drive #concept .l br{ display:none}
#msf-drive #concept .ll br{ display:none}

/* detail */
#msf-drive .detail{
	min-height:350px;
	background-image:url(img/img_03.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:top center
}
#msf-drive .de_inner{ padding-top:5.5em}
#msf-drive .de_inner .left{float:left; width:25%}
#msf-drive .de_inner .right{ position:static; width:45%; overflow:hidden; padding:0 2em}
#msf-drive .de_inner .right p{ font-size:120%; margin-bottom:0.5em}

#msf-drive .data .left{ float:left; width:50%; padding-right:1em}
#msf-drive .data .left img{ margin: 0 auto 3em}
#msf-drive .data .right{ float:right; width:50%}

/* school */
#msf-drive #school p{ text-align:center}
#msf-drive #school br{ display:none}
#msf-drive #school .l{ font-size:370%; font-weight:900; line-height:1.2; margin-bottom:.5em}
#msf-drive #school .m{ font-size:250%; font-weight:900; line-height:1.3}
#msf-drive #school h3 img{ display:block; margin:2em auto}
#msf-drive #school .s{ font-size:150%}
#msf-drive #school .s br{ display:none}
#msf-drive #school .m_box{ width:50%; float:left; padding:1em}
#msf-drive #school .m_box div{ display:flex; align-items:center; justify-content:center; flex-direction:column; height:250px; border:1px solid #FF4F00}
#msf-drive #school .m_box div p{ text-align:center}
#msf-drive #school .m_box .m_in{ position:relative; width:100%; padding-top:56.25%}
#msf-drive #school .m_box .m_in iframe{ position:absolute; top:0; right:0; width:100%; height:100%;}
#msf-drive #school .btn{ width:40%; margin:2em auto; border:2px solid; text-align:center}
#msf-drive #school i{ margin-right:.8em; }
#msf-drive #school a{ display:block; padding:.8em; color:#fff; transition: all .5s; }
#msf-drive #school a:hover{ color:#000; background-color:#fff; text-decoration:none; }

/* product */
#msf-drive #product p{ font-size:130%}
#msf-drive #product .p_inner{ margin:2em 0 0; overflow:hidden}
#msf-drive #product .p_left{ float:left; width:45%}
#msf-drive #product .p_right{ float:right; width:55%; padding:0 1.5em}
#msf-drive #product .p_right h5{ text-align:center; font-size:150%; font-weight:900}
#msf-drive #product .p_right table{ width:100%; margin-bottom:2em; border-spacing:0 .2em}
#msf-drive #product .p_right th{ width:40%}
#msf-drive #product .p_right th,
#msf-drive #product .p_right td{ padding:0.7em 0 0.5em; background-color:rgba(255,255,255,0.1)}
#msf-drive #product .p_right img{ margin:0 auto 2em}

/* flexslider */
.flexslider { background:none; border: none}
.flex-control-thumbs li { width: 16%; float: none; margin: .3em}
.flex-control-thumbs img { opacity: .4}
.flex-direction-nav a { margin: -60px 0 0}


@media screen and (max-width: 900px) {
/* main */
#msf-drive main h2{ width:30%; font-size:150%}
#msf-drive h3{ font-size:200%}
#msf-drive h4{ margin:0 auto 1em}
.triangle { width:70px; margin:2em auto}

#msf-drive #story,
#msf-drive #concept,
#msf-drive .detail,
#msf-drive #school,
#msf-drive #product{ padding:0 0.5em}

/* story */
#msf-drive #story .btn{ width:50%}
#msf-drive #story .l{ font-size:150%; font-weight:900}
#msf-drive #story .ll{ font-size:200%; font-weight:900; padding:.2em}

/* concept */
#msf-drive #concept .l{ font-size:170%}
#msf-drive #concept .m{ text-align:left}
#msf-drive #concept .m br{ display:none}
#msf-drive #concept .inner{ width:95%}
#msf-drive #concept .inner .left{width:30%}
#msf-drive #concept .inner .right{width:70%}
#msf-drive #concept table{ width:95%; margin:0em auto}
#msf-drive #concept table th{ font-size:250%}
#msf-drive #concept table td{ font-size:150%}
#msf-drive #concept .lll{ font-size:370%}

/* school */
#msf-drive #school br{ display:inline}
#msf-drive #school .btn{ width:50%}
}


@media screen and (max-width: 600px) {
/* header*/
#msf-drive h3{ font-size:180%; line-height:1.4; margin-bottom:.5em}
#msf-drive h3 br{ display:inline}

/* main */
#msf-drive main h2{ text-align:center; width:95%; margin:0 auto 1em}
#msf-drive #story,
#msf-drive #concept,
#msf-drive .detail,
#msf-drive #school,
#msf-drive #product{ padding:0 0.4em}

/* story */
#msf-drive #story p{ text-align:left}
#msf-drive #story .btn{ width:80%}

/* concept */
#msf-drive #concept .m{ font-size:130%; line-height:1.4}
#msf-drive #concept .m br{ display:none}
#msf-drive #concept article .l br{ display:inline}
#msf-drive #concept .inner{ width:100%}
#msf-drive #concept .inner .left{ float:none; width:40%; margin:0 auto}
#msf-drive #concept .inner .right{ float:none; width:100%}
#msf-drive #concept table td{ padding:0.5em 0.15em; font-size:140%}
#msf-drive #concept article .ll br{ display:inline}

/* detail */
#msf-drive .de_inner{ padding-top:2.5em}
#msf-drive .de_inner .left{ float:none; width:30%}
#msf-drive .de_inner .right{ width:100%; margin:1em auto; padding: 0}
#msf-drive .de_inner .right p{ font-size:120%; margin-bottom:0.5em}
#msf-drive .data .left,
#msf-drive .data .right{ float:none; width:100%; margin:0 auto 1em}
#msf-drive .de_inner .right p{ font-size:100%}

/* school */
#msf-drive #school .l{ font-size:200%}
#msf-drive #school .m{ font-size:130%}
#msf-drive #school .s{ font-size:100%}
#msf-drive #school .s br{ display:inline}
#msf-drive #school .m_box{ width:100%; float:none}
#msf-drive #school .m_box div{height:200px}
#msf-drive #school .m_in{ position:relative; width:100%; padding-top:56.25%}
#msf-drive #school .m_in iframe{ position:absolute; top:0; right:0; width:100%; height:100%;}
#msf-drive #school .btn{ width:80%}

/* product */
#msf-drive #product p{ font-size:100%}
#msf-drive #product .p_inner{ margin:2em 0; overflow:hidden}
#msf-drive #product .p_left{ float:none; width:80%; margin:0 auto; padding:0}
#msf-drive #product .p_right{ float:none; width:100%; padding:0 }
#msf-drive #product .p_right h5{ text-align:center; font-size:150%; font-weight:900}
#msf-drive #product .p_right table{ width:100%; margin-bottom:2em; border-spacing:0 .2em; font-size:90%}
#msf-drive #product .p_right th{ width:45%}
#msf-drive #product .p_right th,
#msf-drive #product .p_right td{ padding:0.7em 0 0.5em; background-color:rgba(255,255,255,0.1)}
#msf-drive #product .p_right img{ margin:0 auto 2em}

/* flexslider */
.flex-direction-nav .flex-prev ,
.flex-direction-nav .flex-next { display:none}

}