@charset "UTF-8";
div, ul, li, ol, p, span, a, a:hover, table, tr, th, td, dl, dt, dd, nav, i, section, article, header, footer, input, textarea{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}

:root {
  /* 背景グラデーション色 (変更可能) */
  --bg-gradient-start: oklch(0.6917 0.1718 246.75);
  --bg-gradient-mid: oklch(0.457 0.2 245);
  --bg-gradient-end: oklch(0.8124 0.1415 214.7);

  /* アクセント色 (変更可能) */
  --accent-blue: oklch(0.65 0.25 250);
  --accent-cyan: oklch(0.7 0.2 220);
  --accent-light: oklch(0.85 0.15 240);

  /* テキスト色 */
  --text-primary: oklch(0.95 0.05 250);
  --text-secondary: oklch(0.75 0.1 245);

  /* カード背景 */
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-border: rgba(100, 150, 255, 0.3);
}

.ten {
  font-family: "Poppins", sans-serif;
}

#bubbles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  filter: blur(1px);
}
.wrap{
  position: relative;
  width:100%;
  max-width:1500px;
  padding:0 50px;
  margin:0 auto;
  z-index: 15;
}
.wrap2{
  position: relative;
  width:100%;
  max-width:1600px;
  padding:0 25px;
  margin:0 auto;
  z-index: 15;
}
@media screen and (max-width: 860px){
  .wrap{
    padding:0 25px;
  }
  .wrap2{
    padding:0 15px;
  }
}
@media screen and (max-width: 480px){
  .wrap{
    padding:0 15px;
  }
}
/*----------------------------kv-----------------------------------*/
#mv{
  position: relative;
  width:100%;
  padding:50px 0px;
  background: #ebebeb;
}
#mv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700px;
  background-color: #fff;
}
#mv .kv_wrap{
  width:100%;
  max-width:1850px;
  padding:0 50px;
  margin:0 auto;
  position: relative;
}
#mv .inner-mv{
  pointer-events: none;
	position: relative;
	z-index: 1;
	background: #fff;
	opacity: 0;
	transition: 2s ease-in-out;
	color: #fff;
	width: 100%;
	overflow: visible;
}
.loaded #mv .inner-mv{
	opacity: 1;
}
#mv .slider{
	position: relative;
	z-index: 1;
	opacity: 0;
	transition: 0.5s ease-in-out;
  overflow: hidden;
}
#mv .slider.slick-initialized{
	opacity: 1;
}
#mv .slider .slick-list{
	position: relative;
	display: block;
}
#mv .slider .slick-track{
	position: relative;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
#mv .slider .slick-slide{
	height:787px;
	width: 100%;
}
#mv .slider img{
	display: block;
	object-fit: cover;
	object-position: 50% 50%;
	font-family: 'object-fit: cover; object-position: 50% 50%;';
	width: 100%;
	height: 100%;
	transform: scale(1.1);
	transition: 3s ease-in-out;
}
#mv .slider .slick-current img{
	transform: scale(1);
}

#mv .mv_leading{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:787px;
  z-index:2;
}
#mv .mv_leading .mv_inner{
  text-align: center;
  color:#fff;
  padding:110px 50px 0px;
}
#mv .mv_leading .mv_inner h1{
  font-size: 42px;
  margin-bottom: 10px;
}
#mv .mv_leading .mv_inner .desc{
  font-size: 22px;
}
#mv .mv_leading .mv_btn{
  position: absolute;
  bottom:-55px;
  left:0;
  width:100%;
  z-index:3;
}
#mv .mv_leading .mv_btn a{
  position: relative;
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
  align-items: center;
  width:100%;
  max-width:424px;
  height:110px;
  padding:4px;
  border:1px solid #76bff1;
  margin:0 auto;
}
#mv .mv_leading .mv_btn a:before {
    content: "";
    display: block;
    position: absolute;
    left: -4px;
    top: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
    background: url(/newcar/bz4x/images/plus.svg) left top/7px 7px no-repeat, url(/newcar/bz4x/images/plus.svg) right top/7px 7px no-repeat, url(/newcar/bz4x/images/plus.svg) right bottom/7px 7px no-repeat, url(/newcar/bz4x/images/plus.svg) left bottom/7px 7px no-repeat;
  }
#mv .mv_leading .mv_btn a span{
  display:block;
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
  background: #00acec;
  color:#fff;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  transition: 0.3s ease-in-out;
}
#mv .mv_leading .mv_btn a:hover span{
  background: #15bdfb;
}

@media screen and (max-width: 1180px){
	#mv::before {
    height: 600px;
  }
  #mv .slider .slick-slide{
  	height:687px;
  }
  #mv .mv_leading{
    height:687px;
  }
  #mv .mv_leading .mv_inner{
    padding:80px 25px 0px;
  }
}
@media screen and (max-width: 980px){
  #mv .mv_leading .mv_inner{
    padding:50px 25px 0px;
  }
  #mv .mv_leading .mv_inner h1{
    font-size: 38px;
  }
	#mv .mv_leading .mv_inner h1 span{
    display:block;
  }
}
@media screen and (max-width: 860px){
  #mv{
    padding:30px 0px 50px;
  }
  #mv .kv_wrap{
    padding:0 25px;
  }
  #mv::before {
    height: 500px;
  }
  #mv .slider .slick-slide{
  	height:587px;
  }
  #mv .mv_leading{
    height:587px;
  }
  #mv .mv_leading .mv_inner{
    padding:50px 15px 0px;
  }
  #mv .mv_leading .mv_inner h1{
    font-size: 32px;
  }
  #mv .mv_leading .mv_inner .desc{
    font-size: 18px;
  }
}
@media screen and (max-width: 480px){
  #mv{
    padding:20px 0px 40px;
  }
  #mv .kv_wrap{
    padding:0 15px;
  }
  #mv::before {
    height: 300px;
  }
  #mv .slider .slick-slide{
  	height:407px;
  }
  #mv .mv_leading{
    height:407px;
  }
  #mv .mv_leading .mv_inner{
    padding:30px 15px 0px;
  }
  #mv .mv_leading .mv_inner h1{
    font-size: 24px;
  }
  #mv .mv_leading .mv_inner .desc{
    font-size: 14px;
  }
  #mv .mv_leading .mv_inner .desc span{
    display:block;
  }
  #mv .mv_leading .mv_btn{
    bottom:-45px;
  }
  #mv .mv_leading .mv_btn a{
    max-width:324px;
    height:90px;
  }
  #mv .mv_leading .mv_btn a span{
    font-size: 20px;
  }
}
@media screen and (max-width: 320px){
  #mv{
    padding:20px 0px 30px;
  }
  #mv .kv_wrap{
    padding:0 10px;
  }
  #mv::before {
    height: 200px;
  }
  #mv .slider .slick-slide{
  	height:307px;
  }
  #mv .mv_leading{
    height:307px;
  }
  #mv .mv_leading .mv_inner{
    padding:20px 10px 0px;
  }
  #mv .mv_leading .mv_inner h1{
    font-size: 20px;
  }
  #mv .mv_leading .mv_inner .desc{
    font-size: 12px;
  }
  #mv .mv_leading .mv_inner .desc span{
    display:block;
  }
  #mv .mv_leading .mv_btn{
    bottom:-40px;
  }
  #mv .mv_leading .mv_btn a{
    max-width:264px;
    height:80px;
  }
  #mv .mv_leading .mv_btn a span{
    font-size: 18px;
  }
}
/*----------------------------s1-----------------------------------*/
#s1{
  position: relative;
  width:100%;
  padding:110px 0px 150px;
  background: #fff;
}
#s1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background-color: #ebebeb;
  z-index:1;
}
#s1::after {
  content: "";
  position: absolute;
  top: 110px;
  left: 0;
  width: 60%;
  height: 400px;
  background-color: #fff;
  z-index:2;
}
#s1 .elm1{
  position: relative;
  padding-top: 60px;
  padding-right: 650px;
  margin-bottom: 150px;
}
#s1 .wrap::before {
  content: "";
  position: absolute;
  top: 0;
  right: -350px;
  width: 1000px;
  height: 800px;
  background: url(/newcar/bz4x/images/s1_bg.png) 100% 0 no-repeat;
  background-size: 1000px auto;
  z-index:3;
}
#s1 .elm1 .bz4x_logo img{
  display:block;
  width:100%;
  max-width:250px;
  margin-bottom: 40px;
}
#s1 .elm1 h2{
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 30px;
}
#s1 .elm1 p{
  font-size: 18px;
  line-height: 2.0;
  margin-bottom: 50px;
}
#s1 .elm1 .bz4x_carsp{
  display:none;
}
#s1 .inav{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width:100%;
  max-width:500px;
  grid-column-gap: 1px;
}
#s1 .inav li a{
  display:block;
  border: 1px solid #003641;
  transform: skewX(-15deg);
  text-align: center;
  padding:8px 10px;
  color:#003641;
  font-size: 16px;
  font-weight: bold;
  transition: 0.3s ease-in-out;
  background: #fff;
}
#s1 .inav li a span {
  position: relative;
  display: block;
  transform: skewX(15deg);
}
#s1 .inav li a span::after{
  content:"";
  position: absolute;
  top:calc(50% - 7px);
  right:10px;
  width:6px;
  height:6px;
  border-top: 2px solid #003641;
  border-right: 2px solid #003641;
  transform: rotate(135deg);
  transition: 0.3s ease-in-out;
}
#s1 .inav li a:hover{
  background: #003641;
  color:#fff;
}
#s1 .inav li a:hover span::after{
  border-color: #fff;
}

.bz4x_hadding{
  width:100%;
  margin-bottom: 80px;
}
.bz4x_hadding .ten{
  position: relative;
  color:#ebebeb;
  font-size: 120px;
  letter-spacing: 0;
  line-height: 0.1;
  font-weight: 900;
  z-index:1;
  pointer-events: none;
}
.bz4x_hadding h2{
  position: relative;
  font-size: 32px;
  font-weight: bold;
  z-index:2;
  padding-bottom: 20px;
}
.bz4x_hadding h2::before{
  position: absolute;
  content:"";
  bottom:0;
  left:0;
  width:50px;
  height:2px;
  background: #003641;
}
.scroll-info{
  display:none;
  position: relative;
  width:120px;
  margin-bottom: 15px;
  margin-left: 0px;
}
.scroll-info span{
  font-size: 16px;
}
.scroll-info .arrow {
    position: absolute;
    top: 30px;
    left: 0;
    animation: 2s arrow-animation infinite ease-in-out;
    width: 100px;
    height: 1px;
    border: 0.5px solid #443d2d;
}
.scroll-info .arrow::after {
    content: "";
    display: block;
    position: absolute;
    top: -3px;
    right: -20px;
    width: 10px;
    height: 1px;
    border-top: 3px solid transparent;
    border-left: 10px solid #443d2d;
    border-right: 3px solid transparent;
}
@keyframes arrow-animation {
  0% {
    width: 0px;
  }
  66% {
    width: 100px;
  }
}
.bz4x_table_box{
  width:100%;
  margin-bottom: 25px;
}
.bz4x_table_box .bz4x_table{
  width:100%;
  background: #fff;
}
.bz4x_table_box .bz4x_table th,
.bz4x_table_box .bz4x_table td{
  padding: 15px 5px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}
.bz4x_table_box .bz4x_table th{
  background: #003641;
  padding: 22px 5px;
  color:#fff;
  font-weight: bold;
  border-bottom: 1px solid #003641;
  border-right: 1px solid #fff;
}
.bz4x_table_box .bz4x_table td{
  font-size: 16px;
  border-bottom: 1px solid #003641;
  border-right: 1px solid #003641;
}
.bz4x_table_box .bz4x_table td.ob{
  background: #f4f2f2;
  font-weight: bold;
  font-size: 18px;
  padding: 20px 5px;
}
.bz4x_table_box .bz4x_table th:nth-of-type(1){
  width:20%;
}
.bz4x_table_box .bz4x_table th:nth-of-type(2),
.bz4x_table_box .bz4x_table th:nth-of-type(3){
  width:25%;
}
.bz4x_table_box .bz4x_table th:nth-of-type(4){
  width:30%;
  border-right: none;
}
.bz4x_table_box .bz4x_table td.ob,
.bz4x_table_box .bz4x_table td:nth-of-type(4){
  border-right: none;
}
.bz4x_table_box .bz4x_table td .lt{
  font-size: 26px;
  font-weight: 700;
}
.bz4x_table_box .bz4x_table td img{
  vertical-align: middle;
  margin-left: 5px;
}
#s1 .cap{
  widtH:100%;
  text-align: right;
  font-size: 14px;
  margin-bottom: 100px;
}

.bz4x_slide{
  widtH:100%;
  margin-bottom: 200px;
}
.bz4x_slide .img{
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.bz4x_slide .img1{
	position: relative;
	background: #000;
  margin-bottom: 10px;
}
.bz4x_slide .img1 li{
	background: #000;
}
.bz4x_slide .img1 li{
	position: absolute;
	top: 0;
	left: 0;
}
.bz4x_slide .img2{
	display: grid;
  grid-template-columns: repeat(5, 1fr);
  width:100%;
  grid-column-gap: 1px;
}
.bz4x_slide .img2 li{
	display: table-cell;
}
.bz4x_slide .img2 li img{
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.bz4x_slide .img2 li img:hover{
	cursor: pointer;
	filter: alpha(opacity=80) !important;
	-moz-opacity: 0.8 !important;
	opacity: 0.8 !important;
}
.bz4x_slide .img1 li img:hover{
	cursor: pointer;
}
.bz4x_slide .img1 li .c{
	font-size: 12px;
	position: absolute;
	bottom: 5px;
	left: 0;
	display: block;
	height: auto;
	color: rgba(255,255,255,0.7);
	padding: 0 5px;
	line-height: 1.25;
	letter-spacing: -0.1px;
	text-align: left;
}

#s1 .bdf{
  font-size: 20px;
  margin-bottom: 80px;
}
#s1 .trial_box{
  width:100%;
  padding:60px 50px;
  background: #f4f4f4;
}
#s1 .trial_box .trial_link{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width:100%;
  gap: 2px;
}
#s1 .trial_box .trial_link li a{
  display:block;
  background: #fff;
  border: 1px solid #d6dee0;
  padding:30px 20px;
  transition: 0.3s ease-in-out;
}
#s1 .trial_box .trial_link li a h3{
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
}
#s1 .trial_box .trial_link li a h3::before{
  position: absolute;
  content:"";
  top:calc(50% - 2px);
  left:0;
  width:10px;
  height:2px;
  background: #003641;
}
#s1 .trial_box .trial_link li a p{
  transform: skewX(-15deg);
  text-align: center;
  padding:10px 5px;
  color:#fff;
  background: #003641;
  font-size: 18px;
  font-weight: bold;
  transition: 0.3s ease-in-out;
}
#s1 .trial_box .trial_link li a p span {
  position: relative;
  display: block;
  transform: skewX(15deg);
}
#s1 .trial_box .trial_link li a:hover{
  border: 1px solid #003641;
}
#s1 .trial_box .trial_link li a:hover p{
  background: #03596b;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.trialbtn{
  display:none;
}

.trial_w{
  border: 1px solid #d6dee0;
  background: #fff;
}
.trial_w .trial_data{
  width:100%;
  background: #f4f4f4;
  border-bottom: 1px solid #d6dee0;
  padding:25px 50px;
}
.trial_w .trial_data dl{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
	flex-wrap: wrap;
  align-items: center;
}
.trial_w .trial_data dl dt{
  width:50px;
}
.trial_w .trial_data dl dd{
  width:calc(100% - 50px);
  padding-left: 50px;
}
.trial_w .trial_data dl dd ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 50px;
}
.trial_w .selectbox {
  display: inline-flex;
  width:100%;
  align-items: center;
  position: relative;
}

.trial_w .selectbox::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.trial_w .selectbox select {
    appearance: none;
    width:100%;
    max-width: 380px;
    height: 3.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}
.trial_w .inner{
  padding: 50px;
}
.trial_w .inner article{
  border-bottom: 1px solid #d6dee0;
  padding:25px 0;
}
.trial_w .inner article:first-of-type{
  padding-top: 0px;
}
.trial_w .inner article ul{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
	flex-wrap: wrap;
  align-items: center;
}
.trial_w .inner article ul li.cimg{
  width:18%;
  min-width:130px;
  padding-right: 15px;
}
.trial_w .inner article ul li.g{
  width:17%;
  padding:0 15px;
  font-size: 20px;
  font-weight: bold;
}
.trial_w .inner article ul li.b{
  width:25%;
  padding:0 15px;
}
.trial_w .inner article ul li.s{
  width:20%;
  padding:0 15px;
  font-size: 16px;
  font-weight: bold;
}
.trial_w .inner article ul li.btn{
  width:20%;
  padding-left:15px;
}
.trial_w .inner article ul li.btn a{
  display:block;
  width:100%;
  background: #fff;
  border: 1px solid #003641;
  color:#003641;
  text-align: center;
  padding:15px 5px;
  font-weight: bold;
  transition: 0.3s ease-in-out;
}
.trial_w .inner article ul li.btn a:hover{
  background: #03596b;
  color:#fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.trial_w .inner .not{
  font-size: 18px;
}
@media screen and (max-width: 1180px){
  .trial_w .trial_data dl dd{
    width:calc(100% - 50px);
    padding-left: 30px;
  }
  .trial_w .trial_data dl dd ul{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
  }
  #s1 .elm1{
    position: relative;
    padding-top: 60px;
    padding-right: 0px;
    margin-bottom: 150px;
  }
  #s1 .wrap::before {
    display:none;
  }
  #s1 .elm1 .bz4x_carsp{
    display:block;
  }
  #s1 .elm1 .bz4x_carsp img{
    display:block;
    width:100%;
    max-width:800px;
    margin: 0 auto 0px;
  }
  #s1 .inav{
    max-width:800px;
    margin: 0 auto;
  }
  #s1 .trial_box .trial_link{
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 980px){
  #s1 .trial_box .trial_link li a h3{
    font-size: 16px;
  }
  #s1 .trial_box .trial_link li a p{
    font-size: 16px;
  }
  .trial_w .trial_data dl dt{
    display:none;
  }
  .trial_w .trial_data dl dd{
    width:100%;
    padding-left: 0px;
  }
  .trial_w .trial_data{
    padding:25px 25px;
  }
  .trial_w .inner{
    padding: 50px 25px;
  }
  .trial_w .inner article ul li.g{
    font-size: 18px;
  }
  .trial_w .inner article ul li.btn{
    padding-left:0px;
  }
}
@media screen and (max-width: 860px){
  #s1{
    padding:110px 0px 120px;
  }
  .bz4x_hadding .ten{
    font-size: 100px;
  }
  .trial_w .inner article ul li.cimg{
    width:50%;
    min-width:130px;
    padding-right: 15px;
  }
  .trial_w .inner article ul li.g{
    width:50%;
    padding:0 0px 0 15px;
    font-size: 20px;
  }
  .trial_w .inner article ul li.b{
    width:100%;
    font-size: 18px;
    padding:15px 0px;
  }
  .trial_w .inner article ul li.s{
    width:50%;
    padding:0 15px 0 0px;
    font-size: 18px;
  }
  .trial_w .inner article ul li.btn{
    width:50%;
    padding-left:15px;
  }
}
@media screen and (max-width: 760px){
  .bz4x_table_box{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .scroll-info{
    display:block;
  }
  .bz4x_table_box .bz4x_table{
    width:1200px;
  }
  .bz4x_hadding{
    margin-bottom: 60px;
  }
  .bz4x_hadding .ten{
    font-size: 90px;
  }
  .bz4x_hadding h2{
    font-size: 28px;
    padding-bottom: 15px;
  }
  .bz4x_slide{
    margin-bottom: 120px;
  }
  #s1 .bdf{
    font-size: 18px;
    margin-bottom: 50px;
  }
  #s1 .trial_box{
    padding:40px 25px;
  }
  #s1 .trial_box .trial_link{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 680px){
  #s1{
    padding:70px 0px 150px;
  }
	#s1::after {
    top: 80px;
    width: 80%;
  }
  #s1 .elm1{
    margin-bottom: 100px;
  }
  .bz4x_table_box .bz4x_table{
    width:1000px;
  }
  .bz4x_table_box .bz4x_table th,
  .bz4x_table_box .bz4x_table td{
    padding: 12px 5px;
    font-size: 16px;
  }
  .bz4x_table_box .bz4x_table th{
    padding: 18px 5px;
  }
  .bz4x_table_box .bz4x_table td{
    font-size: 14px;
  }
  .bz4x_table_box .bz4x_table td.ob{
    font-size: 16px;
    padding: 18px 5px;
  }
  .bz4x_table_box .bz4x_table td .lt{
    font-size: 22px;
  }
  .bz4x_table_box .bz4x_table td img{
    max-width:80px;
  }
  #s1 .cap{
    font-size: 12px;
    margin-bottom: 70px;
  }
  .bz4x_slide{
    margin-bottom: 160px;
  }
  .bz4x_slide .img1 li .c{
		min-width: calc(320px * 0.95);
		color: #333;
		top: calc(100% + 100% * 0.2 + 20px);
		padding: 0;
	}
  .trialbtn{
    display: block;
    background: #fff;
		padding: 16px 5px;
		cursor: pointer;
    border: 1px solid #03596b;
    border-radius: 3px;
  }
  .trialbtn:before{
		content: "+";
		display: inline-block;
		background: #fff;
		border-radius: 100%;
		line-height: 16px;
		width: 16px;
		height: 16px;
		text-align: center;
		margin-right: 5px;
	}
	.trialbtn:after{
		content: "試乗車店舗を表示";
    font-size: 16px;
	}
	.trialbtn.open:before{
		content: "-";
	}
	.trialbtn.open:after{
		content: "閉じる";
    font-size: 16px;
	}
  .trial_box {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.35s ease, opacity 0.35s ease;
  }
  .trial_box.open {
    opacity: 1;
  }
  .trial_box.open {
    display: block;
  }

  #s1 .trial_box .trial_link{
    grid-template-columns: repeat(2, 1fr);
  }
  .trial_w .trial_data dl dd ul{
    grid-template-columns: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 20px;
  }
  .trial_w .selectbox select {
      max-width: 680px;
      height: 3.8em;
      font-size: 16px;
  }
}
@media screen and (max-width: 480px){
  #s1{
    padding:50px 0px 150px;
  }
	#s1::after {
    top: 50px;
    width: 80%;
  }
  #s1 .elm1{
    margin-bottom: 80px;
  }
  #s1 .elm1 .bz4x_logo img{
    max-width:180px;
    margin-bottom: 30px;
  }
  #s1 .elm1 h2{
    font-size: 22px;
    margin-bottom: 20px;
  }
  #s1 .elm1 p{
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
  }
  #s1 .elm1 .bz4x_carsp img{
    display:block;
    width:110%;
    margin-left: -5%;
  }
  #s1 .inav li a{
    padding:8px 6px;
    font-size: 14px;
  }
  #s1 .inav li a span::after{
    right:3px;
  }
  .bz4x_hadding{
    margin-bottom: 50px;
  }
  .bz4x_hadding .ten{
    font-size: 70px;
  }
  .bz4x_hadding h2{
    font-size: 24px;
  }
  .bz4x_table_box .bz4x_table{
    width:650px;
  }
  .bz4x_table_box .bz4x_table th,
  .bz4x_table_box .bz4x_table td{
    padding: 8px 5px;
    font-size: 14px;
  }
  .bz4x_table_box .bz4x_table th{
    padding: 10px 5px;
  }
  .bz4x_table_box .bz4x_table td{
    font-size: 12px;
  }
  .bz4x_table_box .bz4x_table td.ob{
    font-size: 14px;
    padding: 10px 5px;
  }
  .bz4x_table_box .bz4x_table td .lt{
    font-size: 18px;
  }
  .bz4x_table_box .bz4x_table td img{
    max-width:50px;
  }
  .bz4x_slide .img1 li .c{
		font-size: 10px;
	}
  #s1 .bdf{
    font-size: 16px;
    margin-bottom: 30px;
  }
  #s1 .trial_box{
    padding:15px 15px;
  }
  #s1 .trial_box .trial_link{
    grid-template-columns: 1fr;
  }
  #s1 .trial_box .trial_link li a{
    padding:15px 20px;
  }
  .trial_w .trial_data{
    padding:15px 15px;
  }
  .trial_w .trial_data dl dd ul{
    grid-row-gap: 10px;
  }
  .trial_w .selectbox select {
      height: 3.2em;
      font-size: 14px;
  }
  .trial_w .inner{
    padding: 15px;
  }
  .trial_w .inner article ul li.b{
    font-size: 16px;
    padding:12px 0px;
  }
}
/*----------------------------bevnav-----------------------------------*/
#bevnav{
  position: relative;
  width:100%;
  padding:150px 0px;
  background: url(/newcar/bz4x/images/abg.jpg) 50% 0 no-repeat #fff fixed;
  background-size: cover;
  z-index:5;
}
#bevnav .bevnav_title{
  width:100%;
  position: relative;
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80px;
}
#bevnav .bevnav_title p{
  position: relative;
  width:100%;
  text-align: center;
  color:#ebebeb;
  font-size: 140px;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.0;
  font-weight: 900;
  z-index:1;
  pointer-events: none;
}
#bevnav .bevnav_title h2{
  position: absolute;
  font-size: 32px;
  z-index: 2;
}
#bevnav .anav{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  justify-content: center;
  flex-wrap: wrap;
}
#bevnav .anav li{
  width: calc((100% - 30px * 2) / 3);
	margin: 0 10px 30px;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
#bevnav .anav li a{
  display:block;
  position: relative;
  width:100%;
  overflow: hidden;
}
#bevnav .anav li a .anv_img{
  position: relative;
}
#bevnav .anav li a .anv_img img {
  width: 100%;
  height: auto;
  -webkit-transform: scale(1);
  transform: scale(1);
  vertical-align: middle;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
#bevnav .anav li a .anv_img::before {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), to(rgba(0, 0, 0, 0.85)));
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.85) 100%);
  content: "";
}
#bevnav .anav li a .anv_img::after {
  z-index: 2;
  content:"";
  position: absolute;
  bottom:20px;
  right:calc(50% - 6px);
  width:12px;
  height:12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(135deg);
}
#bevnav .anav li a h3 {
  z-index: 2;
  position: absolute;
  bottom: 50px;
  padding: 0 0px;
  color: #fff;
  width:100%;
  font-size: 22px;
  text-align: center;
}
#bevnav .anav li a:hover .anv_img img { -webkit-transform: scale(1.1) translate3d(0, 0, 0) !important; transform: scale(1.1) translate3d(0, 0, 0) !important; }

@media screen and (max-width: 980px){
  #bevnav{
    padding:100px 0px;
  }
}
@media screen and (max-width: 860px){
  #bevnav .anav li a h3 {
    bottom: 40px;
    font-size: 18px;
  }
}
@media screen and (max-width: 760px){
  #bevnav{
    padding:70px 0px;
  }
  #bevnav .bevnav_title{
    margin-bottom: 50px;
  }
  #bevnav .bevnav_title p{
    font-size: 100px;
  }
  #bevnav .bevnav_title h2{
    font-size: 26px;
  }
  #bevnav .anav li{
    width: calc(100% / 3);
  	margin: 0 0px 30px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
  }
  #bevnav .anav li a h3 {
    bottom: 30px;
    font-size: 16px;
    line-height: 1.4;
    text-shadow: 1px 1px 5px rgba(0,0,0,1);
  }
  #bevnav .anav li a .anv_img::after {
    bottom:10px;
    right:calc(50% - 3px);
    width:6px;
    height:6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }
}
@media screen and (max-width: 480px){
  #bevnav .bevnav_title h2{
    font-size: 22px;
  }
  #bevnav .anav li{
    width: calc(100% / 2);
  	margin: 0 0px 30px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
  }
  #bevnav .anav li a h3 {
    bottom: 30px;
    font-size: 14px;
  }
}
/*---------------------*/
.mmv{
  position: relative;
  width:100%;
  max-width:1500px;
  margin:0 auto;
  z-index: 10;
}
.mmv > div{
  height:470px;
	width: 100%;
  overflow: hidden;
}
.mmv > div img{
	display: block;
	object-fit: cover;
	object-position: 50% 50%;
	font-family: 'object-fit: cover; object-position: 50% 50%;';
	width: 100%;
	height: 100%;
  transform: scale(1.2);
	transition: 2s ease-in-out;
}
.onmmv .mmv > div img{
  transform: scale(1);
}
.ml_had{
  text-align: center;
  margin-top: -65px;
  margin-bottom: 80px;
}
.ml_had .ten{
  font-size: 140px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.0;
  letter-spacing: 0;
  color:#ebebeb;
}
.ml_had h2{
  font-size: 32px;
  font-weight: 700;
  color:#000;
  line-height: 1.0;
  margin-top: -35px;
}
.ml_cach{
  text-align: center;
  font-size: 18px;
  margin-bottom: 100px;
}
@media screen and (max-width: 1080px){
  .mmv > div{
    height:390px;
  }
}
@media screen and (max-width: 860px){
  .mmv > div{
    height:300px;
  }
  .ml_had{
    text-align: center;
    margin-top: -65px;
    margin-bottom: 80px;
  }
  .ml_had .ten{
    font-size: 120px;
  }
}
@media screen and (max-width: 760px){
  .ml_had{
    text-align: center;
    margin-top: -45px;
    margin-bottom: 70px;
  }
  .ml_had .ten{
    font-size: 100px;
  }
  .ml_had h2{
    font-size: 28px;
    margin-top: -20px;
  }
  .ml_cach{
    text-align: left;
    font-size: 18px;
    margin-bottom: 80px;
  }
}
@media screen and (max-width: 680px){
  .ml_had .ten{
    font-size: 80px;
  }
}
@media screen and (max-width: 480px){
  .mmv > div{
    height:200px;
  }
  .ml_had{
    margin-top: -30px;
    margin-bottom: 50px;
  }
  .ml_had .ten{
    font-size: 60px;
  }
  .ml_had h2{
    font-size: 22px;
    margin-top: -15px;
  }
  .ml_cach{
    font-size: 16px;
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 320px){
  .mmv > div{
    height:150px;
  }
  .ml_had{
    margin-top: -20px;
    margin-bottom: 40px;
  }
  .ml_had .ten{
    font-size: 40px;
  }
  .ml_had h2{
    font-size: 18px;
    margin-top: -10px;
  }
  .ml_cach{
    font-size: 14px;
    margin-bottom: 40px;
  }
}
/*---------------------------s2-----------------------------------*/
#s2{
  position: relative;
  width:100%;
  padding:80px 15px 100px;
  z-index:15;
}

#s2 .s2_elm{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 80px;
  z-index:10;
}
#s2 .s2_elm article{
  border: 1px solid #e5e4e4;
  background: #fff;
  margin-left: -1px;
  cursor: pointer;
}
#s2 .s2_elm article a{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
  flex-direction: column;
  padding:30px;
  height:100%;
  cursor: pointer;
}
#s2 .s2_elm article .img {
  width: 100%;
  height: auto;
  aspect-ratio: 409 / 258;
  display: block;
  margin-bottom: 25px;
}
#s2 .s2_elm article .img .thumb {
  overflow: hidden;
  backface-visibility: hidden;
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}
#s2 .s2_elm article .img .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1);
  transition: transform 0.5s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#s2 .s2_elm article:hover .img .thumb img{
  transform: scale(1.1);
}
#s2 .s2_elm article h3{
  font-size: 18px;
  margin-bottom: 30px;
}
#s2 .s2_elm article .bot{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
}
#s2 .s2_elm article .bot p{
  position: relative;
  margin-right: 15px;
}
#s2 .s2_elm article .bot span{
  border: 1px solid #e5e4e4;
  width:30px;
  height:30px;
  padding:3px;
  pointer-events: none;
}

#s2 .loop_img {
    width:5400px;
    height: 124px;
    background: url(/newcar/bz4x/images/s2_bg.png) repeat-x left center / 50% 100%;
    background-size: auto;
    -webkit-animation: loop_animation 40s linear infinite;
    animation: loop_animation 40s linear infinite;
    z-index:0;
}
@-webkit-keyframes loop_animation {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    100% {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }
}

@keyframes loop_animation {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    100% {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }
}

#s2 .cp_h{
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 30px;
}
#s2 .cp_p1{
  text-align: center;
  font-size: 18px;
  margin-bottom: 50px;
}
#s2 .cp_box{
  position: relative;
  width:100%;
  max-width:1095px;
  margin: 0 auto;
  padding:4px;
  border:1px solid #76bff1;
  margin-bottom: 60px;
}
#s2 .cp_box:last-of-type{
  margin-bottom: 0px;
}
#s2 .cp_box:before,
#s2 .cp_box .inner h5:before {
    content: "";
    display: block;
    position: absolute;
    left: -4px;
    top: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
    background: url(/newcar/bz4x/images/plus.svg) left top/7px 7px no-repeat, url(/newcar/bz4x/images/plus.svg) right top/7px 7px no-repeat, url(/newcar/bz4x/images/plus.svg) right bottom/7px 7px no-repeat, url(/newcar/bz4x/images/plus.svg) left bottom/7px 7px no-repeat;
}
#s2 .cp_box .inner{
  width:100%;
  padding:50px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}
#s2 .cp_box .inner h5{
  position: relative;
  display:inline-block;
  font-size: 26px;
  font-weight: bold;
  padding: 10px 15px;
  line-height: 1.0;
  border:1px solid #76bff1;
  margin-bottom: 30px;
}
#s2 .cp_box .inner .cp_title{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
	flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}
#s2 .cp_box .inner .cp_title dt{
  width:30%;
}
#s2 .cp_box .inner .cp_title dd{
  width:67%;
}
#s2 .cp_box .inner .cp_title2{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
	flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}
#s2 .cp_box .inner .cp_title2 dt{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
  width:65%;
  justify-content: space-between;
}
#s2 .cp_box .inner .cp_title2 dt p:nth-of-type(1){
  width:37%;
}
#s2 .cp_box .inner .cp_title2 dt p:nth-of-type(2){
  width:62%;
}
#s2 .cp_box .inner .cp_title2 dd{
  width:32%;
}
#s2 .cp_box .inner .cp_title2 dd p{
  font-size: 12px;
  padding-top: 5px;
  line-height: 1.2;
}
#s2 .cp_p2{
  text-align: center;
  font-size: 20px;
  margin-bottom: 50px;
}
#s2 .cp_p3{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color:#0067ae;
  margin-bottom: 50px;
}
#s2 .cp_p3 span{
  display:block;
  font-size: 14px;
}
#s2 .cp_p4{
  font-weight: bold;
}
#s2 .cp_p5{
  font-size: 12px;
}
#s2 .cp_p5 span{
  color:#fb3b3b;
}
#s2 .cp_p6{
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
#s2 .cp_box .inner .desc{
  margin-bottom: 30px;
}
#s2 .cp_box .inner .desc dl{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  padding:15px 0;
  flex-wrap: wrap;
  border-bottom: 1px solid #e3e3e3;
}
#s2 .cp_box .inner .desc dl:first-of-type{
  border-top: 1px solid #e3e3e3;
}
#s2 .cp_box .inner .desc dl dt{
  width:140px;
  padding:0 15px;
  font-weight: bold;
}
#s2 .cp_box .inner .desc dl dd{
  width:calc(100% - 140px);
  padding:0 15px;
}
@media screen and (max-width: 760px){
  #s2 .s2_elm{
    grid-template-columns: 1fr;
    margin-bottom: 80px;
    z-index:10;
  }
  #s2 .cp_box .inner{
    padding:30px 25px;
  }
  #s2 .cp_box .inner h5{
    font-size: 22px;
  }
  #s2 .cp_box .inner .cp_title2 dt{
    width:100%;
  }
  #s2 .cp_box .inner .cp_title2 dd{
    width:100%;
  }
  #s2 .cp_box .inner .cp_title2 dd img{
    display:block;
    width:100%;
    max-width:400px;
    margin:0 auto 15px;
  }
  #s2 .cp_p2{
    text-align: center;
    font-size: 18px;
    margin-bottom: 40px;
  }
  #s2 .cp_p3{
    text-align: left;
    font-size: 18px;
    margin-bottom: 40px;
  }
  #s2 .cp_p3 br{
    display:none;
  }
  #s2 .cp_box .inner .desc dl dt{
    width:100%;
    padding:0 0px;
    margin-bottom: 10px;
  }
  #s2 .cp_box .inner .desc dl dd{
    width:100%;
    padding:0 0px;
  }
}
@media screen and (max-width: 680px){
  #s2{
    padding:80px 5px 100px;
  }

}
@media screen and (max-width: 480px){
  #s2{
    padding:60px 5px 60px;
  }
  #s2 .cp_h{
    font-size: 24px;
  }
  #s2 .cp_p1{
    text-align: left;
    font-size: 16px;
    margin-bottom: 30px;
  }
  #s2 .cp_box .inner h5{
    font-size: 18px;
  }
}

/*---------------------------s3-----------------------------------*/
#s3{
  position: relative;
  width:100%;
  padding:80px 15px 100px;
  z-index:15;
}

.trslider .slick-list{
	position: relative;
	display: block;
	overflow: hidden;

}
.trslider{
	position: relative;
	cursor: pointer;
	width:calc(100% - 30px);
	margin:auto;
}
.trslider .slick-track{
	position: relative;
	top: 0;
	left: 0;
	display:-webkit-box;/*--- Androidブラウザ用 ---*/
	display:-ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display: flex;
	justify-content: center;
	align-items:flex-start;
}

.trslider .slick-arrow{
	display: block;
	text-indent: -10000px;
	outline:none;
	line-height:1px;
	font-size:1px;
	height: 40px;
	width: 40px;
	cursor: pointer;
	position: absolute;
	top: calc(50% - 20px);
	left:-15px;
	z-index: 1;
	border: none;
}
.trslider .slick-next{
	left: auto;
	right:-15px;
}
.trslider .slick-arrow:before{
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: calc(50% - 15px);
	border-top: 4px solid rgba(17,185,219,1);
	border-left: 4px solid rgba(17,185,219,1);
}
.trslider .slick-prev:before{
	transform: rotate(-45deg);
	left: calc(50% - 31px);
}
.trslider .slick-next:before{
	transform: rotate(135deg);
	left: calc(50% - 2px);
}

.trslider .pointer{
	display: table;
	margin: 30px auto 0;
}
.trslider .pointer li{
	display: table-cell;
	padding: 0 5px;
}
.trslider .pointer li button{
	display: block;
	text-indent: -10000px;
	outline:none;
	line-height:1px;
	font-size:1px;
	background-color: #bdc9cb;
	width: 6px;
	height: 6px;
	border-radius: 50px;
	border: none;
	cursor: pointer;
  transition: 0.2s ease-in-out;
}
.trslider .pointer .slick-active button{
  width: 30px;
	background-color: #11b9db;
}
.slide1{
  position: relative;
  z-index: 2;
}

#s3 .cbox{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  align-items: center;
}
#s3 .cbox .i{
  position: relative;
  width:52%;
  z-index:1;
}
#s3 .cbox .i img.pc{
  display:block;
  width:100%;
  max-width:860px;
  margin:0 auto;
}
#s3 .cbox .i img.sp{
  display:none;
  width:100%;
  max-width:860px;
  margin:0 auto;
}
#s3 .cbox .t{
  position: relative;
  width:52%;
  z-index:2;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  margin-left: -4%;
  padding:80px 25px 80px 100px;
}
#s3 .cbox .t .label{
  position: absolute;
  top:-30px;
  left:40px;
  color:#fff;
  font-weight: bold;
  font-size: 18px;
  width:240px;
  padding:10px 0;
  text-align: center;
  transform: skewX(-15deg);
  background: #11b9db;
}
#s3 .cbox .t .label span {
  position: relative;
  display: block;
  transform: skewX(15deg);
}
#s3 .cbox .t .label i {
  font-size: 22px;
  margin-left: 5px;
}
#s3 .cbox .t h3{
  font-size: 26px;
  margin-bottom: 30px;
}
#s3 .cbox .t .desc{
  font-size: 16px;
  line-height: 1.8;
}
@media screen and (max-width: 1080px){
  #s3 .cbox{
    flex-wrap: wrap;
  }
  #s3 .cbox .i{
    width:100%;
  }
  #s3 .cbox .t{
    width:90%;
    margin:-30px auto 0;
    padding:80px 50px 80px 50px;
  }
  #s3 .cbox .i img.pc{
    display:none;
  }
  #s3 .cbox .i img.sp{
    display:block;
  }
}

@media screen and (max-width: 680px){
  #s3{
    padding:80px 5px 100px;
  }

}
@media screen and (max-width: 480px){
  #s3{
    padding:60px 5px 60px;
  }
  .trslider{
  	width:calc(100% - 10px);
  }
  .trslider .slick-arrow{
  	height: 20px;
  	width: 20px;
  	top: calc(50% - 10px);
  	left:-15px;
  }
  .trslider .slick-next{
  	left: auto;
  	right:-15px;
  }
  .trslider .slick-arrow:before{
  	width: 16px;
  	height: 16px;
  	top: calc(50% - 8px);
  	border-top: 3px solid rgba(17,185,219,1);
  	border-left: 3px solid rgba(17,185,219,1);
  }
  .trslider .slick-prev:before{
  	transform: rotate(-45deg);
  	left: calc(50% - 11px);
  }
  .trslider .slick-next:before{
  	transform: rotate(135deg);
  	left: calc(50% - 12px);
  }
  .trslider .pointer{
  	margin: 15px auto 0;
  }
  #s3 .cbox .t{
    width:94%;
    margin:-15px auto 0;
    padding:40px 15px 30px 15px;
  }
  #s3 .cbox .t .label{
    top:-20px;
    left:20px;
    font-size: 14px;
    width:140px;
    padding:7px 0;
  }
  #s3 .cbox .t .label i {
    font-size: 16px;
    margin-left: 5px;
  }
  #s3 .cbox .t h3{
    font-size: 20px;
    margin-bottom: 15px;
  }
  #s3 .cbox .t .desc{
    font-size: 14px;
    line-height: 1.6;
  }
}

/*---------------------------s4-----------------------------------*/
#s4{
  position: relative;
  width:100%;
  padding:80px 15px 100px;
  z-index:15;
}
#s4::before {
  content: "";
  position: absolute;
  top: 300px;
  left: 0;
  width: 100%;
  height: calc(100% - 300px);
  background-color: #0ed18e;
  z-index:1;
}
#s4 .cp_box{
  position: relative;
  width:100%;
  max-width:1095px;
  margin: 0 auto;
  padding:4px;
  border:1px solid #77edc4;
  margin-bottom: 60px;
}
#s4 .cp_box:last-of-type{
  margin-bottom: 0px;
}
#s4 .cp_box:before {
    content: "";
    display: block;
    position: absolute;
    left: -4px;
    top: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
    background: url(/newcar/bz4x/images/plus2.svg) left top/7px 7px no-repeat, url(/newcar/bz4x/images/plus2.svg) right top/7px 7px no-repeat, url(/newcar/bz4x/images/plus2.svg) right bottom/7px 7px no-repeat, url(/newcar/bz4x/images/plus2.svg) left bottom/7px 7px no-repeat;
}
#s4 .cp_box .inner{
  width:100%;
  padding:50px;
  background: #fff;
}
#s4 .cp_box .inner .cp_title img{
  display:block;
  width:100%;
  max-width:515px;
  margin:0 auto 40px;
}
#s4 .cp_box .inner .p img{
  display:block;
  width:100%;
  max-width:60px;
  margin:0 auto 25px;
}
#s4 .cp_box .inner .cp_p1{
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color:#0ed18e;
}
#s4 .cp_box .inner .cp_p2{
  font-size: 14px;
  margin-bottom: 40px;
}
#s4 .cp_box .inner .nbox{
  border: 1px solid #e3e3e3;
  padding:25px;
  margin-bottom: 25px;
}
#s4 .cp_box .inner .nbox p{
  font-size: 18px;
  font-weight: bold;
}
#s4 .cp_box .inner .nbox dl{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  align-items: center;
	flex-wrap: wrap;
  padding-top: 30px;
}
#s4 .cp_box .inner .nbox dl dt{
  width:calc(100% - 180px);
  font-size: 14px;
  padding-right: 20px;
}
#s4 .cp_box .inner .nbox dl dd{
  width:180px;
}
#s4 .cp_box .inner .nbox dl dd a{
  width:100%;
  display:block;
  background: #fff;
  border: 1px solid #0ed18e;
  padding:10px 0;
  text-align: center;
  font-size: 14px;
  transition: 0.3s ease-in-out;
}
#s4 .cp_box .inner .nbox dl dd a:hover{
  background:#0ed18e;
  color:#fff;
}
@media screen and (max-width: 1080px){
  #s4::before {
    top: 270px;
    height: calc(100% - 270px);
  }
}
@media screen and (max-width: 860px){
  #s4::before {
    top: 230px;
    height: calc(100% - 230px);
  }
}
@media screen and (max-width: 760px){
  #s4 .cp_box .inner{
    padding:30px 25px;
  }
  #s4 .cp_box .inner .cp_p1{
    text-align: left;
    font-size: 22px;
  }
}
@media screen and (max-width: 680px){
  #s4{
    padding:80px 5px 100px;
  }

}
@media screen and (max-width: 480px){
  #s4{
    padding:60px 5px 60px;
  }
  #s4::before {
    top: 180px;
    height: calc(100% - 180px);
  }
  #s4 .cp_box .inner .cp_title img{
    max-width:235px;
    margin:0 auto 30px;
  }
  #s4 .cp_box .inner .p img{
    max-width:40px;
    margin:0 auto 20px;
  }
  #s4 .cp_box .inner .cp_p1{
    font-size: 18px;
  }
  #s4 .cp_box .inner .cp_p2{
    font-size: 12px;
    margin-bottom: 30px;
  }
  #s4 .cp_box .inner .nbox{
    padding:15px;
    margin-bottom: 20px;
  }
  #s4 .cp_box .inner .nbox p{
    font-size: 16px;
  }
  #s4 .cp_box .inner .nbox dl{
    padding-top: 20px;
  }
  #s4 .cp_box .inner .nbox dl dt{
    width:100%;
    font-size: 14px;
    padding-right: 0px;
    margin-bottom: 15px;
  }
  #s4 .cp_box .inner .nbox dl dd{
    width:100%;
  }
  #s4 .cp_box .inner .nbox dl dd a{
    max-width:130px;
    padding:7px 0;
    font-size: 12px;
    margin-left: auto;
  }
}
@media screen and (max-width: 320px){
  #s4::before {
    top: 150px;
    height: calc(100% - 150px);
  }
}

/*---------------------------s5-----------------------------------*/
#s5{
  position: relative;
  width:100%;
  padding:80px 15px 100px;
  z-index:15;
  background:#0ed18e;
}
#s5::before {
  content: "";
  position: absolute;
  top: 300px;
  left: 0;
  width: 100%;
  height: calc(100% - 300px);
  background-color: #289cff;
  z-index:1;
}
#s5 .s5_elm3{
  position: relative;
  width:100%;
  max-width:860px;
  margin: 0 auto 0px;
  z-index:10;
}
#s5 .s5_elm3 article{
  background: #fff;
}
#s5 .s5_elm3 article a{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
  flex-direction: column;
  height:100%;
}
#s5 .s5_elm3 article .img {
  width: 100%;
  height: auto;
  aspect-ratio: 860 / 479;
  display: block;
}
#s5 .s5_elm3 article .img .thumb {
  overflow: hidden;
  backface-visibility: hidden;
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}
#s5 .s5_elm3 article .img .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1);
  transition: transform 0.5s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#s5 .s5_elm3 article:hover .img .thumb img{
  transform: scale(1.1);
}
#s5 .s5_elm3 article h3{
  font-size: 18px;
  padding:30px 25px;
}

#s5 .s5_elm1{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1px;
  margin-bottom: 80px;
  z-index:10;
}
#s5 .s5_elm1 article{
  background: #fff;
}
#s5 .s5_elm1 article a{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
  flex-direction: column;
  height:100%;
}
#s5 .s5_elm1 article .img {
  width: 100%;
  height: auto;
  aspect-ratio: 409 / 228;
  display: block;
}
#s5 .s5_elm1 article .img .thumb {
  overflow: hidden;
  backface-visibility: hidden;
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}
#s5 .s5_elm1 article .img .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1);
  transition: transform 0.5s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#s5 .s5_elm1 article:hover .img .thumb img{
  transform: scale(1.1);
}
#s5 .s5_elm1 article h3{
  font-size: 18px;
  padding:30px 25px;
}

#s5 .s5_elm2{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 5px;
}

.youtube_short{
 width: 100%;
 max-width: 600px;
 margin: auto;
}
.youtube_short iframe{
 aspect-ratio: 9 / 16;
 width: 100%;
 height: 100%;
}


@media screen and (max-width: 1080px){
  #s5::before {
    top: 270px;
    height: calc(100% - 270px);
  }
}
@media screen and (max-width: 860px){
  #s5::before {
    top: 230px;
    height: calc(100% - 230px);
  }
  #s5 .s5_elm1{
    grid-template-columns: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 20px;
    margin-bottom: 80px;
  }
  #s5 .s5_elm2{
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
  }
}
@media screen and (max-width: 680px){
  #s5{
    padding:80px 5px 100px;
  }
}
@media screen and (max-width: 480px){
  #s5{
    padding:60px 5px 60px;
  }
  #s5::before {
    top: 180px;
    height: calc(100% - 180px);
  }
  #s5 .s5_elm1 article h3{
    font-size: 16px;
    padding:20px 15px;
  }
  #s5 .s5_elm3 article h3{
    font-size: 16px;
    padding:20px 15px;
  }
}
/*---------------------------s6-----------------------------------*/
#s6{
  position: relative;
  width:100%;
  padding:80px 15px 200px;
  z-index:15;
  background:#289cff;
}
#s6::before {
  content: "";
  position: absolute;
  top: 300px;
  left: 0;
  width: 100%;
  height: calc(100% - 300px);
  background-color: #fff;
  z-index:1;
}

#s6 .s6_elm{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
	flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 100px;
}
#s6 .s6_elm article{
  position: relative;
  width:48%;
  padding:50px 45px;
  margin-bottom: 50px;
  border:1px solid #76bff1;
}
#s6 .s6_elm article:before {
    content: "";
    display: block;
    position: absolute;
    left: -4px;
    top: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
    background: url(/newcar/bz4x/images/plus.svg) left top/7px 7px no-repeat, url(/newcar/bz4x/images/plus.svg) right top/7px 7px no-repeat, url(/newcar/bz4x/images/plus.svg) right bottom/7px 7px no-repeat, url(/newcar/bz4x/images/plus.svg) left bottom/7px 7px no-repeat;
}
#s6 .s6_elm article dl{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  align-items: center;
  margin-bottom: 30px;
}
#s6 .s6_elm article dl dt{
  width:calc(100% - 100px);
  font-size: 24px;
  font-weight: bold;
}
#s6 .s6_elm article dl dt span{
  font-size: 14px;
}
#s6 .s6_elm article dl dd{
  width:100px;
  font-size: 14px;
  text-align: right;
}
#s6 .s6_elm article .ms{
  font-size: 18px;
  line-height: 2.0;
}
#s6 .s6_elm .areabtn{
  width:100%;
}
#s6 .s6_elm .areabtn > div{
  display:block;
  width:100%;
  max-width:316px;
  margin:0 auto;
  color:#fff;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding:25px 5px;
  background: #0067ae;
  border:1px solid #02548d;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
#s6 .s6_elm .areabtn > div:hover{
  background:#02548d;
}

#s6 .found{
  width:100%;
  max-width:980px;
  border: 10px solid #1388d8;
  padding:80px 20px;
  margin:  0 auto;
  text-align: center;
}
#s6 .found h3{
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 25px;
}
#s6 .found .p1{
  font-size: 18px;
  margin-bottom: 12px;
}
#s6 .found .p2{
  font-size: 14px;
  color:#656565;
}
@media screen and (max-width: 1080px){
  #s6::before {
    top: 270px;
    height: calc(100% - 270px);
  }
  #s6 .s6_elm article{
    padding:40px 20px;
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 860px){
  #s6::before {
    top: 230px;
    height: calc(100% - 230px);
  }
  #s6 .s6_elm article{
    width:100%;
    padding:40px 20px;
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 680px){
  #s6{
    padding:80px 5px 150px;
  }
  #s6 .found{
    padding:50px 20px;
    text-align: left;
  }
}
@media screen and (max-width: 480px){
  #s6{
    padding:60px 5px 100px;
  }
  #s6::before {
    top: 180px;
    height: calc(100% - 180px);
  }
  #s6 .s6_elm article{
    padding:30px 15px;
    margin-bottom: 30px;
  }
  #s6 .s6_elm article dl{
    margin-bottom: 15px;
  }
  #s6 .s6_elm article dl dt{
    font-size: 20px;
  }
  #s6 .s6_elm article dl dt span{
    font-size: 12px;
  }
  #s6 .s6_elm article .ms{
    font-size: 16px;
    line-height: 1.8;
  }
  #s6 .found{
    padding:30px 20px;
  }
  #s6 .found h3{
    font-size: 18px;
    margin-bottom: 15px;
  }
  #s6 .found .p1{
    font-size: 16px;
    margin-bottom: 8px;
  }
  #s6 .found .p2{
    font-size: 12px;
  }
}
/*---------------------------cpnav-----------------------------------*/
#cpnav{
  position: fixed;
  bottom:0;
  left:0;
  width:100%;
  z-index:20;
  opacity: 0;
  pointer-events: none;
}
.scrolled #cpnav{
  opacity: 1;
  pointer-events: auto;
}
#cpnav .inner{
  position: relative;
  width:100%;
  max-width:800px;
  margin-left: auto;
}
#cpnav .inner .i{
  position: absolute;
  top:0;
  left:-200px;
  width:252px;
  z-index:2;
}
#cpnav .inner ul{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  z-index:1;
}
#cpnav .inner ul li a{
  position: relative;
  display:block;
  background: #dfdfdf;
  padding:25px 25px 20px 60px;
  color:#fff;
  font-weight: bold;
  font-size: 22px;
  transition: 0.3s ease-in-out;
}
#cpnav .inner ul li a span{
  display:block;
  font-size: 18px;
}
#cpnav .inner ul li.cp1 a{
  background: #0067ae;
  border-radius: 6px 0 0 0;
}
#cpnav .inner ul li.cp2 a{
  background: #0ed18e;
}
#cpnav .inner ul li.cp1 a:hover{
  background: #025a97;
}
#cpnav .inner ul li.cp2 a:hover{
  background: #09b67a;
}
#cpnav .inner ul li a::before,
#cpnav .inner ul li a::after{
  position: absolute;
  content:"";
}
#cpnav .inner ul li a::before{
  width:23px;
  height:23px;
  background: #fff;
  border-radius: 50px;
  top:calc(50% - 8px);
  right: 20px;
}
#cpnav .inner ul li a::after{
  top:calc(50% - 1px);
  right:28px;
  width:6px;
  height:6px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
}
#cpnav .inner ul li.cp1 a::after{
  border-color:#025a97;
}
#cpnav .inner ul li.cp2 a::after{
  border-color:#09b67a;
}
#cpnavstop{
  display:block;
  height:60px;
  background: #fff;
}
@media screen and (max-width: 980px){
  #cpnav .inner{
    max-width:700px;
  }
}
@media screen and (max-width: 860px){
  #cpnav .inner{
    max-width:100%;
  }
  #cpnav .inner .i{
    display:none;
  }
  #cpnav .inner ul li.cp1 a{
    border-radius: 0px 0 0 0;
  }
}
@media screen and (max-width: 600px){
  #cpnav .inner ul li a{
    padding:15px 25px 15px 25px;
    font-size: 20px;
  }
  #cpnav .inner ul li a span{
    font-size: 16px;
  }
}
@media screen and (max-width: 480px){
  #cpnav .inner ul li a{
    padding:15px 25px 15px 15px;
    font-size: 16px;
  }
  #cpnav .inner ul li a span{
    font-size: 12px;
  }
  #cpnav .inner ul li a::before{
    width:16px;
    height:16px;
    top:calc(50% - 8px);
    right: 15px;
  }
  #cpnav .inner ul li a::after{
    top:calc(50% - 3px);
    right:20px;
    width:5px;
    height:5px;
  }
  #cpnavstop{
    height:118px;
  }
}
/*---------------------------mlpopbox-----------------------------------*/
.mlpopbox{
  position: fixed;
	top: 0;
	left: 0;
	width: 100%;
  height: 100vh;
  padding:15px 15px 0;
  opacity: 0;
  pointer-events: none;
  display:none;
	transition: 0.4s ease-in-out;
}
.mlpopon .mlpopbox{
  opacity: 1;
  display:block;
  pointer-events: auto;
}
#mlpopboxshade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  z-index: 30;
  pointer-events: none;
  transition: 0.4s ease-in-out;
}
.mlpopon #mlpopboxshade {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(10px);
}
.mlpopon header{
  z-index: 1;
}
.mlpopon #sc{
  display:none;
}
.mlpopbox_wrap{
  position: relative;
  width: 100%;
  height: calc(100vh - 30px);
  background: #fff;
  max-width:980px;
  margin:0 auto;
}
.mlpopbox_inner{
  width: 100%;
  height:100%;
  pointer-events: auto;
  overflow-y: scroll;
  padding-bottom: 170px;
  color:#000;
}
.mlpopbox_wrap ::-webkit-scrollbar {
	 width: 10px;
}
.mlpopbox_wrap ::-webkit-scrollbar-track {
 border-radius: 0px;
 box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}
.mlpopbox_wrap ::-webkit-scrollbar-thumb {
 background-color: rgba(4, 134, 160, 1);
 border-radius: 0px;
 box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}
.mlpopbox_wrap .close{
  position: absolute;
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:120px;
  bottom:0;
  left:0;
  cursor: pointer;
  background: #f0eeee;
  border-top: 1px solid #cfcfcf;
  font-size: 18px;
  font-weight: bold;
  transition: 0.3s ease-in-out;
}
.mlpopbox_wrap .close:hover{
  background: #cdcdcd;
}

.mlpopbox_inner h2{
  padding:40px 50px;
  font-size: 24px;
  border-bottom: 1px solid #cfcfcf;
}
.mlpopbox_inner .proj{
  padding:50px;
}
.mlpopbox_inner .ans{
  padding:40px 15px;
  border:10px solid #f1f4f5;
  text-align: center;
  margin-bottom: 20px;
}
.mlpopbox_inner .ans .p1{
  font-size: 20px;
  font-weight: bold;
}
.mlpopbox_inner .ans .p2{
  font-size: 18px;
  text-align: left;
}
.mlpopbox_inner .ans .p1 span{
  font-size: 14px;
  font-weight: normal;
}
.mlpopbox_inner .b1{
  text-align: center;
  font-size: 14px;
  margin-bottom: 40px;
}
.mlpopbox_inner .b2{
  font-size: 14px;
  margin-bottom: 50px;
}
.mlpopbox_inner .b2 a{
  text-decoration: underline;
  color:#003641;
}
.mlpopbox_inner .b3{
  font-size: 12px;
  margin-bottom: 25px;
  color:#646464;
}
.mlpopbox_inner .b4{
  font-size: 16px;
  margin-bottom: 30px;
}
.mlpopbox_inner h3{
  color:#003641;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 25px;
}
.mlpopbox_inner h3 span{
  font-size: 16px;
  font-weight: normal;
}

.mltablebox{
  margin-bottom: 30px;
}
.btable1,
.btable2,
.btable3,
.btable4{
  width:100%;
  border-left: 1px solid #ccc;
}
.btable1 td,
.btable1 th,
.btable2 td,
.btable2 th,
.btable3 td,
.btable3 th,
.btable4 td,
.btable4 th{
  vertical-align: middle;
  text-align: center;
  padding:20px 5px;
}
.btable1 thead,
.btable2 thead,
.btable3 thead,
.btable4 thead{
  background: #003641;
  color:#fff;
}
.btable1 thead .th1{
  width:28%;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable1 thead .th2{
  width:21%;
  padding:5px 5px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable1 thead .th3{
  width:51%;
  padding:5px 5px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable1 thead .th4{
  width:29%;
  padding:5px 5px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable1 thead .th5{
  width:22%;
  padding:5px 5px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable1 tbody th{
  background: #003641;
  color:#fff;
  font-size: 22px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable1 tbody .td1,
.btable2 tbody .td1{
  color:#167e7d;
  font-size: 22px;
  background: #f1f4f5;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable1 tbody .td1 span,
.btable2 tbody .td1 span{
  font-size: 14px;
}
.btable1 tbody .td2,
.btable2 tbody .td2{
  font-size: 22px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable1 tbody .td2 .jp,
.btable2 tbody .td2 .jp{
  font-size: 14px;
}
.btable1 tbody .td3{
  font-size: 22px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable1 tbody .td3 span{
  font-size: 14px;
}
.btable1 tbody .td4,
.btable2 tbody .td3{
  font-size: 22px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable1 tbody .td4 .jp,
.btable1 tbody .td4 .ten2,
.btable2 tbody .td3 .jp,
.btable2 tbody .td3 .ten2{
  font-size: 14px;
}

.btable2 thead .th1{
  width:33.33333%;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable2 thead .th2{
  width:66.66666%;
  padding:5px 5px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable2 thead .th3{
  width:33.33333%;
  padding:5px 5px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable2 thead .th4{
  width:33.33333%;
  padding:5px 5px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable3 thead .th1{
  width:33.3333%;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable3 thead .th2{
  width:66.66666%;
  padding:5px 5px;
  border-right: 1px solid #ccc;
}
.btable3 thead .th3,
.btable3 thead .th4{
  width:33.3333%;
  padding:5px 5px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable3 tbody .td1{
  color:#167e7d;
  font-weight: bold;
  width:10.33333%;
  font-size: 16px;
  background: #f1f4f5;
  writing-mode: vertical-rl;
  border-bottom: 1px solid #ccc;
}
.btable3 tbody .td2{
  color:#167e7d;
  font-weight: bold;
  width:23%;
  font-size: 16px;
  background: #f1f4f5;
  text-align: left;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable3 tbody .td2.pp{
  padding-left: 15px;
}
.btable3 tbody .td3,
.btable3 tbody .td4{
  color:#167e7d;
  font-weight: bold;
  font-size: 40px;
  line-height: 1.0;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable4 thead .th1,
.btable4 thead .th2,
.btable4 thead .th3{
  width:33.3333%;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable4 tbody .td1{
  color:#167e7d;
  font-weight: bold;
  font-size: 16px;
  background: #f1f4f5;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable4 tbody .td2{
  color:#167e7d;
  font-weight: bold;
  width:7%;
  font-size: 16px;
  background: #f1f4f5;
  writing-mode: vertical-rl;
  border-bottom: 1px solid #ccc;
}
.btable4 tbody .td3{
  color:#167e7d;
  font-weight: bold;
  width:7%;
  font-size: 16px;
  background: #f1f4f5;
  writing-mode: vertical-rl;
  border-bottom: 1px solid #ccc;
}
.btable4 tbody .td4{
  color:#167e7d;
  font-weight: bold;
  width:19.33333%;
  font-size: 16px;
  background: #f1f4f5;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable4 tbody .td5{
  color:#167e7d;
  font-weight: bold;
  width:26.33333%;
  font-size: 16px;
  background: #f1f4f5;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.btable4 tbody .td6{
  font-size: 18px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.mlpopbox_inner .proj .bdl{
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
	flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding:20px 0;
  border-bottom: 1px solid #ccc;
}
.mlpopbox_inner .proj .bdl dt{
  width:34%;
}
.mlpopbox_inner .proj .bdl dd{
  width:63%;
}
.mlpopbox_inner .proj .bdl dd h4{
  color:#003641;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.mlpopbox_inner .proj .bdl dd p{
  font-size: 16px;
}
.mlpopbox_inner .tmimg img{
  display:block;
  width:100%;
  max-width:1200px;
  margin:0 auto 20px;
}
.mlpopbox_inner .tm_p1{
  font-size: 18px;
  margin-bottom: 15px;
}
.mlpopbox_inner .tm_p2{
  font-size: 12px;
  margin-bottom: 50px;
  color:#646464;
}
.mlpopbox_inner .tm_p3{
  font-size: 12px;
  margin-bottom: 30px;
  color:#646464;
}
@media screen and (max-width: 760px){
  .mlpopbox_inner{
    padding-bottom: 150px;
  }
  .mlpopbox_wrap .close{
    height:100px;
  }
  .mltablebox{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .btable1{
    width:1000px;
  }
  .btable2{
    width:900px;
  }
  .btable3{
    width:600px;
  }
  .btable4{
    width:600px;
  }
}
@media screen and (max-width: 680px){
  .mlpopbox_inner h2{
    padding:20px 25px;
    font-size: 22px;
  }
  .mlpopbox_inner .proj{
    padding:40px 25px;
  }
  .mlpopbox_inner .ans .p1{
    font-size: 18px;
  }
  .mlpopbox_inner .ans .p1 br{
    display:none;
  }
  .btable1 tbody th,
  .btable1 tbody .td1,
  .btable2 tbody .td1,
  .btable1 tbody .td2,
  .btable2 tbody .td2,
  .btable1 tbody .td3,
  .btable1 tbody .td4,
  .btable2 tbody .td3{
    font-size: 20px;
  }
  .btable1 tbody .td1 span,
  .btable2 tbody .td1 span,
  .btable1 tbody .td2 .jp,
  .btable2 tbody .td2 .jp,
  .btable1 tbody .td3 span,
  .btable1 tbody .td4 .jp,
  .btable1 tbody .td4 .ten2,
  .btable2 tbody .td3 .jp,
  .btable2 tbody .td3 .ten2{
    font-size: 12px;
  }
  .mlpopbox_inner .ans .p2{
    font-size: 16px;
  }
  .mlpopbox_inner .tm_p1{
    font-size: 16px;
  }
}
@media screen and (max-width: 480px){
  .mlpopbox_inner{
    padding-bottom: 120px;
  }
  .mlpopbox_wrap .close{
    height:70px;
  }
  .mlpopbox_inner h2{
    padding:20px 15px;
    font-size: 20px;
  }
  .mlpopbox_inner .proj{
    padding:40px 15px;
  }
  .mlpopbox_inner .ans{
    padding:25px 15px;
  }
  .mlpopbox_inner .ans .p1{
    font-size: 16px;
  }
  .btable1{
    width:650px;
  }
  .btable2{
    width:500px;
  }
  .btable3{
    width:500px;
  }
  .btable4{
    width:500px;
  }
  .btable1 tbody th,
  .btable1 tbody .td1,
  .btable2 tbody .td1,
  .btable1 tbody .td2,
  .btable2 tbody .td2,
  .btable1 tbody .td3,
  .btable1 tbody .td4,
  .btable2 tbody .td3{
    font-size: 18px;
  }
  .mlpopbox_inner .proj .bdl dt{
    width:100%;
    margin-bottom: 20px;
  }
  .mlpopbox_inner .proj .bdl dt img{
    display:block;
    width:100%;
    margin:0 auto;
  }
  .mlpopbox_inner .proj .bdl dd{
    width:100%;
  }
}
footer{
  background: #fff;
  position: relative;
  z-index:5;
}
/* ============================================
   背景アニメーション
   ============================================ */
main{
  position: relative;
}
.bg-animations {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

/* 流体球体 */
.fluid-sphere {
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle at center, var(--accent-light) 0%, var(--accent-cyan) 30%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  animation: floatFluid 25s ease-in-out infinite;
  top: 10%;
  left: -10%;
}

@keyframes floatFluid {
  0%,
  100% {
    opacity: 0.4;
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(30vw, 20vh) scale(1.1);
  }
  50% {
    transform: translate(50vw, -10vh) scale(0.9);
  }
  75% {
    opacity: 0.6;
    transform: translate(20vw, 30vh) scale(1.05);
  }
}



/* テックライン */
.tech-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  transform: rotate(145deg);
}

.tech-lines::before,
.tech-lines::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  height: 1px;
  width: 100%;
  animation: scanLine 8s linear infinite;
}

.tech-lines::before {
  top: 20%;
}

.tech-lines::after {
  top: 60%;
  animation-delay: 4s;
}

@keyframes scanLine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* グラデーション球体 */
.gradient-orbs {
  position: absolute;
  width: 100%;
  height: 100%;
}

.gradient-orbs::before,
.gradient-orbs::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-blue) 0%, transparent 70%);
  filter: blur(60px);
  animation: pulse 6s ease-in-out infinite;
}

.gradient-orbs::before {
  top: 10%;
  right: 5%;
}

.gradient-orbs::after {
  bottom: 10%;
  left: 5%;
  animation-delay: 3s;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.6;
  }
}

/* Floating particles scattered across screen that float in place */
.particle {
  position: absolute;
  background: var(--accent-light);
  border-radius: 50%;
  z-index: 0;
}

.p-1 {
  top: 20%;
  left: 10%;
  width: 8px;
  height: 8px;
  opacity: 0.7;
  animation: floatInPlace 6s ease-in-out infinite;
}

.p-2 {
  top: 40%;
  right: 15%;
  width: 12px;
  height: 12px;
  opacity: 0.6;
  animation: floatInPlaceSlow 8s ease-in-out infinite 1s;
}

.p-3 {
  bottom: 30%;
  left: 20%;
  width: 8px;
  height: 8px;
  opacity: 0.8;
  animation: floatInPlace 6s ease-in-out infinite 2s;
}

.p-4 {
  top: 60%;
  right: 25%;
  width: 8px;
  height: 8px;
  opacity: 0.7;
  animation: floatInPlaceSlow 8s ease-in-out infinite 0.5s;
}

.p-5 {
  bottom: 50%;
  left: 40%;
  width: 12px;
  height: 12px;
  opacity: 0.6;
  animation: floatInPlace 6s ease-in-out infinite 1.5s;
}

.p-6 {
  top: 35%;
  left: 55%;
  width: 10px;
  height: 10px;
  opacity: 0.65;
  animation: floatInPlaceSlow 7s ease-in-out infinite 2.5s;
}

.p-7 {
  bottom: 40%;
  right: 35%;
  width: 9px;
  height: 9px;
  opacity: 0.75;
  animation: floatInPlace 6s ease-in-out infinite 3s;
}

.p-8 {
  top: 75%;
  left: 65%;
  width: 11px;
  height: 11px;
  opacity: 0.7;
  animation: floatInPlaceSlow 8s ease-in-out infinite 0.8s;
}

@keyframes floatInPlace {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes floatInPlaceSlow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}