@charset "utf-8";

@media screen and (max-width : 768px) {
    #contents_area {
        padding-top: 142px;
        color: #666;
    }

    img {
        width: 100%;
        height: auto;
    }

	.bnr {
		display: none;
		position: relative;
		width: 100%;
	}

	.floating_banner_sp {
		position: fixed;
		bottom: -3px;
		z-index: 88;
		display: block;
	}

    /* ------------------------------------------------------------
    *
        #lnav_wrap
    *
    ------------------------------------------------------------ */
    #lnav_wrap {
        position: absolute;
        top: 56px;
        padding: 16px 0;
        width: 100%;
        height: 85px;
        box-sizing: border-box;
        background-color: #fff;
        z-index: 3;
    }

    #lnav_wrap.open {
        background-color: #ebebeb;
        z-index: 9991;
    }

    #lnav_wrap.fixed {
        position: fixed;
    }

    #lnav_wrap .logo {
        text-align: center;
    }

    #lnav_wrap .logo img {
        width: 150px;
    }

    #lnav_wrap .lnav_ico {
        display: block;
        position: absolute;
        top: 25px;
        left: 0;
        width: 55px;
        height: 55px;
        cursor: pointer;
    }

    #lnav_wrap .lnav_ico.on {
        z-index: 10000;
    }

    #lnav_wrap .lnav_ico span {
        transition: all .4s ease;
    }


    #lnav_wrap .lnav_ico span.top {
        position: absolute;
        top: 22px;
        left: 13px;
        width: 20px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        border-top: 2px solid #444;
    }


    #lnav_wrap .lnav_ico span.btm {
        content: '';
        display: block;
        position: absolute;
        top: 22px;
        left: 26px;
        width: 20px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        border-top: 2px solid #444;

    }

    #lnav_wrap .lnav_ico.on span.top {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        left: 15px;
    }

    #lnav_wrap .lnav_ico.on span.btm {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        left: 15px;
    }

    #lnav {
        width: 100%;
        height: auto !important;
        float: none;
        visibility: hidden;
        position: absolute;
        top: 104px;
        left: 0;
        z-index: 9990;
    }

    #lnav .lnav_inner {
        display: none;
        overflow-y: scroll;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        position: relative;
        z-index: 10000;
    }

    #lnav .lnav_inner li a {
        height: 51px;
        padding: 0 0 0 35px;
        display: block;
        line-height: 51px;
        color: #444;
        font-size: 14px;
    }

    #lnav .lnav_inner li a:after {
        content: '';
        width: 7px;
        height: 51px;
        display: block;
        background-image: url(../common/image_common/parts_ico_btm_global_nav_arrow.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 7px;
        position: absolute;
        top: 0;
        right: 24px;
        transition: all .1s ease;
        -webkit-transition: all .1s ease;
    }

    #lnav .lnav_inner li a:hover:after {
        right: 19px;
    }

    #lnav_wrap .overlay {
        width: 100%;
        height: 100%;
        background-color: #ebebeb;
        position: fixed;
        top: 192px;
        left: 0;
        z-index: 1;
    }
    #lnav_wrap.fixed .overlay {
        top: 140px;
    }

    /* ------------------------------------------------------------
    *
        #top_mov
    *
    ------------------------------------------------------------ */

    #top_mov {
        margin-bottom: 30px;
        width: 100%;
		border-top: 1px solid #ccc;
    }

    .htc-embed-movie {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
    }

    .htc-embed-movie iframe, .htc-embed-movie .video-js {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        margin: auto;
    }

    /* #main_visual */
    #main_visual {
        margin-bottom: 30px;
    }

    #main_visual_inner .pic_visual img {
        width: 100%;
    }

    /* contents boxes */
    .section {
        color: #666;
    }

    .section h2 {
        margin-bottom: 30px;
        color: #595757;
        font-size: 21px;
        font-family: var(--font-bold);
        text-align: center;
        line-height: 1.3;
    }

    .section h2:after {
        content: "";
        display: block;
        margin: 20px auto 0;
        width: 60px;
        height: 3px;
        background-color: #0068B5;
    }

    .section h3 {
        margin: 0 0 25px 0;
		padding: 0;
        text-align: center;
    }

    .section_column {
        margin-bottom: 20px;
        font-size: 14px;
    }

    .section .section_column h4 {
        margin: 0 0 25px 0;
        font-size: 22px;
        text-align: center;
    }

	.section_column.about_01 {
		margin-bottom: 15px;
	}

	.section_column.about_01 h2 {
		color: #666;
		font-weight: normal;
	}

	.section_column.about_01 h2:after {
		display: none;
	}

    .section_column .caution {
        font-size: 10px;
        font-family: var(--font-light);
        padding: 4px 4px 0;
        text-align: left;
        line-height: 1.7;
    }

    .section_column .copy {
        margin: 4px 4px 3px;
        color: #6C9AD1;
        font-size: 15px;
        font-family: var(--font-bold);
    }

	.about_02 {
		margin-bottom: 54px;
	}

    .engine_oil.pic {
        margin-bottom: 15px;
    }

	.section_column.about_03 .tit_voice {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		margin-bottom: 18px;
	}

	.section_column.about_03 .gener {
		margin-bottom: 0;
		padding-right: 15px;
		width: 80px;
	}

	.section_column.about_03 .tit_voice .pic {
		margin: 0 auto;
		width: 60px;
	}

	.section_column.about_03 .tit_voice h3 {
		margin-bottom: 0;
		width: calc(100% - 110px);
		color: #3e3a39;
		text-align: left;
		font-size: 19px;
		line-height: 1.4;
		white-space: nowrap;
	}

	.section_column.about_03 .tit_voice .cap {
		color: #727171;
		text-align: center;
		font-size: 14px;
	}

	.section_column.about_03 .col_left {
		margin-bottom: 38px !important;
	}

	.section_column.about_03 .col_right {
		margin-bottom: 0 !important;
	}

	.section_column.about_03 .v_block {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}

	.section_column.about_03 .v_block .desc {
		color: #666;
		font-size: 16px;
        font-family: var(--font-bold);
		line-height: 1.5;
	}

	.section_column.about_03 .col_right .v_block .desc {
		padding-right: 10px;
	}

	.section_column.about_03 .v_block .pic {
		width: 80px;
	}

    .hr {
        width: 100%;
        height: 14px;
        background: url(../common/image_common/line.png) no-repeat 0 0;
        background-size: 100%;
        margin: 26px 0 10px;
    }

	#choice h2 {
		margin-bottom: 42px;
	}

    #choice .caution {
        margin: 0 20px;
        font-size: 11px;
        font-family: var(--font-light);
        text-align: left;
        line-height: 1.5;
    }

    .sec_osusume {
		margin-bottom: 38px;
		padding: 34px 15px;
		background-color: #f5f6f6;
        line-height: 1.5;
    }

	.sec_osusume h3.course_tit {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		margin: 0 auto 30px;
		padding: 0;
		text-align: left;
		font-size: 19px;
		font-family: var(--font-bold);
		align-items: flex-end;
		justify-content: center;
	}

	.sec_osusume .blue {
		color: #0068B5;
	}

	.sec_osusume .orange {
		color: #E9450A;
	}

	.sec_osusume h3 img {
		padding-right: 20px;
		width: 125px;
	}

	.sec_osusume h3.orange img {
		padding-right: 15px;
	}

	.sec_osusume.sec_ss h3 {
		font-family: var(--font-bold);
	}

	.sec_osusume h4 {
		margin-bottom: 35px;
		font-size: 10px;
        font-family: var(--font-light);
		text-align: center;
		line-height: 1.6;
	}

	.sec_osusume h4.subscribe {
		margin: 0 auto 38px;
		text-align: center;
		font-size: 15px;
	}

	.sec_osusume h4.subscribe:after {
		content: "";
		display: block;
		margin: 8px auto 0;
		width: 310px;
		height: 2px;
		background-color: #0068B5;
	}

	.sec_osusume h4.subscribe.orange:after {
		background-color: #E9450A;
	}

	.sec_osusume h4.subscribe span {
		padding-left: 10px;
		font-size: 21px;
	}

	.sec_osusume h4.subscribe span .lg {
		padding: 0;
		font-size: 34px;
		line-height: 1;
	}

	.sec_osusume .pic {
		margin-bottom: 25px;
	}

	.sec_osusume .caption {
		padding-left: 10px;
		text-indent: -10px;
		font-size: 10px;
        font-family: var(--font-light);
		line-height: 1.6;
	}

	.section_inner,
	.sec_course {
		padding: 0 15px;
	}

	.section_inner h3 {
		font-size: 21px;
	}

	.sec_course .section_column {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		margin-bottom: 20px;
		padding: 0;
		justify-content: space-between;
	}
	.sec_course .section_column div {
		margin-bottom: 0;
	}

	.sec_course .section_column .col_left {
		margin-right: 15px;
	}

	.col_center {
		margin: 0 auto;
		width: 47.83%;
	}

	.col_one {
		width: 47.83%;
	}

    .sec_course h5 {
        margin-bottom: 28px;
        font-size: 20px;
        font-family: var(--font-bold);
        text-align: center;
        line-height: 1.5;
    }

    .sec_course h5:before {
        content: "";
        display: inline-block;
        position: relative;
        top: 2px;
        margin-right: 13px;
        width: 3px;
        height: 20px;
    }

    .sec_course h5:after {
        content: "";
        display: inline-block;
        position: relative;
        top: 2px;
        margin-left: 13px;
        width: 3px;
        height: 20px;
    }

    .sec_course h5.red {
        color: #E50012;
    }

    .sec_course h5.red:before,
    .sec_course h5.red:after {
        background-color: #E50012;
    }

    .sec_course h5.orange {
        color: #dd600f;
    }

    .sec_course h5.orange:before,
    .sec_course h5.orange:after {
        background-color: #dd600f;
    }

    .sec_course h5.blue {
        color: #0068B5;
    }

    .sec_course h5.blue:before,
    .sec_course h5.blue:after {
        background-color: #0068B5;
    }

    .sec_course h5.green {
        color: #00903A;
    }

    .sec_course h5.green:before,
    .sec_course h5.green:after {
        background-color: #00903A;
    }


    /* accordion content */
    .accordion_content {
        position: relative;
        margin: 0 5px 20px;
    }

    .accordion_content.open {
        margin-bottom: 0;
        border: none;
    }

    .accordion_inner {
        height: 0;
        overflow: hidden;
    }

    .btn_accordion_detail:hover {
        color: #008cc9;
    }

    .btn_accordion_detail.on {
        width: 105px !important;
    }

    .btn_accordion_detail.on:before {
        content: '閉じる' !important;
    }

    .btn_accordion_detail.on:after {
        background-image: url(../common/image_common/parts_ico_btn_detail_arrow_on.png);
        right: 15px;
    }

    .accordion_content.open .btn_accordion_detail.on:not(.close) {
        display: none;
    }

    .accordion_content .hr {
        margin: 0;
    }

    .shaken_box {
        margin: 30px -15px 50px;
        padding: 25px 30px;
        background-color: #F6F7F7;
    }

    .shaken_box h3 {
		margin-bottom: 0;
        color: #0068B5;
        font-size: 18px;
        font-family: var(--font-bold);
        text-align: center;
        line-height: 1.5;
    }

    .shaken_box .col {
        margin-top: 30px;
        font-size: 13px;
        line-height: 1.5;
    }

    .shaken_box .col .tit {
        margin: 10px 0;
        font-size: 14px;
        text-align: left;
        color: #6C9AD1;
    }

    .shaken_box .detail {
        margin: 20px 0 0;
        font-size: 15px;
    }

    .section .detail a {
        color: #2EA7E0 !important;
        font-size: 14px;
        text-align: center;
    }

    .section .detail a:after {
        background: none;
    }

    .section .detail a:before {
		content: "";
		position: relative;
		top: 3px;
		display: inline-block;
		margin-right: 5px;
		width: 18px;
		height: 18px;
		background: url(../common/image_common/arrow_blue.png) no-repeat;
		background-size: 18px auto;
    }

    .entry_block {
        margin: 0 15px 15px;
        color: #4d4d4d;
    }

    .entry_block dl {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
		display: flex;
        margin-bottom: 15px;
        padding-bottom: 15px;
        text-align: left;
        line-height: 1.5;
        border-bottom: 1px solid #969696;
    }

    .entry_block dl:last-child {
        margin-bottom: 0;
		padding-bottom: 0;
        border: none;
    }

    .entry_block dl dt {
        padding: 5px 0;
		width: 100px;
        color: #0068B5;
        font-size: 16px;
        font-family: var(--font-bold);
        vertical-align: top;
    }

    .entry_block dl dd {
        width: 85%;
        font-size: 15px;
    }

    .entry_block dl dd .cap {
        color: #666666;
        font-size: 12px;
        font-family: var(--font-light);
    }

	#course {
		margin: 0 -15px;
    }

    #t_course {
		margin: 0 -15px;
	}

    .course_wrap {
        text-align: center;
        background-color: #595757;
    }

    .course_wrap a {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
		display: flex;
        padding: 18px 0;
        justify-content: center;
        align-items: center;
    }

    .course_wrap .ico {
        width: 60px;
    }

    .course_wrap .ico img {
        width: 60px;
    }

    .course_wrap .name {
        padding: 0 0 0 15px;
        color: #fff;
        font-size: 22px;
        font-family: var(--font-bold);
        vertical-align: middle;
    }

    .course_wrap .name .size {
        padding-left: 5px;
        font-size: 12px;
        font-family: var(--font-light);
        font-weight: normal;
    }

    .choice_inner .tab_nav {
        border-bottom: 3px solid #0068b5;
    }

    .choice_inner .tab_nav.nav-tabs-top {
        margin: 0 15px 50px;
    }

	.choice_inner .tab_nav.nav-tabs-bottom li.current:after {
		top: -13px;
		border-top: 0;
		border-bottom: 14px solid #0068b5;
	}

    .choice_inner .tab_nav ul {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }

    .choice_inner .tab_nav ul li {
        position: relative;
        top: 3px;
        padding: 15px 0;
        width: 50%;
        height: 60px;
        min-height: 60px;
        color: #fff;
		font-size: 14px;
        font-weight: 500;
        text-align: center;
        box-sizing: border-box;
        border: 3px solid #0068b5;
        border-bottom: none;
        background-color: #0068b5;
    }

    .choice_inner .tab_nav ul li:first-child {
        margin-right: 10px;
    }

    .choice_inner .tab_nav li.current {
        color: #0068b5;
        background-color: #fff;
    }

	.choice_inner .tab_nav li:before {
		content: "";
		position: relative;
		top: 6px;
		display: inline-block;
		width: 34px;
		height: 20px;
		background-size: 16px auto;
	}

	.choice_inner .tab_nav li.current:after {
		content: "";
		position: absolute;
		bottom: -13px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 0;
		height: 0;
		background-size: 20px auto;
		border-top: 14px solid #0068b5;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
	}

	.choice_inner .tab_nav li.tab_passenger:before {
		background: url(../image/icon_passenger_off.png) no-repeat;
        background-size: 30px;
	}

	.choice_inner .tab_nav li.tab_passenger.current:before {
		background: url(../image/icon_passenger_on.png) no-repeat;
        background-size: 30px;
	}

	.choice_inner .tab_nav li.tab_trucks:before {
		background: url(../image/icon_trucks_off.png) no-repeat;
        background-size: 30px;
	}

	.choice_inner .tab_nav li.tab_trucks.current:before {
		background: url(../image/icon_trucks_on.png) no-repeat;
        background-size: 30px;
	}

	.choice_inner .tab_nav.nav-tabs-bottom {
		margin: 50px 15px 0;
		border-top: 3px solid #0068b5;
		border-bottom: none;
	}

	.choice_inner .tab_nav.nav-tabs-bottom:before {
		content: "";
		display: block;
		clear: both;
	}

	.choice_inner .tab_nav.nav-tabs-bottom:after {
		display: none;
	}

	.choice_inner .tab_nav.nav-tabs-bottom li {
		top: -3px;
		border-top: none !important;
        border: 3px solid #0068b5;
	}

    .tab_content {
        display: none;
        -webkit-transition: all .4s ease;
        transition: all .4s ease;
    }

    .tab_content.current {
        display: block;
    }

    #faq {
        margin-bottom: 40px;
    }

    .faq_wrap {
        padding: 0 15px;
        color: #4d4d4d;
        font-size: 13px;
        line-height: 1.8;
    }

    .faq_wrap .qa {
        margin-bottom: 15px;
        background: url(../common/image_common/line.png) no-repeat bottom center;
        background-size: 100%;
    }

    .faq_wrap .qa.btm {
        margin: 0;
        background: none;
    }

    .faq_wrap .qa .ques {
        display: inline-flex;
        width: 100%;
        align-items: center;
    }

    .faq_wrap .qa .ico_q {
        margin-right: 18px;
    }

    .faq_wrap .qa .ico_q img {
        width: 49px;
        vertical-align: middle;
    }

    .faq_wrap .qa .txt p {
        padding: 14px 0;
    }

    .faq_wrap .qa .ans {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin-left: 68px;
        padding: 14px 0 10px;
        border-top: 1px solid #969696;
    }

    .faq_wrap .qa .ico_a {
        padding: 14px 0;
    }

    .faq_wrap .qa .ico_a img {
        position: relative;
        left: -15px;
        width: 43px;
    }

	.caution_w .caution {
		text-indent: -13px;
		padding-left: 13px;
	}

    #search {
        margin-bottom: 30px;
        text-align: center;
    }

    .search_img img {
        position: relative;
        top: 8px;
        max-width: 54%;
        vertical-align: bottom;
    }

    .search_btn img {
        position: relative;
        z-index: 1;
        max-width: 80%;
    }


    /* .pop_up */
    #popup_box {
        display: none;
    }

    .popup {
        padding: 30px 10px;
    }

    #cboxContent {
        margin: 10px;
        background: none;
    }

    #cboxLoadedContent {
        border: 2px solid #727171;
        border-radius: 10px;
        -webkit-box-shadow: none;
        box-shadow: none;
        overflow: auto !important;
    }

    #cboxClose {
        top: -4px;
        right: -14px;
        background-size: 25px;
    }

    #cboxClose:hover {
        opacity: 1;
    }


}

@media screen and (max-width : 480px) {
    .sec_course h5 {
        font-size: 14px;
    }

    .sec_course h5:before,
    .sec_course h5:after {
        height: 16px;
    }

    .entry_block dl dd {
        width: 68%;
    }
}