@charset "utf-8";
/*要素のリセット*/
figcaption, figure {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
p {
  line-height: 1.8;
}
/** 共通 **/
.header3_margin {
  margin-top: 2.5em !important;
  display: block;
}
.annotation {
  width: 100%;
  font-size: 0.8rem !important;
  &::before {
    content: "※";
    padding-right: 0.3em;
  }
}
.basic_format h1 {
font-family: "heisei-kaku-gothic-std", sans-serif;
font-size: 1.5rem;
background: #EE7800;
padding: 10px 0 10px 14px;
text-align: left;
color: #ffffff;
border-radius: 3px;
}

.basic_format h2{
font-family: "heisei-kaku-gothic-std", sans-serif;
font-size: 1.3rem;
padding: 10px;
margin: 30px 0 20px 0;
font-weight: bold;
background: #eeeeee;
border-radius: 3px;
}

.basic_format h4 , figcaption{
font-family: "heisei-kaku-gothic-std", sans-serif;
font-size: 1.1rem;
padding: 10px 0;
margin: 0;
font-weight: bold;
color: #000000;
}

#d_load h1 {
  margin-bottom: 1.5em;
}
/*** CAR1013 heroheader*/
.hero_h_car101 {
  width: 100%;
  height: 450px;
  margin: 0 auto;
  padding: 0;
  background-repeat: none;
  background-position: center 54%;
  background-size: cover;
  & section {
    width: 100%;
    max-width: 930px;
    height: 100%;
    margin: 0 auto;
    position: relative;
  }
}
.hero_h_car101 section{
  overflow: hidden;
}
.hero_h_car101 section div {
  line-height: 1.6em;
  position: absolute;
  top: 220px;
  left: 0;
  width: 42%;
  padding: 10px 0 10px 20px;
  background: rgba(250, 250, 250, 0.75);
  /* box-shadow */
  box-shadow: 0px 4px 10px 0px #666666;
  -moz-box-shadow: 0px 4px 10px 0px #666666;
  -webkit-box-shadow: 0px 4px 10px 0px #666666;
}
.hero_h_car101 h1 {
  font-size: 1.4rem;
  padding: 0;
  margin: 0 0 0.5em 0;
  font-family: "heisei-kaku-gothic-std", sans-serif;
}
.hero_h_car101 h2 {
  font-size: 1.7rem;
  padding: 0;
  margin: 0 0 0.5em 0;
  font-family: "heisei-kaku-gothic-std", sans-serif;
}
.hero_h_car101 h3 {
  font-size: 2.5rem;
  padding: 0;
  margin: 0;
  color: #ffffff;
  text-shadow: 3px 3px 6px #333333;
  font-family: "heisei-kaku-gothic-std", sans-serif;
  position: absolute;
  top: 60px;
  line-height: 140%;
}
.hero_h_car101 section div ul {
  font-size: 0.9rem;
  line-height: 1em;
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero_h_car101 section div ul li {
  margin: 0.5em 0;
}
.hero_h_car101 section div ul li span {
  display: inline-block;
  width: 50px;
}
img.model_photo {
  width: 30%;
  height: auto;
  position: absolute;
  bottom: 80;
  right: 5%;
  top:-35%;
}
/*** スクローラーのオフセット ***/
#tokucyo, #option, #spec, #galy, #d_load {
  padding-top: 100px;
  margin-top: -100px;
}
/*** 1カラム ***/
.colum1 {
  margin: 1em 0 3em 0;
  & p {
    margin: 0 0 0.5em 0;
  }
  & figure {
    width: 100%;
    & img {
      width: 100%;
    }
  }
}

article{
}

/***セクションの幅930px***/
.w930{
	width: 90%;
	max-width: 930px;
	margin: auto;
}

/*** 共通見出し ***/
h2.ul_heading{
	position: relative;
	display: inline-block;
	font-size: 2rem;
	line-height: 1.5;
	margin-bottom: 1em;
}
h2.ul_heading::after{
	content: "";
	position: absolute;
	bottom: 4px;
	z-index: -1;
	left: 0;
	right: 0;
	border-bottom: 10px solid #f29600;
	display: inline;
	width: calc(100% + 0);;
	}

/*** topアイコン ***/
section.icon_zone{
	max-width: 930px;
	margin:3em auto 3em;
}
.icon_1st{
	display: flex;
	justify-content: space-between;
	margin-bottom: 1em;
	& img{
		width:23.4%;
	}
}
.icon_2nd{
	display: flex;
	justify-content: space-between;
	& img{
		width:15%;
	}
}

/*** カラム ***/
/*** カラムA 右写真 ***/
section.colum_1_a{
	max-width: 930px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 6em auto 6em;
	flex-direction: row-reverse;
}
.colum_1_a div{
	width: 30%

}
.colum_1_a figure ,.colum_1_a video {
	width: 65%;
	border-radius: 10px;
	& img{
		width: 100%;
		border-radius: 10px;
	}
	& video{
		width: 100%;	
	}
}

/*** カラムB 左写真 ***/
section.colum_1_b{
	max-width: 930px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 6em auto 6em;	
}
.colum_1_b div{
	width: 30%

}
.colum_1_b figure ,.colum_1_b video {
	width: 65%;
	border-radius: 10px;
	& img{
		width: 100%;
		border-radius: 10px;
	}
	& video{
		width: 100%;	
	}
}


/*** ナイトビュー ***/
section.night_view{
	width: 100%;
	margin:6em auto 6em;
	text-align: center;
}
section.night_view > p{
	width: 90%;
	max-width: 800px;
	margin:2em auto 3em;
	text-align: center;
}
div.colum_3_full{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin:0;
	gap:10px; 
}
div.colum_3_full div{
	width: calc(100% / 3);
}
div.colum_3_full div:nth-of-type(1){
	background: rgba(160, 164, 240, 1);
}
div.colum_3_full div:nth-of-type(2){
	background-image: linear-gradient(90deg, rgba(160, 164, 240, 1) 10%, rgba(254, 221, 120, 1) 90%);
}
div.colum_3_full div:nth-of-type(3){
	background: rgba(254, 221, 120, 1);
}
div.colum_3_full div h3{
	padding: 1em 1em 0.5em;
}
div.colum_3_full div p{
	padding: 0 1em 2em;
}
div.colum_3_full div img{
	width: 100%;
	margin: 0;
	padding: 0;
}
.night_view .youtube{
	margin-bottom: 0;
}

/*** 記録はSDカードに ***/
section.rec_microsd{
	width: 90%;
	max-width: 930px;
	margin:6em auto 6em;
	text-align: center;
}
.rec_colum{
	width: 100%;
	max-width: 930px;
	margin:0 auto 2em;
	text-align: center;
	display: flex;
	justify-content: space-between;
}
.rec_colum div{
	width: 48%;
	& p{
		text-align: left;
		margin-bottom: 1.5em;
	}
}

.rec_colum figure{
	width: 48%;
}
.rec_colum figure img{
	width: 100%;
}
section.rec_microsd .colum3{
	text-align: left;
}

/*** 再生はスマートフォンから ***/
section.play_sp{
	width: 90%;
	max-width: 930px;
	margin:3em auto 3em;
	text-align: center;
}
.play_sp > figure{
	width: 80%;
	max-width: 800px;
	margin:0 auto 0;
	position: relative;
	& img{
		width: 100%;
	}
	& figcaption{
		position: absolute;
		right: 28%;
		top:72%;
		
	}
}

section.play_sp .colum3 h4{
	text-align: center;
	
}

/*** その他の機能 ***/
section.other_function{

	margin:3em auto 3em;
	text-align: center;
}

/*** 背景 ***/
.sky {
  background-image: url("../products/wls/car101/img/sky.jpg");
  background-size: cover;
  background-position: center center;
  padding: 1em 0;
  margin: 1em 0 4em 0;
}
.smaho {
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 212, 118, 1) 100%);
  padding: 1em 0 0 0;
  margin: 1em 0 4em 0;
}
.spec-bg {
  /*画像そのものは元ファイルに用意*/
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.spec-bg section {
  background-attachment: fixed;
}
/*** 全幅の2カラム ***/
.colum_full {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}
.colum_full div {
  width: 45%;
  margin: 0;
  padding: 1em;
  background: rgba(255, 255, 255, 0.80);
}
.colum_full div p {
  margin: 0 0 0 0;
}
.colum_full figure {
  width: 45%;
  margin: 0;
  padding: 0;
}
.colum_full figure img {
  width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}
.icon_text_orange {
  margin: 1em 0 0 0 !important;
  padding: 0.5em 1em !important;
  background: rgba(255, 155, 0, 1.00);
  border-radius: 4px;
  display: inline-block;
  color: rgba(255, 255, 255, 1.00);
  font-size: 1.2rem;
  font-family: "heisei-kaku-gothic-std", sans-serif;
  font-weight: 500;
}
.icon_text_orange span {
  display: inline-block;
  margin: 0 1em 0 0;
}
/*** センター2カラム ***/
.colum2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 1em 0 3em 0;
}
.colum2 div {
  width: 48%;
  margin: 0 0 2em 0;
  padding: 0;
}
.colum2 div figure img {
  width: 100%;
  margin: 0;
  padding: 0;
	border-radius: 10px;
}
.colum2 div p {
  margin: 0;
  padding: 0;
}
/***3カラム ***/
.colum3 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 1em 0 1em 0;
  & div {
    width: 31%;
    margin: 0 0 1.5em 0;
    padding: 0;
  }
}

.colum3 div figure img {
  width: 100%;
  margin: 0;
  padding: 0;
}
.colum3 div p {
  margin: 0;
  padding: 0;
}

/*** 4カラム ***/
.colum4 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 1em 0 1em 0;
  & div {
    width: 22%;
    margin: 0 0 1.5em 0;
    padding: 0;
    & p {
      margin: 0;
      padding: 0;     
    }
    & figure {
      & img {
        width: 100%;
        margin: 0;
        padding: 0;   
      }
    }
  }
}

p.hosoku {
  font-size: 0.9rem;
  margin: 0.35em 0 0 0 !important;
  padding: 0;
  line-height: 1.4em;
}

/*** ご注意 ***/
.wifi_caution {
  border: rgba(0, 0, 0, 1.00) solid 1px;
  padding: 0.75em ;
  border-radius: 3px;
  width: 100% ;
  margin:0 auto 3em;
	text-align: left;
	max-width: 800px;
}
.wifi_caution h6 {
  line-height: 1.4em !important;
  font-size: 1rem;
  margin: 0;
  padding: 0;
  display: block;
}
.wifi_caution p {
  display: block;
  width: 93%;
  margin: 0;
  padding: 0;
  line-height: 1.4em !important;
  font-size: 0.8rem;
}
/** 特徴 **/
.spec_maintext {
  padding-top: 9em !important;
  font-size: 1.05em !important;
  font-weight: bold;
}
/*** 録画時間テーブル */
.rec_table {
  width: 100%;
  margin: 1em 0 2em 0;
  border-spacing: 0;
  font-size: 1rem;
}
.rec_table th, .rec_table td {
  border-collapse: collapse;
  border: 1px solid #ccc;
  line-height: 1.5;
}
.rec_table tr:hover td, tr:hover th {
  background-color: #FFFFec;
}
.rec_table td {
  padding: 8px;
  text-align: left;
}
.rec_table td:nth-of-type(1) {
  width: 25%;
}
.rec_table th {
  padding: 8px;
  background: #eeeeee;
  text-align: left;
}
.rec_table_caption {
  margin-top: -24px;
}
.kome {
  font-size: 0.6rem;
  line-height: 1.4em !important;
}
.new_feature {
  position: relative;
  & span {
    position: absolute;
    top: 2%;
    left: 3%;
    color: white;
  }
}
/*** オプションカラム ***/
.option {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  margin: 2em 0 3em 0;
}
.option div {
  width: 48%;
  margin: 0 0 2em 0;
  padding: 0;
}
.option div p {
  margin-top: 0.5em;
  margin-bottom: 1.5em;
}
.option div figure {
  width: 100%;
  margin: 0;
  padding: 0;
}
.option div figure img {
  width: 100%;
  margin: 0;
  padding: 0;
}
.option h3 {
  width: 100%;
  margin: 0;
}
.option h4 {
  width: 100%;
  font-size: 1.3rem;
  margin: 0.3em 0 0 0 !important;
  padding: 0;
}
.option h4 a {
  font-size: 1.2rem;
  text-decoration: none;
}
.option h4 a:hover {
  text-decoration: underline;
}
.option h5 {
  width: 100%;
  font-size: 1.1rem;
  padding: 0 !important;
}
.option div ul {
  margin-bottom: 0.75em !important;
}
.option div ul li {
  list-style: none;
  display: inline-block;
  font-size: 0.9rem;
  margin-right: 2em;
}
/*** オプション-パッケージ内容 ***/
.option_package {
  margin: 0 0 1em 0;
  padding: 0;
  & li {
    list-style-position: inside;
  }
}

/*** パッケージ内容 ***/
.pkg_zone {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 3em;
}
.pkg_zone div {
  padding: 0;
  margin: 0 0 0 0;
  width: 47%;
}
.pkg_zone div ol {
  padding: 0;
  margin: 0 0 0 0;
  width: 100%;
  font-size: 1rem;
}
.pkg_zone div ol li {
  margin: 0.5em 0 0.5em 2.5em;
}
.pkg_zone figure {
  width: 47%;
}
.pkg_zone figure img {
  width: 100%;
}
/*** パッケージ内容 ***/
.dimensions {
  margin-bottom: 3em;
}
.dimensions figure {
  width: 100%;
  margin-bottom: 3em;
}
.dimensions figure figcaption {
  font-size: 1.2rem;
  font-family: "heisei-kaku-gothic-std", sans-serif;
}
.dimensions figure img {
  width: 90%;
  margin: 0 5%;
}
/*** ギャラリー ***/
.my-gallery {
  margin-bottom: 3em;
}

/**接続方法**/
.connect_method{
	text-align: center;
}

/**スライダーわっぱー**/
.cal_wap{
	width: 90%;
	max-width: 780px;
	margin: auto;
	text-align: left;
}



/** スライダー **/
.bxslider div {
  position: relative;
}
.bxslider div span {
  position: absolute;
  top: 70%;
  left: 2%;
}
.bxslider div span h4 {
  margin: 0;
  padding: 0;
}
.bx-prev {
  left: -40px !important;
}
.bx-next {
  right: -40px !important;
}
.bxslider h4 {
  font-size: 1.4rem;
}
.bxslider p {
  font-size:1rem;
  /*
  margin-bottom: 1.5em;
  margin-left: 1.5em;
  padding: 0 1em;
*/
}
.bx-viewport {
  box-shadow: initial !important;
}
.bx-wrapper {
  margin: 0 auto 65px auto !important;
}

br.sp_none{
	display: block;	
}

@media (max-width: 640px) {
	
  /*** 背景 ***/
  .sky {
    padding: 1em 0;
  }
  .smaho {
    padding: 1em 0 1em 0;
  }
  /*** ASD01 heroheader*/
  .hero_h_car101 {
    height: 100svh;
    margin: 0 auto;
    padding: 0;
  }
.hero_h_car101 section{
    overflow:visible;
  }
  img.model_photo {
    width: 45%;
    height: auto;
    top: 4.5vh;
    right: 0;
    left: 0;
    margin: auto;   
  }
  .hero_h_car101 section div {
    top: auto;
	bottom: calc(2.5% + 106px);
    left: 5%;
    width: 82%;
    padding: 10px 4%;
    background: rgba(250, 250, 250, 0.75);
    /* box-shadow */
    box-shadow: 0px 4px 10px 0px #666666;
    -moz-box-shadow: 0px 4px 10px 0px #666666;
    -webkit-box-shadow: 0px 4px 10px 0px #666666;
  }
  .hero_h_car101 h1 {
    font-size: 1.1rem;
    line-height: 1.3em;
    font-family: "heisei-kaku-gothic-std", sans-serif;
    margin-bottom: 0.25em;
  }
  .hero_h_car101 h2 {
    font-size: 1.5rem;
    padding: 0;
    margin: 0 0 0.25em 0;
    font-family: "heisei-kaku-gothic-std", sans-serif;
  }
  .hero_h_car101 h3 {
    font-size: 1.6rem !important;
    padding: 0;
    margin: 0;
    width: 90%;
    text-shadow: 3px 3px 6px #333333;
    top: 4vh;
    left: 5%;
    right: auto;
    text-align: center;
	  z-index: 1;
  }
  .hero_h_car101 section div ul {
    font-size: 0.8rem;
    list-style: none;
  }
  .hero_h_car101 section div ul li span {
    display: inline-block;
    width: 4em;
  }
	
/*** topアイコン ***/
section.icon_zone{
	width: 90%;
	margin:1.5em auto 3em;
}
.icon_1st{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0;
	& img{
		width:48%;
		margin-bottom: 1em;
	}
}
.icon_2nd{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	& img{
		width:31%;
		margin-bottom: 1em;
	}
}	

h2.ul_heading {
font-size: 1.5rem;
margin-bottom: 1em;
	text-align: center;
}
	
/*** カラム ***/
/*** カラムA 右写真 ***/
section.colum_1_a{
	max-width: 930px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 3em auto 3em;
	flex-direction:column-reverse;
}
.colum_1_a div{
	width: 90%;
	margin-top: 1.5em;
	text-align: center;
	& p{
		text-align: left;
		margin-bottom: 1em;
	}

}
.colum_1_a figure ,.colum_1_a video {
	width: 95%;
	border-radius: 10px;
	& img{
		width: 100%;
		border-radius: 10px;
	}
	& video{
		width: 100%;	
	}
}

/*** カラムB 左写真 ***/
section.colum_1_b{
	max-width: 930px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 3em auto 3em;	
	flex-direction: column-reverse;
}
.colum_1_b div{
	width: 90%;
	margin-top: 1.5em;
	text-align: center;
	& p{
		text-align: left;
		margin-bottom: 1em;
	}
}
.colum_1_b figure ,.colum_1_b video {
	width: 95%;
	border-radius: 10px;
	& img{
		width: 100%;
		border-radius: 10px;
	}
	& video{
		width: 100%;	
	}
}
	
/*** 再生はスマートフォンから ***/
section.play_sp{
	width: 90%;
	max-width: 930px;
	margin:3em auto 3em;
	text-align: center;
	overflow: hidden;
	& p{
		text-align: left;
	}
}
.play_sp > figure{
	width: 128%;
}
/*** 記録はSDカードに ***/
section.rec_microsd{
	margin:3em auto 3em;
	text-align: center;
}
.rec_colum{
	width: 100%;
	max-width: 930px;
	margin:0 auto 2em;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: column-reverse;
}
.rec_colum div{
	width: 100%;
	& p{
		text-align: left;
		margin-bottom: 1.5em;
	}
}

.rec_colum figure{
	width: 100%;
}
.rec_colum figure img{
	width: 100%;
}
section.rec_microsd .colum3{
	text-align: left;
}
	
/*** ナイトビュー ***/
section.night_view{
	margin:3em auto 3em;
}
section.night_view > p{
	width: 90%;
	max-width: 800px;
	margin:2em auto 3em;
	text-align: left;
}
div.colum_3_full{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin:0;
	gap:10px; 
}
div.colum_3_full div{
	width: 90%;
}
div.colum_3_full div p{
	padding: 0 1em 1.25em;
}

/*** ご注意 ***/
.wifi_caution {
  width: auto ;
}


.bxslider p {
  font-size: 0.9rem !important;
}
	
  /* 共通 */
  .spec_maintext {
    padding-top: 0 !important;
  }
  /*** 1カラム ***/
  .colum1 {
    margin: 0 0 3em 0;
  }
  .colum1 p {
    margin: 0 0 0.5em 0 !important;
  }
  /*** 全幅の2カラム ***/
  .colum_full {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
  }
  .colum_full div {
    width: 100%;
    margin: 0;
    padding: 1em;
    background: rgba(255, 255, 255, 0.80);
  }
  .colum_full div p {
    margin: 0 0 0 0;
  }
  .colum_full figure {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .colum_full figure img {
    width: 100%;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
  }
  .icon_text_orange {
    margin: 1em 0 0 0 !important;
    padding: 0.5em 1em !important;
    background: rgba(255, 155, 0, 1.00);
    border-radius: 4px;
    display: inline-block;
    color: rgba(255, 255, 255, 1.00);
    font-size: 1.2rem;
    font-family: "heisei-kaku-gothic-std", sans-serif;
    font-weight: 500;
  }
  .icon_text_orange span {
    display: inline-block;
    margin: 0 1em 0 0;
  }
  /*** センター2カラム ***/
  .colum2 div {
    width: 100%;
    margin-bottom: 2.5em;
  }
.colum2 div p {
  margin: 0;
  padding: 0;
	text-align: left;
}	

.video_column2 {
  flex-wrap: wrap;
}

  /***3カラム ***/
  .colum3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 1em 0 1em 0;
  }
  .colum3 div {
    width: 100%;
    margin: 0 0 2.5em 0;
  }
  .colum3 div figure img {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .colum3 div p {
    margin: 0;
    padding: 0;
  }

	
	
	
  /*** 録画時間テーブル */
  .rec_table {
    font-size: 0.9rem;
	  margin-top: 1em;
  }
  .rec_table th, .rec_table td {
    line-height: 1.5;
  }
  .rec_table td {
    padding: 5px 8px;
    width: 34%;
  }
  .rec_table th {
    padding: 5px 8px;
  }
  .new_feature {}
  .new_feature span {
    font-size: 1.3em;
    color: white;
  }
  /*** pkgゾーン */
  .pkg_zone {
    flex-flow: column-reverse;
    & div {
      width: 100%;
    }
    & figure {
      width: 100%;
    }
  }
  /*** 別売オプション */
  .option div {
    width: 100%;
    margin: 0 0 2em 0;
  }
  .option div p {
    margin: 0 0 1em 0;
  }
  .option div h4 {
    margin: 0 0 0.5em 0;
    padding: 0;
  }
  .option div ul {
    margin: 0 0 1.5em 0;
    padding: 0;
  }
  /** スライダー **/
  .bxslider div span {
    transform: translateY(-30%);
  }
  .bx-prev {
    left: 10px !important;
    top: 100% !important;
  }
  .bx-next {
    right: 10px !important;
    top: 100% !important;
  }

/*** パッケージ内容 ***/
.dimensions figure figcaption {
  font-size: 1rem;
  margin-bottom: 1em;
}
span.parts_num {
  float: right;
}
br.sp_none{
	display: none;	
}
}