@charset "utf-8";
span.point {
	color: #ff0000;
}
.driver .recommendBox a:hover {
	text-decoration: none;
}
.driver .highlighter {
	background: linear-gradient(transparent 55%, #fff100 56%);
}
#contents .snsSet .fb_iframe_widget {
	vertical-align: top;
	display: inline-block;
}
.driver .link a {
	color: #FFF;
	text-decoration: underline;
}
.driver .link a:hover, .driver .link2 a:hover {
	text-decoration: none;
}
.driver .link2 a {
	color: #000;
	text-decoration: underline;
	font-size: 18px;
}

@media screen and (max-width: 767px) {
	/*-------------COMMON---------------*/
	.pc {
		display: none;
	}
	.br-pc {
		display: none;
	}
	.driver h2.ttl01 {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_usettl.png") no-repeat left top;
		background-size: 60px 60px;
		margin-bottom: 0px;
		min-height: 60px;
		padding: 10px 0 0 65px;
		font-size: 160%;
		font-weight: bold;
	}
	.driver h2.ttl02 {
		background: url(/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_lineupttl01.png) no-repeat left top;
		background-size: 60px 60px;
		color: #FFF;
		margin-top: 35px;
		margin-bottom: 20px;
		min-height: 75px;
		padding: 0 0 0 70px;
		font-size: 147%;
		font-weight: bold;
	}
	.driver h3.subTtl, .driver h4.subTtl {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_subttl_icon.png") no-repeat left top 8px;
		background-size: 12px;
		font-size: 135%;
		font-weight: bold;
		padding: 3px 0 0 15px;
		margin-bottom: 20px;
	}
	.driver h3.subTtl02 {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_subttl_icon02.png") no-repeat left center;
		background-size: 12px;
		font-size: 135%;
		font-weight: bold;
		padding: 3px 0 0 15px;
		margin-bottom: 20px;
		color: #FFF;
	}

	.driver .link2 a {
		font-size: 14px;
	}
	.driver iframe {
		width: 100%;
		margin: 13px 0;
	}.driver #btn a {
		display: block;
		vertical-align: top;
		box-sizing: border-box;
		font-size: 12px;
		font-weight: bold;
		color: #EA0B46;
		margin: 0 0 10px;
		text-align: left;
		padding: 9px 10px;
		background-color: #FEEDF1;
		border: #FAB4C5 2px solid;
		border-radius: 10px;
		box-shadow: 3px 3px 0 #ddd;
		animation: moveBtn 2s infinite 2s normal ease-out;
	}
	.driver #btn a:hover {
		text-decoration: none;
	}
	#btn a:hover {
		background-color: #FAB4C5;
		border: #ED6A89 5px solid;
		top: 30px;
		left: 40px;
		box-shadow: 1px 1px 0 #ddd;
		animation: none;
	}
	#mainAreaCont .breadcrumb {
		z-index: 30;
	}
	.lesson.driver #contents {
		padding: 0;
	}
	#contents .inner {
		width: 94%;
		max-width: 400px;
		padding: 1% 3%;
	}
	.lesson.driver .breadcrumb {
		z-index: 10;
	}
	.lesson.driver #mainAreaCont .logo {
		left: -52px;
		position: absolute;
		top: 6px;
		z-index: 20;
		width: 150px;
	}
	.lesson.driver #mainAreaCont .mainMv {
		margin: 0 auto;
		position: relative;
		width: 100%;
	}
	.lesson.driver #mainAreaCont .mainIn {
		left: 40px;
		margin: 0 auto;
		width: 100%;
		top: 0;
	}
	.lesson.driver #mainAreaCont .mainIn .ttl {
		left: auto;
		padding: 85px 50px 0 110px;
		position: relative;
		top: auto;
	}
	#mainAreaCont .mainIn .ttl img {
    max-height: 48px;
    width: auto;
}
	.lesson.driver #mainAreaCont {
		background: #e3d8e0 none repeat scroll 0 0;
		height: 200px;
		position: relative;
		overflow: hidden;
	}
	.lesson.driver #mainAreaCont .cover {
		background: url("/kiso/files/img/common/bg_main_bottom.png") repeat-x scroll center bottom, rgba(0, 0, 0, 0) url("/kiso/files/img/lesson/bg_main_op.png") repeat scroll 0 0;
		background-size: 25px auto, 6px 6px;
		height: 200px;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}
	.lesson.driver #mainAreaCont .mainMv .mv {
		display: none;
	}
	.lesson.driver #mainAreaCont .mainMv .mvsp {
		background: url("/kiso/files/img/lesson/ratchet_handle/L15_TOP.gif") no-repeat center 20px;
		height: 200px;
		width: 100%;
	}
	.driver .ktImg {
		width: 100px;
		display: inline-block;
		vertical-align: bottom;
		position: relative;
	}
	.driver .ktText01,  .driver [class^="lectureText0"],  .driver [class^="lectureText1"] {
		display: inline-block;
		vertical-align: middle;
		width: calc(100% - 120px);
		padding: 1em;
		position: relative;
		font-size: 12px;
	}
	.driver .ktText01 {
		width: calc(100% - 131px);
	}
	.driver .ktText01 br {
		display: none;
	}
	.driver [class^="lectureText0"],  .driver [class^="lectureText1"] {
		background: #fff;
		border: #666 2px solid;
		border-radius: 12px;
		box-sizing: border-box;
		position: relative;
	}
	.driver [class^="lectureText0"] br,  
	.driver [class^="lectureText1"] br {
		display: none;
	}
	.driver [class^="lectureText0"]:before, 
	.driver [class^="lectureText1"]:before {
		content: '';
		display: block;
		width: 15px;
		height: 15px;
		border-top: #666 2px solid;
		border-left: #666 2px solid;
		background: #fff;
		position: absolute;
		top: 50%;
		margin-top: -8px;
		left: -10px;
		transform: rotate(-45deg);
	}
	.driver .lectureText01,  
	.driver .lectureText03 {
		right: -20px;
	}
	.driver .lectureText02 {
		left: 9px;
		width: calc(100% - 125px);
	}
	.driver .lectureText02:before,  
	.driver .lectureText04:before {
	 left: calc(100% + -7px);
		transform: rotate(135deg);
	}
	.driver .lectureText04 {
		margin: 0 18px 0 0;
	}
	.driver .ktLecture02 {
		margin: 20px 0 0;
	}
	.driver .ktLecture02 .ktImg {
		float: right;
		width: 100px;
	}
	.driver .ktLecture03 {
		margin: 20px 0;
	}
	.driver .ktLecture04 {
		margin: 20px 0;
		position: relative;
	}
	.driver .lectureText04 {
		display: inline-block;
	}
	.driver .ktLecture04 .ktImg {
		margin: 0 0 0 0px;
		position: absolute;
		top: calc(50% - 50px);
		right: 0;
	}
	.driver .ktArea {
		overflow: hidden;
	}
	.driver .ktArea .ktText p {
		font-size: 13px;
	}
	.driver [class^="lectureText0"] p {
		font-size: 93%;
	}
	.driver [class^="lectureText1"] p {
		font-size: 93%;
	}
	/*-------------pickupArea---------------*/
	.driver .pickupArea {
		background: #4EB09C;
		padding: 0 0 30px;
	}
	.driver .pickupArea .inner > p, 
	.driver .pickupArea .pointContents > p {
		color: #fff;
	}
	.driver .pickupArea .lineup {
		margin: 30px 0 0;
		letter-spacing: -.4em;
	}
	.driver .pickupArea .lineup dl {
		display: inline-block;
		vertical-align: top;
		margin: 0 2% 20px;
		width: 46%;
		letter-spacing: normal;
	}
	.driver .pickupArea .lineup dl:nth-child(2n) {
		margin-right: 0;
	}
	.driver .pickupArea .lineup dd {
		margin: 7px 0 0;
	}
	.driver .pickupArea .lineup dd a {
		color: #FFF;
		text-decoration: underline;
		font-size: 13px;
	}
	/*-------------useBox---------------*/
	.driver .useBox {
		padding: 30px 0 30px;
	}
	.driver .useBox h2.ttl01 {
		padding-bottom: 20px;
	}
	/*--------------qaBox--------------*/
	.driver .qaBox {
		background: none;
		padding: 20px 0 10px;
	}
	.driver .qaBox .qaImg {
		width: 80%;
		margin: 20px auto 15px;
		display: block;
	}
	.driver .qaBox h2.qaTtl {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_qattl01.png") no-repeat left top;
		background-size: 60px 60px;
		color: #FFF;
		margin-bottom: 20px;
		min-height: 60px;
		padding: 10px 0 0 70px;
		font-size: 170%;
		font-weight: bold;
	}
	.driver .qaBox p {
		color: #FFF;
		font-size: 108%;
		margin: 0;
		padding: 0 2%;
		width: 96%;
	}
	.driver .qaBox p small {
		display:  block;
		margin:  20px 0 0;
		line-height:  1.8;
	}
	.driver .qaBox .img {
		width: 80%;
		margin: 0 auto 20px;
	}
	.driver .qaBox .qaBtn {
		margin: 0 auto;
		max-width: 590px;
		width: 100%;
	}
	.driver .qaBtn a {
		display: inline-block;
		margin: 1%;
		max-width: 280px;
		width: 48%;
		padding: 0;
		float: left;
	}
	/*------------- .chooseBox---------------*/
	.driver .chooseBox {
		padding: 35px 0 30px;
	}
	.driver .chooseBox p span {
		color: #f00;
	}
	.driver .chooseBox {
		padding: 35px 0 30px;
	}
	.driver .chooseBox .box {
		padding: 0 10px;
		color: #fff;
		font-size: 108%;
		line-height: 1.7;
	}
	.driver .chooseBox .box01 p {
		margin-bottom: 10px;
	}
	.driver .chooseBox .box02 {
		margin: 20px 0 20px;
	}
	.driver .chooseList {
		margin-bottom: 10px;
	}
	.driver .chooseBox h2.chooseTtl {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_choosettl01.png") no-repeat left top;
		background-size: 60px 60px;
		color: #FFF;
		margin-bottom: 0px;
		min-height: 60px;
		padding: 10px 0 0 70px;
		font-size: 170%;
		font-weight: bold;
	}
	.driver .chooseBox .ktImg {
		float: left;
	}
	.driver .chooseBox .btn01 {
		text-align: center;
		margin: 35px auto 15px;
		max-width: 250px;
	}
	.driver .chooseBox .txt {
		margin: 20px 0 20px;
		font-size:  14px;
	}
	/*-------------point02ListBox---------------*/

	.point02ListBox {
		width: 47%;
		display: inline-block;
		vertical-align: top;
		margin: 0 0 20px;
	}
	.point02ListBox:nth-child(odd) {
		margin: 0 3% 20px 0;
	}
	.driver .point02ListBox p a {
		color: #FFF;
		border-bottom: 1px solid;
	}
	.driver .point02ListBox p a br {
		display: none;
	}
	/*---------tipsBox01-----------*/
	.driver .tipsBox01 {
		background: #FFF;
		border: 5px solid #FAB4C5;
		border-radius: 5px;
		box-sizing: border-box;
		margin: 25px auto 15px;
		padding: 3% 1% 0;
		width: 100%;
	}
	.driver .tipsBox01 .tips {
		color: #333333;
		width: 100%;
		float: note;
	}
	.driver .tipsBox01 .tips .tipsLabel {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_tipslabel_icon.gif") no-repeat left 9px top 0px;
		color: #E6154A;
		font-size: 124%;
		font-weight: bold;
		padding-left: 30px;
		margin-bottom: 3px;
	}
	.driver .tipsBox01 .tipsWide h3 {
		font-size: 154%;
		font-weight: bold;
		margin-bottom: 15px;
	}
	.driver .tipsBox01 .tips h3 br {
		display: none;
	}
	.driver .tipsBox01 .tipsWide p {
		font-size: 108%;
		margin-bottom: 20px;
	}
	.driver .tipsBox01 .tips ul li {
		list-style-type: decimal;
		margin-left: 20px;
		font-size: 108%;
	}
	.driver .tipsBox01 .tips h3 {
		font-size: 154%;
		font-weight: bold;
		margin-bottom: 15px;
	}
	.driver .tipsBox01 .tips p {
		font-size: 108%;
		margin-bottom: 10px;
	}
	.driver .tipsBox01 .tips .noteText {
		font-size: 100%;
		margin-top: 10px;
	}
	.driver .tipsBox01 .tips {
		color: #333333;
		width: 100%;
		float: none;
	}
	.driver .tipsBox01 .tips h2 {
		font-weight: bold;
		padding:  0 0 0 12px;
	}
	.driver .tipsBox01 .tipsImg {
		max-width: 260px;
		width: 100%;
		float: none;
		margin: 0 auto 10px;
	}
	.driver .tipsBox01 .tipsImg p {
		font-size: 130%;
		font-weight: bold;
		margin: 0 0 10px;
	}
	.driver .tipsBox .tips {
		color: #333333;
		float: none;
		width: 100%;
	}
	.driver .tipsBox .tipsImg {
		float: none;
		width: 100%;
		max-width: 240px;
		margin: 15px auto 0;
		text-align: center;
	}
	.driver .tipsBox .tips .tipsLabel {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_tipslabel_icon.gif") no-repeat left 3px;
		color: #E6154A;
		font-size: 124%;
		font-weight: bold;
		padding-left: 30px;
		margin-bottom: 10px;
	}
	.driver .tipsBox .tips h3 {
		font-size: 154%;
		font-weight: bold;
		margin-bottom: 15px;
	}
	.driver .tipsBox .tips h3 br {
		display: none;
	}
	.driver .tipsBox dl {
		margin: 0 0 20px 0;
	}
	.driver .tipsBox dt {
		font-size: 108%;
		font-weight: bold;
	}
	.driver .tipsBox .tips p {
		font-size: 108%;
		margin-bottom: 20px;
	}
	/*---------useLecture-----------*/
	.driver .useLecture .txt {
		font-size: 14px;
		line-height: 1.6;
		display: inline-block;
		vertical-align: top;
		margin:  10px 0 0;
	}
	.driver .useLecture .txt .point {
		font-weight: bold;
		font-size: 16px;
	}
	.driver .useLecture .img {
		width: 85%;
		margin: 0 auto;
	}
	.driver .useLecture h5 {
		color: #1b8e77;
		font-size: 17px;
		font-weight: bold;
		margin: 0px 0 3px;
	}
	.driver .useLecture .prepara {
		display: inline-block;
		vertical-align: top;
	}
	.driver .useLecture .prepara:nth-of-type(2) {
		margin:  20px 0 0;
	}
	.driver .useLecture .prepara p {
		font-size: 14px;
		line-height: 1.4;
		margin: 0px 0 10px 1em;
		padding: 0;
		text-indent: -1em;
	}
	.driver .useLecture.lecture01 .img {
	margin: 20px auto 20px;
	}
	.driver .useLecture.lecture01 .txt {
		margin: 0 0 10px;
	}
	.driver .useLecture.lecture02 {
		margin: 40px 0 40px;
	}
	.driver .useLecture.lecture02 .txt small {
		margin: 20px 0 0;
		display: block;
	}
	.driver .useLecture.lecture03 .link2 a {
		font-size: 13px;
	}
	.driver .useLecture.lecture03 .pointArea {
		margin: 3px 0 14px;
	}
	.driver .useLecture.lecture03 .pointArea dt {
		padding: 0;
	}
	.pointArea {
		background: #FFF;
		font-size: 14px;
		padding: 15px 20px;
		border-radius: 10px;
		margin: 20px 0;
	}
	.pointArea dt {
		color: #44a490;
		font-weight: bold;
		display: inline-block;
		vertical-align: middle;
		padding: 0;
		margin: 0 10px 5px 0;
	}
	.pointArea dd {
		display: inline-block;
		vertical-align: middle;
		line-height: 1.5;
	}
	.driver .ktLecture07 {
		position: relative;
		padding: 95px 0 0;
	}
	.pointArea dd span {
		color: #44a490;
	}
	/*--------- useMovie -----------*/
	.driver .useMovie {
		position: relative;
		width: 96%;
		padding: 0 0 56% 0;
		margin: 0px auto 30px;
		text-align: center;
	}
	.driver .useMovie iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.driver .ktLecture {
    background: #4eb09c;
    padding: 31px 0;
}
	/*--------------onfirmationArea--------------*/
	.driver .confirmationArea {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_confirmation.png") repeat-x left 50px;
		height: auto;
		padding-top: 40px;
		overflow: hidden;
		min-height: 385px;
	}
	.driver .confirmationArea h3 {
		font-size: 18px;
		font-weight: bold;
		color: #fff;
		padding: 15px 4% 0;
	}
	.driver .confirmationArea h3 span {
		font-size: 13px;
		font-weight: normal;
		display: inline-block;
		vertical-align: middle;
	}
	.driver .confirmationArea .inner {
		padding: 30px 0 45px !important;
	}
	.driver .confirmationArea .confirmationImg {
		width: 100px;
		display: inline-block;
		vertical-align: middle;
	}
	.driver .confirmationArea .confirmationImg > div {
		display: none;
	}
	.driver .confirmationArea .confirmationImg .default {
		display: block
	}
	.driver .confirmationArea .confirmationAnser {
		width: calc(100% - 120px);
		display: inline-block;
		vertical-align: middle;
		position: relative;
		top: -10px;
		max-height: 250px;
	}
	.driver .confirmationArea .confirmationAnser .confirmation,  .driver .confirmationArea .confirmationAnser .confirmationOn {
		background: #fff;
		color: #666;
		width: 100%;
		display: inline-block;
		margin: 30px 0 10px;
		font-size: 93%;
		border: #666 2px solid;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 1em;
		position: relative;
	}
	.driver .confirmationArea .confirmationAnser .confirmationOn {
		opacity: 0;
	}
	.driver .confirmationArea .confirmationAnser .confirmation a:not([href$=".html"]),  .driver .confirmationArea .confirmationAnser .confirmationOn a:not([href$=".html"]) {
		margin: 70px 0 0;
	}
	.driver .confirmationArea .confirmationAnser .confirmation a[target="_blank"],  .driver .confirmationArea .confirmationAnser .confirmationOn a[target="_blank"] {
		position: absolute;
		left: 0;
		bottom: -70px;
	}
	.driver .confirmationArea .confirmationAnser .confirmation a[href="#"],  .driver .confirmationArea .confirmationAnser .confirmationOn a[href="#"] {
		position: absolute;
		left: 0;
		bottom: -136px;
	}
	.driver .confirmationArea .confirmationAnser img {
		height: 57px;
	}
	.driver .confirmationArea .confirmationAnser .confirmation:before,  .driver .confirmationArea .confirmationAnser .confirmationOn:before {
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		background: #fff;
		border-top: #666 2px solid;
		border-left: #666 2px solid;
		position: absolute;
		top: 50%;
		left: 0;
		margin: -6px 0 0 -7px;
		transform: rotate(315deg);
	}
	.driver .confirmationArea .confirmationAnser .anser {
		background: none;
		color: #666;
		width: 100%;
		height: auto;
		margin: 0;
		float: none;
		position: relative;
	}

	.driver #btn {
		margin: 0 auto;
		background-position: left top;
		background-repeat: no-repeat;
		position: relative;
	}


	/*----------------------------*/
	.driverBottom {
    width: 100%;
    margin: 30px auto 0;
	}
	.driver .twitterQuestion {
		max-width: 280px;
		width: 50%;
		margin: 0 auto;
		float: none;
	}
	.driver .snsSet {
		float: none;
	}
	#contents .driverBottom .snsSet {

    text-align: center;
	}
	/*----------------------------*/
	.driver .recommend {
		background: none;
		padding: 45px 10px;
	}
	.driver .recommend01 {
		background: #4eb09c;
		padding: 40px 0 40px;
	}
	.driver .recommend02 {
		padding: 40px 0 0;
	}
	.driver .rcommendMovie {
		position: relative;
		width: 96%;
		padding: 0 0 56% 0;
		margin: 10px auto 11px;
		text-align: center;
	}
	.driver .rcommendMovie iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.driver .recommend .recommendLeft {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	.driver .recommend .recommendRight {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	.driver .recommend .recommendBox {
		width: 100%;
		margin: 0 auto;
		padding-top: 20px;
		text-align: center;
	}
	.driver .recommendBox h4 {
		margin: 10px 0 0;
		font-size: 13px;
		font-weight: bold;
		letter-spacing: -0.3px;
		text-align: left;
	}
	.driver .recommendBox p {
		padding: 0;
		font-size: 11px;
		text-align: left;
	}
	.driver .recommend .recommendImg {
		margin: 0 auto 15px;
		width: 220px;
	}
	.driver .recommend .recommendBox h3 {
		font-size: 139%;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.driver .recommend .recommendNote {
		padding: 0 0 15px;
	}
	 @keyframes moveBtn {
		 0% {
		top:26px;
		}
		 20% {
		top:32px;
		}
		 25% {
		top:32px;
		}
		 30% {
		top:16px;
		}
		 38% {
		top:26px;
		}
		 42% {
		top:20px;
		}
		 48% {
		top:26px;
		}
	}
}

@media screen and (min-width: 768px) {
	.lesson.driver .breadcrumb {
		z-index: 10;
	}
	.sp {
		display: none !important;
	}
  .driver .pager01 a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    height: 117px;
    padding: 0;
  }
	/*-----.ktArea------*/

	.driver .ktArea .ktText h2 {
		font-size: 170%;
		font-weight: bold;
	}
	.driver .ktArea {
		margin: 0px 0 0;
		padding: 30px 0 0px;
	}
	.driver .ktArea .ktImg {
		float: left;
		margin-bottom: 0;
	}
	.driver .ktArea .ktText {
		float: left;
		padding-top: 40px;
		margin-left: 40px;
	}
	.driver .ktArea .ktText01 {
		width: 720px;
	}
	.driver .ktArea .ktText01 span {
		font-size: 22px;
		font-weight: 600;
	}
	.driver .ktArea .ktText p {
		font-size: 139%;
		line-height: 1.9rem;
	}
	/*-----.lectureText------*/

	.lectureTextInner01, .lectureTextInner02, 
	.lectureTextInner03, .lectureTextInner04 {
	/* opacity:0; */
	}
	.driver .ktImg {
		float: left;
	}
	/*-----content common------*/	

	.driver .pickupArea {
		background: #4EB09C;
		color: #fff;
		padding: 10px 0 0;
	}
	.driver h2.ttl01 {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_usettl.png") no-repeat left top;
		color: #000;
		margin-bottom: 20px;
		min-height: 75px;
		padding: 45px 0 0 90px;
		font-size: 30px;
		font-weight: bold;
	}
	.driver h2.ttl02 {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_lineupttl01.png") no-repeat left top;
		margin-bottom: 30px;
		min-height: 75px;
		padding: 45px 0 0 90px;
		font-size: 30px;
		font-weight: bold;
	}
	.driver h3.subTtl,  .driver h4.subTtl {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_subttl_icon.png") no-repeat left center;
		padding: 3px 0 0 35px;
		margin-bottom: 20px;
		font-size: 190%;
		font-weight: bold;
	}
	.driver h4.subTtl {
		font-size: 26px;
		margin: 46px 0 32px;
	}
	.driver h3.subTtl02 {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_subttl_icon02.png") no-repeat left 7px;
		font-size: 200%;
		font-weight: bold;
		padding: 3px 0 0 35px;
		margin-bottom: 20px;
		color: #FFF;
	}
	.useBox {
		padding: 50px 0 110px;
	}
	.useLecture .txt {
		width: 480px;
		font-size: 18px;
		line-height: 1.6;
		display: inline-block;
		vertical-align: top;
	}
	.useLecture .txt .point {
		font-weight: bold;
		font-size: 22px;
	}
	.useLecture .img {
		display: inline-block;
		vertical-align: top;
	}
	.lecture03 {
		position:relative;
	}
	.useLecture h5 {
		color: #1b8e77;

		font-size: 22px;
		font-weight: bold;
		margin: 0 0 9px;
	}
	.useLecture .prepara {
		display: inline-block;
		vertical-align: top;
	}
	.useLecture .prepara:nth-of-type(2) {
		margin: 60px 0 0;
	}
	.useLecture p {
		font-size: 18px;
		line-height: 1.7;
	}
	.useLecture.lecture01 .img {
		margin: 0 0px 0 60px;
	}
	.useLecture.lecture01 .txt {
		margin: 0 0 10px;
	}
	.useLecture.lecture02 {
		margin: 0 0 70px;
	}
	.useLecture.lecture02 .img {
		margin: 0 40px 0 0;
	}
	.useLecture.lecture02 .txt small {
		margin: 20px 0 0;
		display: block;
	}
	.useLecture.lecture03 .link2 {
		margin: 0 0 15px;
	}
	.useLecture.lecture03 .pointArea {
		margin: 3px 0 14px;
	}
	.useLecture.lecture03 .pointArea dt {
		padding: 0 10px 16px;
	}
	/*-----.qaBox------*/	

	.driver .qaBox {
		padding: 55px 0 30px;
	}
	.driver .qaBox h2.qaTtl {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_qattl01.png") no-repeat left top;
		color: #FFF;
		margin-bottom: 10px;
		min-height: 75px;
		padding: 45px 0 0 90px;
		font-size: 231%;
		font-weight: bold;
	}
	.driver .qaBox p {
		color: #FFF;
		font-size: 139%;
		margin: 20px 0 0px 0px;
		width: 470px;
		line-height: 1.8;
	}
	.driver .qaBox .img {
		display: inline-block;
		vertical-align: top;
		margin: 0;
	}
	.driver .qaBox .txt {
		display: inline-block;
		margin: 0 0 0;
		vertical-align: top;
	}
	.driver .qaBox .txt p small {
		line-height: 1.6;
		display: block;
		margin: -15px 0 0 1em;
		text-indent:  -1em;
	}
	.driver .qaBox .txt p {
		margin: 0 0 30px;
	}
	.driver .pickupArea .lineup {
		margin: 70px 0 0;
	}
	.driver .lineup dl {
		display: inline-block;
		vertical-align: top;
		margin: 0 70px 0 0;
	}
	.driver .lineup dl:last-of-type {
		margin-right: 0;
	}
	.driver .lineup dt {
		transition: opacity .5s ease;
	}
	.driver .lineup dt:hover {
		opacity: .8;
	}
	.driver .lineup dd {
		margin: 7px 0 0;
	}
	.driver .lineup dd a {
		color: #FFF;
		text-decoration: underline;
		font-size: 18px;
	}
	.driver .lineup dd a:hover {
		text-decoration: none;
	}
	.driver .ktLecture {
		background: #4eb09c;
		padding: 70px 0;
	}
	.driver .recommend01 .ktLecture {
		padding: 0;
	}
	/*-----.choose------*/

	.driver #choose01 {
		font-size: 18px;
	}
	.driver #choose01 .inner {
		background: url(/kiso/files/img/lesson/ratchet_handle/img_ratchet_handle_chooseimg.png) no-repeat top 180px right 0px;
		padding: 70px 0 120px;
	}
	.driver #choose01 p {
		margin: 0 0 32px;
		line-height: 1.8;
		width: 390px;
	}
	.driver #choose02 {
		padding: 70px 0 60px;
	}
	.driver #choose02 .txt {
		font-size: 18px;
		line-height: 1.8;
	}
	.driver #choose02 .img {
		margin: 40px 0 50px;
		text-align: center;
	}
	.driver #choose02 .pointArea {
		width: 970px;
	}
	.driver .chooseBox p span, .driver .txt02 {
		color: #f00;
	}
	.driver .chooseLecture {
		margin: 45px 0 0;
	}
	.driver .qaBox .qaBtn {
		margin-left: 40px;
	}
	.driver .qaBox .qaBtn a {
		display: inline-block;
	}
	/*-----.point01------*/	

	.driver .box01 {
		margin: 46px 0 0px;
		line-height: 1.8;
		background: url(/kiso/files/img/lesson/ratchet_handle/img_ratchet_handle_qaimg01.png) no-repeat top 140px right 0px;
		padding: 0;
	}
	.driver .box02 {

		margin: 10px 0 0px;
		line-height: 1.8;
		background: url(/kiso/files/img/lesson/ratchet_handle/img_ratchet_handle_qaimg02.png) no-repeat top 170px right 0px;
	}
	.driver .box01 p {
		display: inline-block;
		font-size: 18px;
		margin: 0 15px 0 0;
	}
	.driver .box01 img {
		display: inline-block;
		vertical-align: top;
	}
	.driver .box01 p span {
		display: block;
		font-size: 14px;
		margin: 15px 0 0;
	}
	/*-------------------*/
	.driver .tipsBox01 {
		background: #FFF;
		border: 5px solid #FAB4C5;
		border-radius: 15px;
		margin: 20px 0 50px;
		padding: 35px 25px 0;
		width: 910px;
		color: #333;
		height: 360px;
		overflow: hidden;
	}
	.driver .tipsBox01 h2 {
		font-size: 26px;
		font-weight: bold;
	}
	.driver .tipsBox01 .img {
		position: relative;
		top: -70px;
		left: 60px;
	}
	.driver .qaBtn {
		padding: 0 0 100px;
	}
	.driver .qaBtn a {
		display: inline-block;
	}
	.driver .tipsBox01 .tips .tipsLabel {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_tipslabel_icon.gif") no-repeat top 5px left 3px;
		color: #E6154A;
		font-size: 155%;
		font-weight: bold;
		padding-left: 30px;
		margin-bottom: 10px;
	}
	.driver .tipsBox01 .tipsImg {
		display: inline-block;
		width: 400px;
		font-size: 26px;
	}
	.driver .tipsBox01 .tipsImg p {
		font-size: 26px;
		font-weight: bold;
		margin: 0 0 20px
	}
	/*-------------------*/
	.driver .ktLecture01 .lectureText01 {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_kttext01.png") no-repeat 0 20px;
		width: 766px;
		height: 190px;
		float: left;
		/* opacity:0; */
		line-height: 1.55;
		margin: 12px 0 0 -7px;
	}
	.driver .ktLecture01 .lectureText01 p {
		color: #333333;
		font-size: 18px;
		padding: 67px 120px 0px 90px;
	}
	.driver .ktLecture02 {
		position: relative;
		margin: 0 0;
	}
	.driver .ktLecture02 .lectureText02 {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_kttext02.png") no-repeat;
		width: 755px;
		height: 158px;
		margin: 37px 0 33px 132px;
		float: left;
		line-height: 1.6;
	}
	.driver .ktLecture02 .lectureText02 p {
		color: #333;
		font-size: 18px;
		padding: 46px 160px 80px 73px;
	}
	.driver .ktLecture02 .ktImg {
		position: absolute;
		right: 0;
		top: 0;
	}
	/*-----.point02------*/	

	.driver .point02ListBox {
		color: #000;
		display: inline-block;
		vertical-align: top;
		margin: 0 100px 53px;
	}
	.driver .point02ListBox p a {
		color: #FFF;
		display: inline-block;
		padding: 9px 0 0;
		font-size: 18px;
		border-bottom: 1px solid;
	}
	.driver .point02ListBox a {
		transition: all .5s ease;
	}
	.driver .point02ListBox:last-of-type {
		margin: 0 0 35px 0;
	}
	.driver .point02ListBox a:hover {
		opacity: .8;
		border-bottom: none;
	}
	/*----------------------------*/
	.driver .ktLecture03 {
		margin: 0px 0 0;
	}
	.driver .lectureText03 {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_kttext03.png") no-repeat 0 20px;
		width: 766px;
		height: 210px;
		float: left;
		line-height: 1.55;
	}
	.driver .lectureText03 p {
		color: #333;
		font-size: 18px;
		padding: 65px 0px 0 90px;
		line-height: 1.7;
	}
	.driver .ktLecture04 {
		position: relative;
		margin: -32px 0 0;
	}
	.driver .lectureText04 {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_kttext04.png") no-repeat;
		width: 855px;
		height: 195px;
		margin: 62px 0 27px 90px;
		float: left;
		line-height: 1.6;
	}
	.driver .lectureText04 p {
		color: #333;
		font-size: 18px;
		line-height: 1.8;
		padding: 40px 92px 0px 100px;
	}
	.driver .ktLecture04 .ktImg {
		position: absolute;
		right: 0;
		top: 87px;
	}
	.driver .lineupList {
		margin: 30px 0;
	}
	.driver .lineupList ul {
		display: inline-block;
		width: 450px;
		font-size: 18px;
		font-weight: bold;
		letter-spacing: -0.3px;
		vertical-align: top;
		margin: 40px 60px 0 0;
	}
	.useMovie {
		position: absolute;
		top: 70px;
		right:  0;
	}
	.pointArea {
		background: #FFF;
		font-size: 18px;
		padding: 15px 20px;
		border-radius: 10px;
		width: 690px;
		margin: 20px 0;
	}
	.pointArea dt {
		color: #44a490;
		font-weight: bold;
		display: inline-block;
		vertical-align: middle;
		border-right: solid 1px;
		padding: 0px 10px 45px 0px;
		margin: 0 10px 0 0;
	}
	.pointArea dd {
		display: inline-block;
		vertical-align: middle;
		line-height: 1.5;
	}
	.driver .ktLecture07 {
		position: relative;
		padding: 95px 0 0;
	}
	.pointArea dd span {
		color: #44a490;
	}
	/*-----.recommendArea------*/	
	.driver .recommendArea {
		padding: 50px 0;
	}
	.driver .recommend01 {
		background: #4eb09c;
		padding: 80px 0 50px;
	}
	.driver .recommend02 {
		padding: 90px 0 0;
	}
	.driver .recommend .subTtl {
		font-size: 30px;
		margin-bottom: 60px;
	}
	.driver .recommend01 .subTtl {
		background: url(/kiso/files/img/lesson/ratchet_handle/bg_subttl_icon02.png) no-repeat left center;
	}
	.driver .recommend .rcommendMovie {
		text-align: center;
		margin: 40px 0 110px;
	}
	.driver .recommendBox {
		margin: 50px 0 0;
	}
	.driver .recommendBox h4 {
		font-size: 18px;
		margin: 15px 0 5px;
	}
	.driver .recommend .point02ListBox p a {
		display: inline;
		text-decoration: none;
	}
	.driver .ktLecture13 {
		margin: 38px 0 0;
	}
	.driver .ktLecture14 {
		position: relative;
		margin: 50px 0 93px;
	}
	.driver .lectureText14 {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_kttext14.png") no-repeat;
		width: 853px;
		height: 195px;
		margin: 52px 0 0;
		float: left;
		line-height: 1.6;
	}
	/*----------------------------*/
	.confirmationArea {
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_confirmation.png") repeat-x;
		height: 480px;
		padding-top: 50px;
		overflow: hidden;
		padding-bottom: 30px;
	}
	.driver .confirmationArea h3 {
		font-size: 30px;
		font-weight: bold;
		color: #fff;
		margin: 20px 0 25px 60px;
	}
	.driver .confirmationArea h3 span {
		font-size: 18px;
		font-weight: normal;
		display: inline-block;
		vertical-align: middle;
		margin: 0 0 0 40px;
	}
	.driver .confirmationArea .confirmationImg {
		width: 245px;
		float: left;
	}
	.driver .confirmationArea .confirmationImg > div {
		display: none;
	}
	.driver .confirmationArea .confirmationImg .default {
		display: block;
	}
	.driver .confirmationArea .confirmationAnser {
		width: 720px;
		float: left;
	}
	.driver .confirmationArea .confirmationAnser a {
		color: #666;
		text-decoration: underline;
	}
	.driver .confirmationArea .confirmationAnser .confirmation, 
	.driver .confirmationArea .confirmationAnser .confirmationOn {
		color: #666;
		margin-top: 30px;
		font-size: 124%;
		font-weight: bold;
		width: 340px;
		background: url("/kiso/files/img/lesson/ratchet_handle/bg_ratchet_handle_confirmation01.gif") no-repeat left top;
	}
	.driver .confirmationArea .confirmationAnser .confirmation {
		height: 137px;
		padding: 46px 50px 0 70px;
	}
	.driver .confirmationArea .confirmationAnser .confirmationOn {
		opacity: 0;
		height: 127px;
		padding: 24px 50px 0 80px;
	}
	.driver .confirmationArea .confirmationAnser #ans_b {
		padding-top:  43px;
	}
	.driver .confirmationArea .confirmationAnser .confirmation img,  
	.driver .confirmationArea .confirmationAnser .confirmationOn img {
		margin: 85px 0 -70px;
	}
	.driver .confirmationArea .confirmationAnser .anser {
		color: #666;
		margin: 25px 0 0 40px;
		position: relative;
	}
	.driver #btn {
		margin: 0 auto;
		background-position: left top;
		background-repeat: no-repeat;
		position: relative;
	}
	.driver #btn a {
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		font-size: 20px;
		font-weight: bold;
		color: #EA0B46;
		margin: 0 12px 20px;
		text-align: center;
		padding: 20px 20px;
		background-color: #FEEDF1;
		border: #FAB4C5 5px solid;
		border-radius: 10px;
		box-shadow: 5px 5px 0 #ddd;
		animation: moveBtn 2s infinite 2s normal ease-out;
		text-decoration: none;
	}
	#btn a:hover {
		background-color: #FAB4C5;
		border: #ED6A89 5px solid;
		top: 30px;
		left: 40px;
		box-shadow: 1px 1px 0 #ddd;
		animation: none;
		text-decoration: none;
	}
	.driver .twitterQuestion {
		width: 280px;
		float: left;
	}
	.driver .snsSet {
		float: right;
	}
	.ratchet_meganeBottom {
		width: 670px;
		margin: 30px auto 0;
	}
	 @keyframes moveBtn {
		 0% {
		top:26px;
		}
		 20% {
		top:32px;
		}
		 25% {
		top:32px;
		}
		 30% {
		top:16px;
		}
		 38% {
		top:26px;
		}
		 42% {
		top:20px;
		}
		 48% {
		top:26px;
		}
	}
}

@media screen and (min-width: 768px) {
.reccommendboxL {margin:0 20px;float:left; width:300px;}
.reccommendboxR {margin:0 20px;float:right; width:300px;}
.reccommendboxL p, .reccommendboxR p {margin:10px 0 0; color:#ffffff;}
}
@media screen and (max-width: 767px) {
.reccommendboxL {margin:0 20px;}
.reccommendboxR {margin:20px 20px 0;}
.reccommendboxL p, .reccommendboxR p {margin:10px 0 0; color:#ffffff;}
}