/* CSS Document */
/*------------------------------------------------------

INDEX

------------------------------------------------------*/
img {
  display: block;
  margin: 0 auto; }

body {
  background-color: #000; }

#kv {
  position: relative;
  max-width: 100vw;
  max-height: 80vh;
  margin: auto;
  overflow: hidden;
  text-align: center; }

#video {
  width: 100%;
  max-width: 1200px;
  height: 80vh;
  background-color: #000;
  background-position: center top;
  background-size: cover;
  margin-top: 0;
  z-index: -1; }

.kv-index {
  display: none;
  z-index: -2; }
  .kv-index img {
    width: 100%;
    max-width: 1600px;
    max-height: 84vh;
    -o-object-fit: contain;
    object-fit: contain; }

@media screen\0 {
  .kv-index img {
    width: auto; } }

.kv-arrows {
  display: none; }

.top-carousel li {
  overflow: hidden; }
  .top-carousel li img {
    width: 100%;
    height: auto;
    max-height: 640px;
    -o-object-fit: contain;
    object-fit: contain; }

.indexttl {
  color: #fff;
  display: block;
  font-size: 2.4rem;
  letter-spacing: 0.6rem;
  margin-bottom: 80px;
  padding-bottom: 30px;
  text-align: center; }

.indexttl::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(40px);
  border-bottom: 4px solid #fff;
  content: '';
  margin: 0 auto; }

.index01-item-01 {
  background-image: url("../img/img_kv_8k4k.jpg");
  background-position: center;
  background-size: cover; }

.index01-item-02 {
  background-image: url("../img/img_kv_hdr.jpg");
  background-position: center;
  background-size: cover; }

.index01-item-03 {
  background-image: url("../img/img_kv_adv.jpg");
  background-position: center;
  background-size: cover; }

.index01-item-04 {
  background-image: url("../img/img_kv_conv.jpg");
  background-position: center;
  background-size: cover; }

.index01-item-05 {
  background-image: url("../img/img_kv_laser.jpg");
  background-position: center;
  background-size: cover; }

  .index01-item-ttl {
  font-size: 3.6rem;
  font-weight: 600; }
  .index01-item-ttl a {
    width: 100%;
    height: 320px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    letter-spacing: 0.5rem; }
    .index01-item-ttl a span {
      width: 70%;
      background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.5)));
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 50%);
      background-position: 0 0;
      background-size: 200% auto;
      display: block;
      padding: 20px 40px;
      -webkit-transition: 0.4s;
      transition: 0.4s; }
  .index01-item-ttl a:hover {
    background-color: rgba(0, 0, 0, 0);
    opacity: 1;
    -webkit-transition: 0.7s;
    transition: 0.7s; }
    .index01-item-ttl a:hover span {
      background-position: -100% 0; }

.index02-list {
  color: #fff;
  text-align: center; }
  .index02-list dt img {
    width: 100%;
    max-width: 288px; }
  .index02-list dt span {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.3rem;
    margin: 20px 0 0; }
  .index02-list p {
    font-size: 1.4rem; }

#index02 {
	padding-bottom:120px;
}

#note {
	margin-top:0px;
	padding-top:0px;
	padding-bottom:120px;
	color:#000000;
	background-color:#ffffff;
}

#note .notes {
	text-indent:0rem;
}

#note ul.notes {
	list-style:disc;
	padding-left:1.5rem;
}

.gnav-item .fortop {
	display: block;
}


#concept {
	color:#ffffff;
}

#concept h3 {
	font-size: 200%;
	text-align: center;
	max-width: 600px;
	margin: 20px auto;
}

#concept .concept_bg {
	padding:40px 0px;
	background-image:url(../img/bg_concept.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}

#concept p {
	width:75%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#concept figure {
	width:60%;
	margin-left:auto;
	margin-right:auto;
	padding-top:40px;
}

#concept img {
	width:100%;
}

.forpc {
	display:block;
}

.forsp {
	display:none;
}

.prdbox {
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	margin-bottom:60px;
	color:white;
}

.prdbox .prdbox_model {
	width:15%;
	margin-right:2%;
}

.prdbox .prdbox_model p {
	font-size:180%;
    margin-top: 0.8em;
}

.prdbox .prdbox_pict {
	width:25%;
	margin-right:2%;
}

.prdbox .prdbox_feat {
	width:55%;
}

.prdbox figure {
	width:100%;
}

.prdbox img {
	width:100%;
}

.prdbox ul.prdbox_list {
	margin-left:1em;
	padding-left:1em;
	color:#f4ba1c;
	list-style-type:disc;
}

.prdbox ul.prdbox_list li {
	/*padding-left:1em;*/
	color:#ffffff;
}

.prdbox ul.prdbox_logo {
	display:flex;
	justify-content:flex-end;
	flex-wrap:wrap;
}

.prdbox ul.prdbox_logo li {
	margin-left:1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#spec {
	margin-bottom:0px;
	color:#000000;
	background-color:#ffffff;
}

.specarea {
	background-color:#ffffff;
}

@media only screen and (max-width: 800px) {
  .index02-list dt img {
    max-width: 243px; } }

@media only screen and (max-width: 740px) {
  .indexttl {
    font-size: 1.6rem;
    letter-spacing: 0.5rem;
    margin-bottom: 40px;
    padding-bottom: 10px; }
  .indexttl::before {
    width: 20px;
    border-bottom: 2px solid #fff;
    content: '';
    margin: 0 auto; }
  .index01-item-ttl {
    font-size: 2.2rem; }
    .index01-item-ttl a {
      height: 180px;
      text-align: left; }
      .index01-item-ttl a span {
        width: 100%; }
  .index01-item-ttl::before {
    position: absolute;
    right: 0;
    bottom: 0;
    border-right: 40px solid #b48c3c;
    border-top: 40px solid transparent;
    content: '';
    opacity: 0.5;
    z-index: 100; }
  .index01-item-ttl::after {
    position: absolute;
    right: 6px;
    bottom: 3px;
    color: #b48c3c;
    color: #fff;
    content: '\f105';
    display: block;
    font-family: 'FontAwesome';
    font-size: 1.4rem;
    z-index: 101; }
  .index02-item {
    display: block; }
  .btn-more {
    width: 60%;
    margin: 40px auto 0; } }

@media only screen and (max-width: 567px) {
  .kv-index {
    min-height: 90vh;
    display: none; }
    .kv-index img {
      width: 100%;
      max-height: 90vh; }
  .kv-arrows {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 40px;
    height: 55px;
    display: block;
    margin-left: -20px; }
  .kv-arrows path {
    -webkit-animation: arrow 2s infinite;
    animation: arrow 2s infinite;
    fill: transparent;
    stroke: #b48c3c;
    stroke-width: 1px; }
	
	#concept figure {
		width:90%;
	}
	
	.forpc {
		display:none;
	}
	
	.forsp {
		display:block;
	}

    .prdbox {
        margin-bottom: 80px;
    }
    
    .prdbox:last-child {
        margin-bottom: 0;
    }
	.prdbox .prdbox_model {
		width:35%;
        margin-right: 10%;
	}
	
	.prdbox .prdbox_model p {
		font-size:160%;
	}
	
	.prdbox .prdbox_pict {
		width:50%;
		margin-right:0px;
	}
	
	.prdbox .prdbox_feat {
		width:100%;
        margin-top: 1em;
	}
	
    .prdbox ul.prdbox_logo {
        justify-content: flex-start;
    }
	.prdbox ul.prdbox_logo li {
		margin-bottom:0.5em;
	}
    
    .prdbox ul.prdbox_list {
        margin-top: 0.5em;
    }

	
	
  @keyframes arrow {
    0% {
      opacity: 0; }
    40% {
      opacity: 1; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes arrow {
    0% {
      opacity: 0; }
    40% {
      opacity: 1; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  .kv-arrows path.a1 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s; }
  .kv-arrows path.a2 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s; }
  .kv-arrows path.a3 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s; } }