@charset "utf-8";
/*@media screen and (min-width : 769px){
/*------------------------------------------------------------------------------------------
*
*
    /system/
    Responsive / PC
*
*
------------------------------------------------------------------------------------------ */

#contents_area {
    position: relative;
}

#contents_area *, #contents_area ::before, #contents_area ::after {
    box-sizing: content-box;
}

#contents_area a {
    color: #08326F;
    transition: all .1s ease;
}

#contents_area a:hover {
    opacity: .7;
}

.car_center {
	position: fixed;
	top: 50%;
	left: 0;
	right: 0;
	width: 28px;
	text-align: center;
	margin: -30px auto 0;
	box-sizing: border-box;
}

.car_center img {
    width: 100%;
}

.car_center .light,
.car_center .senser {
	position: absolute;
	left: 50%;
    transform: translateX(-50%);
}

.car_center .light {
    width: 39px;
	top: 37px;
}

.car_center .senser {
    width: 43px;
	top: 63px;
}

/* @media screen and (max-width : 997px){
	.car_center {
		text-align: left;
		margin: -30px 0 0 475px;
	}
	.car_center .light,
	.car_center .senser {
		left: 14px;
	}
} */

/* -----------------------------------
    #title_area
----------------------------------- */

#title_area  {
    background-color: #fff;
    position: relative;
    z-index: 2;
}

#title_area .kv {
    position: relative;
}

#title_area .kv * {
    box-sizing: border-box;
}

#title_area .kv .ttl_box {
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#title_area .kv .ttl_box .contents_in {
    max-width: 1060px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

#title_area h1 {
    font-size:3.1rem;
    font-family:var(--font-bold);
}

#title_area .kv .img_box {
    max-width: 1280px;
    margin: 0 auto;
    padding: 45px 30px;
}

#title_area .kv .img_box .img {
    width: 59.3%;
    margin-left: auto;
}

#title_area .kv .img_box img {
    display: block;
    width: 100%;
}



/*---------------
Voice
---------------*/

#contents_area:before{
    content: "";
    width: 4px;
    height: 100%;
    background: #f5f5f5;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -2px;
    /* z-index: -1; :*/
    background:#fff;
}

.modal_fix {
    position: fixed !important;
}

#voice_cont{
	position: absolute;
	width: 100%;
	background-color: #F8F8F8;
	height: 3300px;
	z-index: -3;
}

.voice_area{
    margin: 0 auto;
    max-width: 980px;
    display: flex;
    padding-top: 50px;


}


/*-- 左右の大ボックス --*/
.voice_area_left{
    position: relative;
    /*margin: 0 auto;*/
    width: 412px;
    text-align: left;
    margin-top: 50px;
  
}

.voice_area_left2{
    position: relative;
    /*margin: 0 auto;*/
    width: 490px;
    text-align: left;
    margin-top: 50px;
  
}

.voice_area_left3{
    width: 390px;
    text-align: left;
    margin-left: 20px;
    margin-top: 34px;
    margin-right: 81px;
  
}

.voice_area_left4{
    position: relative;
    /*margin: 0 auto;*/
    width: 490px;
    text-align: left;
    margin-top: 0px;
  
}


.voice_area_right{
    position: relative;
    /*margin: 0 auto;*/
    width: 450px;
    text-align: left;
    margin-left: 82px;
}

.voice_area_right2{
    position: relative;
    /*margin: 0 auto;*/
    width: 402px;
    text-align: left;
    margin-left: 82px;
    margin-top: 34px;
}

.voice_area_right3{
    position: relative;
    /*margin: 0 auto;*/
    width: 480px;
    text-align: left;
    margin-left: 0px;
    margin-top: 34px;
}

.voice_area_right4{
    position: relative;
    /*margin: 0 auto;*/
    width: 410px;
        text-align: left;
        margin-left: 82px;
        margin-top: 0px;
}



/*-- 吹き出し --*/
.voice {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    padding: 34px 24px;
    /*min-width: 120px;
    max-width: 200px;*/
    width: auto;
    /*color: #08326F;*/
    font-size: 16px;
    background: #FFF;
    border: solid 2px #08326F;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: left;
    filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.2));
    z-index: 1;

}


/*-- ボイステキスト --*/
.voice p {
	font-size: 18px;
	color: #111;
    line-height: 1.7;
    padding: 5px 5px;

}

/*-- ボイステキスト：強調 --*/
.voice p span{
	font-size: 26px;
	color: #08326F;
	font-family:var(--font-bold);
  line-height: 1.4;
}


/*-- 右側吹き出しのインデント --*/
.right{
	right:0px;
    /*margin-right: auto;*/

}

/*-- 左側吹き出しのインデント --*/
.left{
	left:0px;
	/*margin-left: auto;*/
}


/*-- 右側吹き出しの三角飛び出し（＜） --*/
.right:before {
    content: "";
    position: absolute;
    left: -31px;
    top: 50%;
    margin-top: -23px;
    border: 20px solid transparent;
    border-right: 20px solid #FFF;
    z-index: 2;
}

.right:after {
    content: "";
    position: absolute;
    left: -28px;
    top: 50%;
    margin-top: -17px;
    border: 14px solid transparent;
    border-right: 14px solid #08326F;
    z-index: 1;
}


/*-- 左側吹き出しの三角飛び出し（＞） --*/
.left:before {
    content: "";
    position: absolute;
    right: -31px;
    top: 50%;
    margin-top: -23px;
    border: 20px solid transparent;
    border-left: 20px solid #fff;
    z-index: 2;
}

.left:after {
    content: "";
    position: absolute;
    right: -28px;
    top: 50%;
    margin-top: -17px;
    border: 14px solid transparent;
    border-left: 14px solid #08326F;
    z-index: 1;
}


/*--  吹き出しフェードイン --*/
.leftin___{
	z-index: 3; /*後付けclass動作用*/
	transition: all 3s ease;
	/*transform: translate(-50px, 0px);*/
	transform: perspective(400px) translate3d(-30px, -10px, 30px);
	
	/*-webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
       -o-transform: rotate(10deg);
          transform: rotate(10deg);*/

    /*transform: translate(Xpx, Ypx);
    */
}

.rightin{
	z-index: 3; /*後付けclass動作用*/
	transition: all 3s ease;
	transform: translate(50px, 0px);
}


/*-- 詳しく読むボタン --*/
.voice_detail{
	position: relative;
    width: 120px;
    background-color: #08326F;
    padding: 6px 0 6px 20px;
    margin-top: 10px;
    color: #fff;
}

.voice_detail a{
	color: #fff !important;
	font-size: 15px;
	text-decoration: none;
}

.voice .v_modal_open {
    text-decoration: none;
}

/*-- ボタン内矢印 --*/
.detail_arrow::before{
    left: 3px;
    width: 12px;
    height: 2px;
    background: #fff;
}
.detail_arrow::after{
    left: 3px;
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.arrow{
    position: relative;
    /*display: inline-block;
    padding: 0 0 0 16px;
    color: #fff;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;*/
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 14px;
    margin: auto;
    content: "";
    vertical-align: middle;
}


/*-- 吹き出し内ユーザ情報 --*/
.user ,.user2 ,.user3{
	display: flex;
	margin-top: 25px;
}

.user_car{

}

.user_info{
  margin-top: 15px;
  margin-left: 10px;
  text-align: left;
}

.user_info1{
  color: #111;
  margin-bottom: 0px;
  font-size: 14px;
}

.user_info2{
 color: #999;
 font-size: 12px;
font-family:var(--font-light);

}

/*-- モーダル --*/

.v_modal_detail .voice_title{
	font-size: 34px;
	color: #08326F;
	font-family:var(--font-bold);
	margin-bottom: 20px;
}


.v_modal_detail .user{
	margin: 0 auto;
    width: 330px;
    margin-bottom: 30px;	
}

.v_modal_detail .user2{
  margin: 0 auto;
    width: 400px;
    margin-bottom: 30px;  
}

.v_modal_detail .user3{
  margin: 0 auto;
    width: 450px;
    margin-bottom: 30px;  
}



/*.v_modal_detail .user2 {
    margin: 0 auto;
    width: 500px;
    margin-bottom: 20px;
    font-size: 20px;
    text-align: center;
}*/



.v_modal_detail .user_car{
	width: 90px;
	height: 90px;

	
}

.v_modal_detail .user_info{
	
}

.v_modal_detail .user_info1{
	font-size: 20px;
	
}

.v_modal_detail .user_info2{
	font-size: 16px;
	
}


.v_modal_detail .voice_title_sub{
	font-size: 25px;
	color: #111;
	font-family:var(--font-bold);
	margin-bottom: 30px;
}

.v_modal_detail .voice_txt{
	font-size: 22px;
	color: #111;
	line-height: 2.0;
	text-align: left;
}


.voice_modal_close{
	cursor: pointer;
  padding-top: 40px;

}


.content{
    margin: 0 auto;
    padding: 40px;
    z-index: 10;
}

.box{
    background: #fff;
    padding: 70px 80px;
    -ms-overflow-style: none;
}

.modal{
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 100px;
    background-color: rgba(248,248,248,0.9);
    overflow: auto;
    cursor: pointer;
}

.v_modal_bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.v_modal_detail{
    position: relative;
    z-index: 2;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 820px; 
    width: 100%; 
    color: #000;
    text-align: center;  
    -ms-overflow-style: none;
    overflow: auto;
    cursor: default;  
}

.voice_area{
    padding-top: 0px;

}

.voice_area_block1{
    padding-top:  75px;
}

.voice_area_block2{
    padding-top:  0px;
}

.voice_area_block3{
    padding-top:  0px;
}

.voice_area_s{
    display: flex;
    margin: 0 auto;
    width: 980px;
    padding-top: 0px;
}

.voice_area_s2{
    display: flex;
    margin: 0 auto;
    width: 450px;
    padding-top: 0px;
}


.voice_s p{
    padding-left: 59px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.voice_s .f1{      
    font-size: 20px;
}

.voice_s .f2{  
    font-size: 26px;
}

.voice_s .f3{  
    font-size: 28px;
}

.voice_s .f4{  
    font-size: 32px;
}

.voice_s .f5{  
    font-size: 36px;
    font-family:var(--font-bold);
}

.voice_s .f6{  
    font-size: 48px;
    font-family:var(--font-bold);
}

.voice_s .f7{  
    font-size: 52px;
    font-family:var(--font-bold);
}


.voice_s {
  /*親要素*/
  position: relative;
  height: 60px;
  color: #08326F;
  line-height: 1.2;

  /*background: url(../image/voice_balloon_s.png) no-repeat;
  background-position: 0% 62%;
  background-size: 50px 35px;*/
  opacity: 0; 

}

.voice {
 opacity: 0; 

}

.voice_s p {
  position: absolute;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);

  background: url(../image/voice_balloon_s.png) no-repeat;
  background-position: 0% 62%;
  background-size: 50px 35px;
}

.v1_1a{ margin: 0px 0 0 -1px; width:500px; }
.v1_1b{ margin: 15px 0 0 101px; width:480px; }

.v1_2a{ margin: 22px 0 0 50px; width:480px; }
.v1_2b{ margin: 36px 0 0 206px; width:400px; }

.v1_3a{ margin: 33px 0 0 23px; width:450px; }
.v1_3b{ margin: 15px 0 0 140px; width:470px; }

.v2_1a{ margin: 16px 0 0 47px; width:400px; }
.v2_2a{ margin: 13px 0 0 243px; width:400px; }
.v2_3a{ margin: 16px 0 0 153px; width:400px; }
.v2_4a{ margin: 40px 0 0 104px; width:400px; }
.v2_5a{ margin: 37px 0 0 197px; width:400px; }
.v2_6a{ margin: 36px 0 0 77px; width:400px; }

.v3_1a{ margin: 23px 0 0 90px; width:400px; }
.v3_1b{ margin: 39px 0 0 172px; width:390px; }

.v4_1a{ margin: 0px 0 0 30px; width:450px; }
.v4_2a{ margin: 56px 0 0 118px; width: 330px; }
.v4_3a{ margin: 20px 0 0 14px; width:400px; }
.v4_4a{ margin: 40px 0 0 125px; width:300px; }
.v4_5a{ margin: 41px 0 0 0px; width:470px; }

.v5_1a{ margin: 35px 0 0 107px; width:350px; }
.v5_1b{ margin: 18px 0 0 161px; width:400px; }

.v6_1a{ margin: -7px 0 0 48px; width:442px; }
.v6_2a{ margin: 39px 0 0 212px; width:300px; }
.v6_3a{ margin: 24px 0 0 71px; width:400px; }
.v6_4a{ margin: 32px 0 0 150px; width:330px; }
.v6_5a{ margin: 24px 0 0 48px; width:400px; }
.v6_6a{ margin: 37px 0 0 77px; width:400px; }

.v7_1a{ margin: 20px 0 0 71px; width:400px; }
.v7_1b{ margin: 17px 0 0 25px; width:460px; }

.v8_1a{ margin: 12px 0 0 125px; width:340px; }
.v8_2a{ margin: 8px 0 0 8px; width:400px; }
.v8_3a{ margin: 13px 0 0 31px; width:434px; }
.v8_4a{ margin: 31px 0 0 0px; width:460px; }
.v8_5a{ margin: 16px 0 0 98px; width:360px; }
.v8_6a{ margin: 39px 0 0 12px; width:430px; }




.leftin{
    animation: mooa_l .5s forwards, moob_l .5s .6s forwards;

}

.rightin{
    animation: mooa_r .5s forwards, moob_r .5s .6s forwards;

}

.voice_note{
    font-size: 12px;
font-family:var(--font-light);
    width: 980px;
    margin: 0 auto;
    margin-top: 30px;
    padding-bottom: 110px;
    z-index: 1;
    position: relative;
}

.voice_note span {
    font-family:var(--font-bold);
}

@keyframes mooa_r {

    0%{
        transform: scale(0.1, 0.1);
        opacity: 1; 
        transform-origin:10% 50%;
    }
    
    100% {
        transform: scale(1.05, 1.05);
        opacity: 1; 
        transform-origin:10% 50%;
    }
}

@keyframes moob_r {

    0%{ 
        transform: scale(1.05, 1.05);
        opacity: 1;
        transform-origin:10% 50%;

    }

    60%{ 
        transform: scale(0.99, 0.99);
        opacity: 1;
        transform-origin:10% 50%;

    }

    100% {
        transform: scale(1.0, 1.0);
        opacity: 1; 
        transform-origin:10% 50%;
    }
}


@keyframes mooa_l {

    0%{
        transform: scale(0.1, 0.1);
        opacity: 1; 
        transform-origin:90% 50%;
    }
    
    100% {
        transform: scale(1.05, 1.05);
        opacity: 1; 
        transform-origin:90% 50%;
    }
}

@keyframes moob_l {

    0%{ 
        transform: scale(1.05, 1.05);
        opacity: 1;
        transform-origin:90% 50%;

    }

    60%{ 
        transform: scale(0.99, 0.99);
        opacity: 1;
        transform-origin:90% 50%;

    }

    100% {
        transform: scale(1.0, 1.0);
        opacity: 1; 
        transform-origin:90% 50%;
    }
}


/* -----------------------------------
    #car_model
----------------------------------- */
#car_model {
position: relative;
z-index: 1;
padding-top: 60px;
}

#car_model .contents_in {
margin: 0 auto;
}

#car_model .h2_feature_ptn01 {
text-align: center;
margin-bottom: 30px;
}

#car_model .h2_feature_ptn01 h2 {
color: #08326F;
font-family:var(--font-bold);
font-size: 30px;
line-height: 1.4;
margin-bottom: 11px;
}

#car_model .h2_feature_ptn01 h2::after {
content: "";
display: block;
width: 20px;
height: 2px;
background: #BB271A;
margin: 7px auto 0;
}

#car_model .attention_text {
max-width: 1020px;
width: 100%;
margin: 20px auto 0;
padding: 0 20px;
font-size: 12px;
font-family:var(--font-light);
line-height: 24px;
}

/* -----------------------------------
    #scene_search
----------------------------------- */
#scene_search {
position: relative;
z-index: 1;
background-color: #fff;
}

#scene_search .h2_feature_ptn01 {
margin-bottom: 15px;
text-align: center;
}

#scene_search .h2_feature_ptn01 h2 {
color: #08326F;
font-family:var(--font-bold);
font-size: 30px;
line-height: 1.4;
margin-bottom: 11px;
}

#scene_search .h2_feature_ptn01 h2::after {
content: "";
display: block;
width: 20px;
height: 2px;
background: #BB271A;
margin: 16px auto 0;
}

#scene_search .arrow_link {
position: relative;
}

#scene_search .arrow_link::after {
content: "";
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
width: 22px;
height: 22px;
border-radius: 50%;
background: #CC0000 url(/hondasensing/common/image_common/parts_ico_btm_nav_arrow.png) no-repeat 55% center / 6.5px 10px;
transition: .1s ease;
}


/* -----------------------------------
    #car_function
----------------------------------- */
#car_function {
position: relative;
z-index: 1;
background-color: #fff;
}

#car_function .contents_in {
max-width: 1020px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}

#car_function .h2_feature_ptn02 {
margin-bottom: 20px;
}

#car_function .h2_feature_ptn02 h2 {
color: #08326F;
font-family:var(--font-bold);
font-size: 20px;
line-height: 1;
}

#car_function .arrow_link {
position: relative;
}

#car_function .arrow_link::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 6.5px;
height: 10px;
background: #fff url(/hondasensing/common/image_common/slide_next.png) no-repeat 55% center / 6.5px 10px;
transition: .1s ease;
}

/*}*/