@charset "utf-8";
@media screen and (max-width: 768px) {
	/*------------------------------------------------------------------------------------------
*
*
    /360/
    Responsive / SP
*
*
------------------------------------------------------------------------------------------ */

	.cnt_area .h2_title {
        font-size: 24px;
        line-height: 36px;
        margin-top: 41px;
        white-space: nowrap;
	}

	.cnt_area .h2_title::before {
		width: 48px;
		height: 48px;
		margin-bottom: 3.5px;
		background-image: url(../image/icon01_h2_sp.png);
	}

	.cnt_area .cnt_block .h3_title {
		font-size: 26px;
		margin-bottom: 15px;
	}

	.cnt_area .h3_feature_title {
		font-size: 20px;
		margin-bottom: 19px;
	}

	.cnt_area .h3_feature_title::after {
		margin-top: 14px;
	}

	.cnt_area .tech_box {
		max-width: 335px;
		width: 100%;
		margin: 0 auto 10px;
	}

	.cnt_area .tech_box a {
		padding: 20px 15px;
	}

	.cnt_area .tech_box .cnt_img {
		max-width: 60px;
		margin-right: 15px;
	}

	.cnt_area .tech_box .cnt_text {
		max-width: 195px;
		padding-top: 3px;
		font-size: 0;
	}

	.cnt_area .tech_box .cnt_text .title {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.cnt_area .tech_box .cnt_text .link_btn,
	.cnt_area .tech_box .cnt_text .link_target_btn {
		font-size: 14px;
		padding-right: 23px;
	}

	.cnt_area .tech_box .cnt_text .link_target_btn {
		padding-right: 17px;
	}

	/* -----------------------------------
    #title_area
----------------------------------- */
	#title_area {
		display: flex;
		flex-direction: column-reverse;
	}
	#title_area .mv_bg img.sp {
		display: block;
	}

	#title_area .mv_bg img.pc {
		display: none;
	}

	#title_area .contents_in {
		top: 0;
		left: 0;
		padding: 40px 20px;
		position: static;
		background-color: #0b2921;
	}

	#title_area .h1_g {
		margin: auto;
	}

	#title_area .text02 {
		font-size: 16px;
		line-height: 1.69;
	}

	/* -----------------------------------
    #cnt_area01
----------------------------------- */

	#cnt_area01 {
		padding: 43px 0 50px;
	}
	#cnt_area01 .first_lead {
		font-size: 24px;
		line-height: 36px;
		margin-bottom: 0px;
	}

	#cnt_area01 .first_text {
		padding: 0;
		margin-bottom: 43px;
	}

	#cnt_area01 .first_text::before {
		width: 220px;
		height: 220px;
		background-image: url(../image/icon01_firsttext_sp.png);
	}

	#cnt_area01 .first_text span {
		font-size: 14px;
	}

	/* -----------------------------------
    #new_function_area
----------------------------------- */
	#new_function_area .cnt_block,
	#new_function_area .cnt_block:last-child {
		padding-bottom: 50px;
	}

	#new_function_area .cnt_block:not(:first-child) {
		padding-top: calc(100vw * 50 / 375);
	}

	#new_function_area .cnt_block:not(:first-child)::before,
	#advanced_function_area::before {
		height: calc(100vw * 50 / 375);
		border-top-width: calc(100vw * 50 / 375);
		filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
	}

	#new_function_area .cnt_block .h3_g {
		padding-top: 50px;
	}

	#new_function_area .cnt_block .h3_subtitle {
		margin-bottom: 5px;
	}

	#new_function_area .cnt_block .h3_subtitle span {
		padding: 10px 20px;
		font-size: 17px;
		position: relative;
		z-index: 1;
	}

	#new_function_area .cnt_block .description01 {
		font-size: 16px;
		line-height: 1.69;
		margin-bottom: 15px;
	}

	#new_function_area .cnt_block .video_box {
		margin-bottom: 14px;
	}

	#new_function_area .cnt_block .thumbanil_box .icon {
		width: 40px;
		height: 40px;
	}

	#new_function_area .cnt_block .thumbanil_box .icon::before {
		width: 12px;
		height: 18px;
		left: 15px;
		border-left-width: 12px;
		border-top-width: 9px;
		border-bottom-width: 9px;
	}

	#new_function_area .cnt_block .text01 {
		font-size: 14px;
		line-height: 1.86;
	}

	#new_function_area .cnt_block .feature_g {
		padding-top: 44px;
	}

	#new_function_area .cnt_block .feature_g .cnt_g {
		display: block;
		margin-bottom: 30px;
	}

	#new_function_area .cnt_block .feature_g .h4_feature_title {
		font-size: 16px;
		line-height: 26px;
		margin-bottom: 20px;
	}

	#new_function_area .cnt_block .feature_g .h4_feature_title::before {
		margin-bottom: 6px;
	}

	#new_function_area .cnt_block .feature_g .h4_feature_title::after {
		margin-top: 10px;
	}

	#new_function_area .cnt_block .feature_g .btn_modal {
		border-radius: 50px;
	}

	#new_function_area .cnt_block .feature_g .btn_modal a {
		font-size: 14px;
		line-height: 20px;
		padding: 13px 0 12px;
	}

	#new_function_area .cnt_block .feature_g .btn_modal a br {
		display: block;
	}

	#new_function_area .cnt_block .feature_g .btn_modal a .plus {
		width: 20px;
		height: 20px;
		right: 30px;
	}

	#new_function_area .cnt_block .feature_g .btn_modal a .plus::before,
	#new_function_area .cnt_block .feature_g .btn_modal a .plus::after {
		width: 8px;
	}

	#new_function_area #fctw_block .h3_g {
		padding-top: 33px;
	}

	#new_function_area #modal_notice .caution_text {
		font-size: 10px;
		max-width: none;
		width: calc(100% - 50px);
	}

	#new_function_area #modal_notice ul + .caution_text {
		margin-top: 0;
	}

	/* -----------------------------------
    #advanced_function_area
----------------------------------- */
	#advanced_function_area {
		padding-top: calc(100vw * 50 / 375);
	}

	#advanced_function_area .h2_title {
		margin-bottom: 33px;
	}

	#advanced_function_area .cnt_block {
		margin-bottom: 100px;
	}

	#advanced_function_area .cnt_block .h3_title {
		font-size: 22px;
		line-height: 27px;
		padding: 6.5px 0;
		margin-bottom: 20px;
	}

	#advanced_function_area .cnt_block .h3_title .small_text {
		font-size: 17px;
	}

	#advanced_function_area .cnt_box {
		display: block;
		margin-bottom: 24px;
	}

	#advanced_function_area .cnt_box .cnt_img,
	#advanced_function_area .cnt_box .cnt_text {
		width: 100%;
		margin: 0 auto;
	}

	#advanced_function_area .cnt_box .cnt_img {
		margin-bottom: 20px;
	}

	#advanced_function_area .cnt_box .cnt_text h4 {
		font-size: 20px;
		margin-bottom: 14px;
	}

	#advanced_function_area .cnt_box .cnt_text p {
		font-size: 14px;
		line-height: 1.86;
	}

	#advanced_function_area .tech_box a {
		padding: 20px 15px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	}

	#advanced_function_area .tech_box .cnt_img {
		max-width: 60px;
		margin-right: 15px;
	}

	#advanced_function_area .tech_box .cnt_text .title {
		font-size: 15px;
		margin-bottom: 10px;
	}

	/* -----------------------------------
    #other_function_area
----------------------------------- */
	#other_function_area {
		padding-bottom: 83px;
	}

	#other_function_area .text01 {
		margin-top: 8px;
	}

	#other_function_area .func_link {
		max-width: 335px;
		margin: 0 auto;
		justify-content: space-between;
	}

	#other_function_area .func_link li,
	#other_function_area .func_link li:nth-child(3n) {
		max-width: 145px;
		width: 50%;
		margin: 0 0 17px;
		height: auto;
	}

	#other_function_area .func_link li a {
		font-size: 12px;
font-family:var(--font-light);
		line-height: 17px;
		box-sizing: border-box;
		padding-right: 25px;
	}

	#other_function_area .func_link li a::before {
		right: 5px;
	}

	#other_function_area .func_link li a::after {
		width: 15px;
		height: 15px;
	}

	/* -----------------------------------
    #car_model
----------------------------------- */
	#car_model {
		padding-bottom: 100px;
	}

	#car_model .cnt_g {
		padding: 24px 20px 29px;
	}

	#car_model .h3_feature_title {
		line-height: 30px;
		margin-bottom: 10px;
	}

	#car_model .h3_feature_title::after {
		margin-top: 8px;
	}

	#car_model .car_g {
		display: block;
	}

	#car_model .car_g li {
		max-width: 127px;
		margin: 0 auto;
	}

	#car_model .car_g {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  #car_model .car_g li {
    width: 48%;
    max-width: none;
    margin: 0;
    text-align: center;
  }
	
	/* -----------------------------------
    #list_notice
----------------------------------- */
	#list_notice {
		padding-bottom: 56px;
	}
	#list_notice .list_notice01 li {
		font-size: 12px;
font-family:var(--font-light);
		line-height: 20px;
		margin-bottom: 4px;
	}
}
