@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-style:normal;
font-size: 100%;
vertical-align: top;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

html{
  overflow-y: scroll;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

input, textarea{
margin: 0;
padding: 0;
}

ol, ul{
  list-style:none;
}

table{
  border-collapse: collapse;
  border-spacing:0;
}

caption, th{
  text-align: left;
}
a{
  text-decoration: none;
	    cursor: pointer;
}
a:focus {
outline:none;
}
img{
  max-width: 100%;
}
.pc-only { display: block; }
.sp-only { display: none!important; }

html,body,h1,h2,h3,h4,h5,ul,ol,dl,p,dd{
margin:0;
padding:0;
list-style:none;
font-size:14px;
line-height:1em;
}

a[href^="tel:"] {
  pointer-events: none;
}
/*-------------------------------------------
font
--------------------------------------------*/
body{
 font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight: 500;
}
h2{
 font-family: 'Open Sans', sans-serif;
 font-style: italic;
 font-weight: 800;
 font-size: 85px;
}
.header > div ul li span,
.telnamber p span,
.sec02 .right .sectext04,
section .countwrap p,
section .countwrap .count{
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
}
/*-------------------------------------------
wrap
--------------------------------------------*/
.allWrap{
  display: flex;
  justify-content: center;
}
.contentsWrap{
	width: 1400px;
	margin: 0 auto;
}

/*-------------------------------------------
header
--------------------------------------------*/
.header{
	display:block;
	overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 8px;
  min-width: 1000px;
}
.header a.logo{
	float: left;
margin-top: 5px;
}
.header a.logo img{
	width: 270px;
}
.header > div{
	float: right;
	overflow: hidden;
}
.header > div ul{
	float: left;
  position: relative;
  padding-left: 26px;
  overflow: hidden;
margin-top: 8px;
}
.header > div ul:before{
  content:"";
  background: url("/corp/kte/new-product/img/icon_tel02.svg");
  background-size: 19px;
  width: 19px;
  height: 25px;
  position: absolute;
  top: 0;
  left: 0;
}
.header > div ul li{
  color: #595858;
  font-size: 14px;
  float: left;
  border-right:1px solid #595858;
  line-height: 1.4em;
  font-weight: bold;
  margin-right: 5px;
      padding-right: 5px;
}
.header > div ul li:last-child{
    border-right:none;
}
.header > div ul li span{
  display: block;
  font-size: 22px;
}

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .header > div ul li{
      line-height: 1.4em;
  }
}


.header > div p{
	float: right;
}
.logo02 img{
	width: 226px;
}

/*-------------------------------------------
mvarea
--------------------------------------------*/
.mvarea{
	position: relative;
height: 637px;
}

.mvarea .videowrap{
	overflow: hidden;
}
video {
  width: 100%;
}
.mvarea .videowrap::after {
	 content: "";
	 display: block;
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 left: 0;
	 right: 0;
	 top: 0;
	 bottom: 0;
	 margin: auto;
   background: rgba(255, 2, 0, 0.62);
	 z-index: 0;
}

.mvarea .mvitem {
  position: absolute;
  top: 0;
  left: 0;
	right: 0;
	margin: auto;
	width: 950px;
  height: 100%;
}
.mvarea .mvitem h1{
	font-size: 50px;
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 64px;
	left: 0;
}
.mvarea .mvitem .mvimg01{
	position: absolute;
	top: 139px;
	left: 0;
}
.mvarea .mvitem .mvimg01 img{
	width: 624px;
}
.mvarea .mvitem .mvimg02{
	position: absolute;
	top: 20px;
	right: 0;
}
.mvarea .mvitem .mvimg02 img{
	width: 313px;
}
/*-------------------------------------------
section
--------------------------------------------*/
section{
	overflow: hidden;
}
section h3{
	font-size: 27px;
	line-height: 1.2em;
}

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, section h3 {
		line-height: 1em;
		padding-top: 5px;
  }
}

section > div{
	margin-top: 30px;
	overflow: hidden;
}
section .left{
	float: left;
}
section .right{
	float: right;
}
section .left .sectext01,
section .left .countwrap{
	color: #d5000c;
}
section .right .sectext01,
section .right .countwrap,
section .right .sectext04{
	color: #fff;
}
.sectext01{
	font-size: 25px;
	font-weight: bold;
}
.sectext01 span{
	font-size: 60px;
	display: block;
	line-height: 1em;
	margin-top: 7px;
}
.sectext02{
	margin-top: 15px;
	font-size: 16px;
	line-height: 1.8em;
}
.sectext03{
	margin-top: 20px;
	font-size: 13px;
}
.sectext04{
	font-size: 80px;
}

section .countwrap{
	overflow: hidden;
	margin-top: -25px;
}
section .countwrap .count{
	font-size: 200px;
	float: left;
	line-height: 1;
}
section .countwrap p{
	float: left;
	font-size: 100px;
	text-align: center;
	margin-top: 30px;
}
section .countwrap p span{
	display: block;
  font-size: 35px;
  line-height: 1;
}

/*-------------------------------------------
sec01
--------------------------------------------*/
.sec01{
	background: url("/corp/kte/new-product/img/bg01_pc.png");
	position: relative;
	margin-top: -110px;
padding: 76px 250px 129px;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .sec01{
	padding: 76px 250px 124px;
  }
}
.sec01 h2{
	color: #92826e;
    background: -webkit-linear-gradient(0deg, #b5afab, #92826e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sec01 .left{
	width: 330px;
}
.sec01 .right{
	width: 550px;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .sec01 .sectext01{
		padding-top: 5px;
  }
}
.sec01 .countwrap{
  position: relative;
}
.sec01 .countwrap p{
  position: absolute;
bottom: 15px;
right: 0;
}

.sectext01 span:first-child{
    font-size: 25px;
    font-weight: bold;
}
.sec01 .right .sectext03{
	overflow: hidden;
}
.sec01 .right .sectext03 img{

}
.sec01 .right .sectext03 p{
	float: right;
	width: 280px;
	font-size: 12px;
	line-height: 1.4em;
}

.sec01 .right .sectext03 span{
	text-indent: -1em;
	display: block;
}


/*-------------------------------------------
sec02
--------------------------------------------*/
.sec02{
	background: url("/corp/kte/new-product/img/bg02_pc.png");
	position: relative;
	margin-top: -69px;
  padding: 0 250px 143px;
	color: #fff;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .sec02{
  padding: 0 250px 135px;
  }
}


.sec02 h2{
	color: rgba(255, 255, 255, 0.6);
	text-align: right;
}
.sec02 h3 {
  line-height: 1.4em;
}
.sec02 .right{
	margin-top: 5px;
	width: 330px;
}
.sec02 .left{
	margin-top: 20px;
	width: 550px;
}
.sec02 .left .sectext03{
	overflow: hidden;
	    position: relative;
	    margin-top: 10px;
}
.sec02 .left .sectext03 img{

}
.sec02 .left .sectext03 p{
	float: right;
	    width: 415px;
	    font-size: 12px;
	    line-height: 1.4em;
	    position: absolute;
	    bottom: 0;
	    right: 0;
}

.sec02 .left .sectext03 span{
	text-indent: -1em;
	display: block;
}

.sec02 .countwrap p {
    margin-top: 60px;
}
.sec02 .countwrap p span{
	font-size: 27px;
	font-weight: normal;
}

.sec02 .right .sectext04{
	font-size: 70px;
	text-align: center;
	margin-top: -34px;
}
/*-------------------------------------------
sec03
--------------------------------------------*/
.sec03{
	background: url("/corp/kte/new-product/img/bg03_pc.png");
	position: relative;
	    margin-top: -73px;
	    padding: 0 250px 91px;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .sec03{
	    padding: 0 250px 90px;
  }
}
.sec03 h2{
	color: #92826e;
    background: -webkit-linear-gradient(0deg, #b5afab, #92826e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	    margin-top: -14px;
}
.sec03 > div{
    margin-top: 10px;
}
.sec03 .left{
	margin-top: 5px;
	width: 330px;
}
.sec03 .right{
	width: 550px;
}
.sec03 .countwrap{
	position: relative;
}
.sec03 .countwrap p{
	position: absolute;
    bottom: 15px;
	right: 0;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .sec03 .countwrap p {
    bottom: 5px;
  }
}


.sec03 .sectext02{

}
.sec03 .sectext02 img{
	float: right;
	width: 206px;
}


/*-------------------------------------------
sec04
--------------------------------------------*/
.sec04{
	background: #000;
	position: relative;
	margin-top: -70px;
	padding: 0 250px 40px;
	color: #fff;
}
.sec04 > div{
	overflow: hidden;
	margin-top: 15px;
}
.sec04 h2{
	color: rgba(255, 255, 255, 0.6);
	text-align: right;
	margin-top: -14px;
}
.sec04 h3{
	font-size: 45px;
	text-align: center;
}
.sec04 .sectext02{
	float: left;
  width: 470px;
  margin-top: 0;
}
.sec04 .sectext02 span{
	font-size: 16px;
	font-weight: normal;
	line-height: 1.8em;
}
.sec04 .sectext02 img{
	width: 167px;
	float: left;
}
.sec04 .sectext02 span{
	float: right;
  width: 290px;
  margin-top: 0;
}
.sec04 .sectext03 {
	width: 395px;
  float: right;
  margin-top: 0;
}
.sec04 .sectext03 img{
	width: 395px;
}
.sec04 .sectext03 span{
	font-size: 14px;
}
/*-------------------------------------------
sec05
--------------------------------------------*/
.sec05{
	background: #fff;
  position: relative;
  padding: 0 250px 70px;
}
.sec05 h2{
	color: #e1e2e2;
  text-align: left;
  margin-top: -14px;
}
.sec05 h3{
	margin-top: 10px;
	font-size: 45px;
	text-align: center;
}
.sec05 div {
	margin-top: 20px;
	overflow: hidden;
}
.sec05 div img{
	width: 353px;
	float: left;
}
.sec05 div .sectext02{
	width: 500px;
  float: right;
  margin-top: 25px;
}
/*-------------------------------------------
sec06
--------------------------------------------*/
.sec06{
  background: #251e1c;
  position: relative;
  padding: 0 200px 80px;
  color: #fff;
}
.sec06 h2{
	color: #747372;
  text-align: center;
  margin-top: -14px;
}
.sec06 h3{
	margin-top: 10px;
	font-size: 29px;
	text-align: left;
	color: #fff;
	margin-bottom: 15px;
}
.sec06 div{
	overflow: hidden;
	margin-top: 20px;
}
.sec06 div p{
	float: left;
	width: 40px;
	margin-top: 4px;
}
.sec06 div ul{
  float: right;
  width: 935px;
}
.sec06 div ul li{
	text-indent: -2em;
	line-height: 1.6em;
}


/*-------------------------------------------
sec07
--------------------------------------------*/
.sec07{
	background:#fff;
	position: relative;
}
.sec07 h2{
	color: #e1e2e2;
  text-align: center;
  margin-top: -14px;
}
.sec07 h3{
	font-size: 40px;
	margin-top: 40px;
	text-align: center;
}
.sec07 h4{
	font-size: 40px;
	text-align: center;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .sec07 h3,.sec07 h4 {
		line-height: 1em;
		padding-top: 8px;
  }
}
.telnamber{
	margin-top: 80px;
	text-align: center;
}
.telnamber h4 span{
	position: relative;
	padding-left: 40px;
}
.telnamber h4 span:before{
	content: "";
	position: absolute;
	background: url("/corp/kte/new-product/img/icon_tel.svg");
	width: 30px;
	height: 40px;
	left: 0;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .telnamber h4 span:before {
		top:5px;
  }
}

.telnamber p{
	font-size: 22px;
	    font-weight: bold;
	    line-height: 1.4em;
	    margin-top: 20px;
	    /* vertical-align: middle; */
	    display: flex;
	    /* vertical-align: middle; */
	    align-items: center;
	    justify-content: center;
}
.telnamber p span{
	font-size: 32px;
	color: #E60012;
	margin-left: 12px;
}
.telnamber p:last-child{
	font-size: 15px;
}

.sec07 .formArea > div{
	width: 600px;
	margin: 20px auto 0;
}
.sec07 .formArea > div p{
	font-size: 15px;
	line-height: 1.6em;
	font-weight: bold;
}
.sec07 .formArea > div p.red{
	color: #E60012;
}
.sec07 .formArea > div p.red span{
	color: #096aaf;
	text-decoration: underline;

}
.sec07 .formArea h4 span{
	position: relative;
	padding-left: 50px;
}
.sec07 .formArea h4 span:before{
	content: "";
	position: absolute;
	background: url("/corp/kte/new-product/img/icon_mail.svg");
	width: 44px;
	height: 32px;
	left: 0;
	top: 10px;
}


/*-------------------------------------------
info_btn
--------------------------------------------*/
.info_btn{
	position: fixed;
  right: 0;
  top: 25%;
  display: block;
  /*background: url("/corp/kte/new-product/img/infobtn_pc.png") no-repeat;*/
	background-size: 70px;
  width: 70px;
	height: 270px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.info_btn{
background: linear-gradient(344deg, #990000, #ffab00);
background-size: 400% 400%;
-webkit-animation: AnimationName 4s ease infinite;
-moz-animation: AnimationName 4s ease infinite;
animation: AnimationName 4s ease infinite;
    box-shadow: -1px 2px 5px 0px #777;
clip-path: polygon(1% 15%, 100% 0%, 100% 84%, 0% 100%);
}
@-webkit-keyframes AnimationName {
    0%{background-position:35% 0%}
    50%{background-position:66% 100%}
    100%{background-position:35% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:35% 0%}
    50%{background-position:66% 100%}
    100%{background-position:35% 0%}
}
@keyframes AnimationName {
    0%{background-position:35% 0%}
    50%{background-position:66% 100%}
    100%{background-position:35% 0%}
}


.info_btn span{
  margin-bottom: 27px;
	position: relative;
}
.info_btn img{
	width: 30px;
}
.info_btn span::after{
	position: absolute;
	content: "";
	background: url("/corp/kte/new-product/img/icon_arrow.svg")no-repeat;
	background-size: 20px;
  width: 20px;
  height: 20px;
  bottom: -32px;
  left: 0;
  right: 0;
  margin: auto;
	-webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.info_btn:hover span::after{
	  bottom: -36px;
}
.iframeArea{
  text-align: center;
}
/*-------------------------------------------
footer
--------------------------------------------*/
.footer{
  background: #323232;
  color: #fff;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;
  min-width: 750px;
}
.footer{
  font-size: 14px;
}
.footer .privacy{
  color: #fff;
  display: block;
  text-decoration: underline;
}
/*-------------------------------------------
pagetop
--------------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
}
#pagetop a {
	cursor: pointer;
	padding: 10px;
	display: block;
	background-color: #323232;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
#pagetop a:hover {
	background-color: #006ab0;
}