@charset "UTF-8";

/* custom.css */

form textarea {
	resize: vertical;
}


@media screen and (min-width: 801px){

.aside_information .information_nav .information_nav_tel .information_nav_tel_detail {
    padding: 12px 12px;
}
.aside_information .information_nav .information_nav_tel dl dt {
    padding-right: 10px;
}

.aside_information.sp_contact {
    display: none !important;
}

/* service */

/* vehicle */
.id_service_detail .pageheader.pageheader_service_vehicle {
    background: url(/service/vehicle/images/pageheader.jpg) no-repeat 50% 50%;
    background-size: cover;
    color: #fff;
}

/* vehicle */
.id_service_detail .pageheader.pageheader_service_speecan {
    background: url(/service/speecan/images/pageheader.jpg) no-repeat 50% 50%;
    background-size: cover;
    color: #fff;
}

/* sdk_navi */
.id_service_detail .pageheader.pageheader_service_sdk_navi {
    background: url("/service/sdk_navi/images/pageheader.jpg") no-repeat 50% 50%;
    background-size: cover;
    color: #fff;
}

/* desktop */
.id_service_detail .pageheader.pageheader_service_desktop {
    background: url("/service/desktop/images/pageheader.jpg") no-repeat 50% 50%;
    background-size: cover;
    color: #000;
}

/* whitepaper */
.id_whitepaper .pageheader.pageheader_whitepaper {
  background: url("/whitepaper/images/whitepaper.jpg") no-repeat 50% 50%;
  background-size: cover;
  color: #000;
}

/* api */
.id_service_detail .contents_read .contents_read_detail p.plan {
    padding: 30px 0 0;
}

/* apiリンク */
.contents_read p a {
    color:blue;
}

/* service　地図のサムネイル */
.service_feature_thumb_api li {
    width: 200px;
}
.service_feature_function_nav .service_feature_plan_btn {
    position: relative;
    width: 40%; }
    .service_feature_function_nav .service_feature_plan_btn a {
      position: relative;
      display: inline-block;
      min-width: 320px;
      margin: 0 auto;
      padding: 1em 40px 1em 20px;
      background-color: #555;
      border-radius: 3em;
      box-shadow: 0px 2px 0px 0px #dcdbdb;
      font-size: 113%;
      text-align: center;
      line-height: 1.2;
      color: #fff;
      background-color: #d90049;
      width: 100%;
      min-width: 100%; }
      .service_feature_function_nav .service_feature_plan_btn a:hover {
        cursor: pointer;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
        -moz-opacity: 0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
        text-decoration: none;
        transition: all 0.2s; }
        .service_feature_function_nav .service_feature_plan_btn a:hover img {
          filter: alpha(opacity=100);
          -ms-filter: "alpha(opacity=100)";
          -moz-opacity: 1;
          -khtml-opacity: 1;
          opacity: 1; }
      .service_feature_function_nav .service_feature_plan_btn a:before {
        /*　PDFマークをつける時は外す　content: "";*/
        display: block;
        position: absolute;
        top: 42%;
        left: 48px;
        width: 30px;
        height: 30px;
        margin-top: -11px;
        background: url("/assets/images/pdf.png") no-repeat 50% 50%;
        -webkit-background-size: 30px 30px;
        background-size: 30px 30px; }
      .service_feature_function_nav .service_feature_plan_btn a:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 15px;
        width: 22px;
        height: 22px;
        margin-top: -11px;
        background: url("/assets/images/icn_btn_circle_wh01.png") no-repeat 50% 50%;
        -webkit-background-size: 22px 22px;
        background-size: 22px 22px; }
      .service_feature_function_nav .service_feature_plan_btn a:after {
        background: url("/assets/images/icn_circle_wh01.png") no-repeat 50% 50%;
        -webkit-background-size: 22px 22px;
        background-size: 22px 22px; }
.service_feature_function_nav .service_feature_plan_btn a span{
  margin-left: 35px;
}
    .service_feature_function_nav .service_feature_plan_btn p {
      padding: 10px 0 0;
      color: #d90049;
      text-align: center;
}
.function_wrap{
  position: relative;
  margin-bottom: 90px;
}
.service_feature_function_nav{
  position: absolute;
  top: 0;
  left: 60%;
  width: 100%;
}


.service_feature_function_nav .service_feature_btn--right {
    position: relative;
    width: 40%; }
.service_feature_function_nav .service_feature_btn--right {
  padding: 0;
  text-align: center; 
  position: relative;
  left: 1%;}
  .service_feature_function_nav .service_feature_btn--right a {
    position: relative;
    display: inline-block;
    min-width: 320px;
    margin: 0 auto;
    padding: 1em 40px 1em 20px;
    background-color: #555;
    border-radius: 3em;
    box-shadow: 0px 2px 0px 0px #dcdbdb;
    font-size: 113%;
    text-align: center;
    line-height: 1.2;
    color: #fff; }
    .service_feature_function_nav .service_feature_btn--right a:hover {
      cursor: pointer;
      filter: alpha(opacity=70);
      -ms-filter: "alpha(opacity=70)";
      -moz-opacity: 0.7;
      -khtml-opacity: 0.7;
      opacity: 0.7;
      text-decoration: none;
      transition: all 0.2s; }
      .service_feature_function_nav .service_feature_btn--right a:hover img {
        filter: alpha(opacity=100);
        -ms-filter: "alpha(opacity=100)";
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1; }
    .service_feature_function_nav .service_feature_btn--right a:after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      right: 15px;
      width: 22px;
      height: 22px;
      margin-top: -11px;
      background: url("/assets/images/icn_btn_circle_wh01.png") no-repeat 50% 50%;
      -webkit-background-size: 22px 22px;
      background-size: 22px 22px; }

}


/* movie */
.id_movie .pageheader.pageheader_movie {
    background: url(/movie/images/pageheader.jpg) no-repeat 50% 50%;
    background-size: cover;
    color: #fff;
}
.movie_detail {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 60px;
}
.id_movie .contents_read h2 {
    font-size: 113%;
}
.movie_detail .movie_box {
    width: 32%;
    width: calc(25% - 20px);
    margin: 30px 10px 0;
    padding: 0 0 20px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}
.movie_detail .movie_box  figure {
    background-color: transparent;
    position: relative;
    overflow: hidden;
}
.movie_detail .movie_box figure::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 68px;
    height: 68px;
    z-index: 7;
    background: url(../../assets/images/video-icon-play.png) no-repeat center;
    background-size: 68px;
}
.movie_detail .movie_box img {
    border-radius: 8px 8px 0 0;
    border: 0px;
    width: 100%;
    height: auto;
    cursor: pointer;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.movie_detail .movie_box:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 1.0 !important;
}
.movie_box h3 {
    padding: 10px 10px 0;
    font-weight: bold;
}
.movie_article .detail_service_container ul{
  -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.movie_article .detail_service_container ul:after {
    width: auto;
}
/* お問い合わせボタン */
.header_nav_contact .header_nav_contact_form {
  width: 50%;
}
.header_nav_contact .header_nav_contact_form a {
    font-size: 110%;
}
/* お役立ち資料 */
.header_nav_contact ul {
  display: flex;
  width: 400px;
}
.header_nav_contact .header_nav_contact_tel {
  display: table;
    width: 50%;
    height: 60px;
  background-color: #1E4EA2;
}
.header_nav_contact .header_nav_contact_tel a {
  display: table-cell;
    height: 60px;
    text-align: center;
    vertical-align: middle;
  font-size: 110%;
  color: #fff;
}
.header_nav_contact .header_nav_contact_tel a span {
  position: relative;
  padding-left: 38px;
}
.header_nav_contact .header_nav_contact_tel a span:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0px;
  width: 28px;
  height: 20px;
  margin-top: -10px;
  background: url(/assets/images/icn_resource_wh01.png) no-repeat 50% 50%;
  background-size: 28px 20px;
}
@media screen and (max-width: 1500px) {
  .header_nav_contact {
    width: 120px;
  }
  .header_nav_contact ul {
    width: 120px;
  }
  .header_nav_contact_form span {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background: url("/assets/images/icn_contact_wh01.png") no-repeat 50% 50%;
    background-size: 28px 20px;
    text-align: left;
    text-indent: -9999px;
  }
  .header_nav_contact_form span:before {
    display: none !important;
  }
  .header_nav_contact_tel span {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background: url("/assets/images/icn_resource_wh01.png") no-repeat 50% 50%;
    background-size: 28px 20px;
    text-align: left;
    text-indent: -9999px;
  }
  .header_nav_contact_tel span:before {
    display: none !important;
  }
}


/*　アンカーリンク */
.id_service_detail .service_nav-content nav a {
    margin-bottom: 10px;
}


.id_service_detail .service_nav-content nav a.essential,.id_service_detail .service_nav-content nav a.advanced {
  background:none; 
  border:none; 
  text-decoration: underline;
}

.id_service_detail .service_nav-content nav a.essential:after,.id_service_detail .service_nav-content nav a.advanced:after {
    right: 20%;
  } 

#MapFanDirectory {
    padding-top: 20px;
}

/* 資料ダウンロード */
.contents_read .contents_read_detail .link {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding-top: 30px;
}
.contents_read .contents_read_detail .link .link_button {
  width: 300px;
  background-color: #fff;
  border: 1px solid #dee2e9;
  color: #1E4EA2;
  box-shadow: 0 2px 14px rgba(0,0,0,.15);
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.contents_read .contents_read_detail .link .link_button p {
  position: relative;
}
.contents_read .contents_read_detail .link .link_button p::after {
  content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: url(/assets/images/icn_btn_circle_wh02.png) no-repeat 50% 50%;
}
.contents_read .contents_read_detail .link .link_button2 {
  width: 300px;
  background-color: #fff;
  border: 1px solid #dee2e9;
  color: #1E4EA2;
  box-shadow: 0 2px 14px rgba(0,0,0,.15);
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.contents_read .contents_read_detail .link .link_button2 p {
  position: relative;
}
.contents_read .contents_read_detail .link .link_button2 p::after {
  content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: url(/assets/images/icn_btn_circle_wh03.png) no-repeat 50% 50%;
}

.resources_index_box .resources_index_box_detail {
  text-align: center;
  padding: 20px 20px;
}
.resources_index_box .resources_index_box_detail h3 {
  padding-right: 0px;
  padding-bottom: 20px;
}
.resources_index_box .resources_index_box_detail h3:after {
  display: none;
}
.resources_index_box .resources_index_box_detail .resources_index_box_detail_button {
  background-color: #1E4EA2;
  padding: 10px 20px;
  border-radius: 100px;
  color: white;
}
.resources_index_box .resources_index_box_detail .resources_index_box_detail_button p {
  position: relative;
}
.resources_index_box .resources_index_box_detail .resources_index_box_detail_button p::after {
  content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: url(/assets/images/icn_btn_circle_wh03.png) no-repeat 50% 50%;
}

/* 資料ダウンロード詳細 */
.container_resources-detail {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 80px;
}
.container_resources-detail .container_resources-detail_inner {
  display: flex;
  justify-content: space-between;
}
.container_resources-detail .container_resources-detail_inner .container_resources-detail_inner_left{
 width: 50%;
 padding: 0 30px;
}
.container_resources-detail .container_resources-detail_inner .container_resources-detail_inner_left h2{
  font-size: 200%;
    font-weight: bold;
    padding-bottom: 30px;
    text-align: center;
 }
 .container_resources-detail .container_resources-detail_inner .container_resources-detail_inner_left img{
  width: 100%;
 }
 .container_resources-detail .container_resources-detail_inner .container_resources-detail_inner_left p{
  text-align: left;
  padding-top: 30px;
 }
.container_resources-detail .container_resources-detail_inner .container_resources-detail_inner_right{
  width: 40%;
  padding: 20px;
 }
 .container_resources-detail .container_resources-detail_inner .container_resources-detail_inner_right p{
  padding-bottom: 30px;
 }
 .container_resources-detail .container_resources-detail_inner .container_resources-detail_inner_right .container_resources-detail_inner_right_form{
  display: flex;
    flex-direction: column;
    padding-bottom: 20px;
 }
 .container_resources-detail .container_resources-detail_inner .container_resources-detail_inner_right .container_resources-detail_inner_right_form input{
  width: 100%;
  padding: 10px;
    border: 1px solid #ddd;
 }
 .container_resources-detail .container_resources-detail_inner .container_resources-detail_inner_right .container_resources-detail_inner_right_form span {
  margin-left: 5px;
    background-color: #ffd400;
    padding: 1px 8px;
    border-radius: 2em;
    font-size: 50%;
    text-align: center;
    line-height: 1;
 }
 .container_resources-detail .container_resources-detail_inner .container_resources-detail_inner_right .container_resources-detail_inner_right_form .container_resources-detail_inner_right_form_check{
  display: flex;
    flex-direction: column;
    padding-bottom: 20px;
 }
 /* .container_resources-detail_inner_right_form_link {
  padding-top: 10px;
 }
 .container_resources-detail_inner_right_form_link a {
  border-bottom: 1px solid #1E4EA2;
 } */
 .container_resources-detail .container_resources-detail_inner .container_resources-detail_inner_right button {
  background-color: #1E4EA2;
  padding: 20px 20px;
  border: none;
  color: white;
  border-radius: 100px;
  width: 100%;
  transition: 0.5s;
 }
 .container_resources-detail .container_resources-detail_inner .container_resources-detail_inner_right button:hover {
  opacity: 0.7;
 }