@charset "UTF-8";

/*================================================
 *  トップページ用
 ================================================*/

/******* 動画背景 *******/
#videoWrap {
	width: 100%;
	top: 0;
	left: 0;
}
#videoWrap .pattern {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	background:  url(../images/index/m_pattern.png);
	mix-blend-mode : multiply; 
}
#videoWrap:before {
    content:"";
    display: block;
    padding-top: 42.9%; /* 高さを幅の42.9%に固定 */
}
#videoWrap .title {
	top: 50%;
	left: 50%;
	z-index: 1000;
	margin-left: -228.5px;
	margin-top: -110px;
	width: 457px;
}
#videoWrap video {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
}
#videoWrap .scroll {
	position: absolute;
	left: 0;
	bottom: 40px;
	text-align: center;
	z-index: 1000;
	width: 100%;
}

#videoWrap .scroll img {
	-webkit-animation: levitate 1.2s alternate ease-in-out infinite;
	-moz-animation: levitate 1.2s alternate ease-in-out infinite;
	-ms-animation: levitate 1.2s alternate ease-in-out infinite;
	animation: levitate 1.2s alternate ease-in-out infinite;
}

@keyframes levitate {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    100% {
        -webkit-transform: translate(0, 10px);
        -moz-transform: translate(0, 10px);
        -ms-transform: translate(0, 10px);
        -o-transform: translate(0, 10px);
        transform: translate(0, 10px)
    }
}

@-webkit-keyframes levitate {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    100% {
        -webkit-transform: translate(0, 10px);
        -moz-transform: translate(0, 10px);
        -ms-transform: translate(0, 10px);
        -o-transform: translate(0, 10px);
        transform: translate(0, 10px)
    }
}

/*******リード*******/
section.lead {
	background-image: url(../images/index/kaizen.png),url(../images/index/blackdot.jpg)  ;
	background-repeat: no-repeat, repeat;
	background-position: bottom center, top center;
	text-align: center;
	color: #fff;
	padding: 70px 0 60px 0;
	margin-top: -3px;
}
section.lead h3 {
	font-size: 28px;
	line-height: 1.8;
	margin-bottom: 35px;
}

/*******性能*******/
section.performance {
	background: #000 url(../images/index/performance_img00.jpg) top center no-repeat;
	padding: 290px 0 85px;
}
section.performance .performance_wrap {
	width: 960px;
	margin: 0 auto;
}
section.performance .performance_wrap .point {
	padding-top: 45px;
}
section.performance .performance_wrap .point li {
	width: 240px;
	float: left;
	color: #fff;
}
section.performance .performance_wrap .point li .point_txt {
	padding: 40px 30px 30px;
	height:240px;
	background: #000;
}
section.performance .performance_wrap .point li .point_txt h4 {
	font-size: 22px;
	margin-bottom: 25px;
	text-align: center;
	font-weight: bold;
}
section.performance .performance_wrap .point li .point_txt p {
	font-size: 15px;
	line-height: 1.6;
	text-align: justify;
	text-justify: inter-ideograph;
}

/*******ラインナップ*******/
section.lineup {
	margin: 30px auto 70px;
}
section.lineup .link_box {
	display: block;
	width: 460px;
	float: left;
	margin-right: 20px;
	border: 1px solid #c7000b;
	position: relative;
	margin-top: 25px;
	padding: 35px 25px;
}
section.lineup .link_box:last-child {
	margin-right: 0;
}
section.lineup .link_box h4 {
	font-size: 35px;
	margin-bottom: 30px;
	text-align: center;
	color: #c7000b;
}
section.lineup .link_box .link_txt p:first-child {
	float: left;
	width: 100px;
	margin-right: 15px;
}
section.lineup .link_box .link_txt p:last-child {
	float: left;
	width: 285px;
	font-size: 15px;
	line-height: 1.6;
}
section.lineup .link_box .more {
	width: 90px;
	position: absolute;
	bottom: 0;
	right: 0;
}

/*******商品紹介*******/
section.product {
	margin-bottom: 65px;
}
section.product .ttl_line {
	background: #c7000b;
	padding: 20px 0 15px;
	margin-bottom: 30px;
}
section.product .ttl_line .ic_ttl {
	font-size: 22px;
	margin-bottom: 10px;
}
section.product .ttl_line .ic_sub_ttl {
	font-size: 18px;
	font-weight: normal;
}
section.product .after {
	text-align: center;
	margin-bottom: 20px;
}

/*コーティング剤*/
section.product .coat_box {
	width: 960px;
	margin: 0 auto 65px;
}
section.product .coat_box:nth-of-type(3) {
	margin-bottom: 45px;
}
section.product .coat_box h4 {
	margin-bottom: 20px;
	background: #000;
	padding: 10px 10px 10px 330px;
	display: table;
	position: relative;
	z-index: -100;	
}
section.product .coat_box h4 span {
	display: table-cell;
	vertical-align: middle;
}
section.product .coat_box h4 span:first-child {
	width: 520px;
}
section.product .coat_box .coat_wrap {
	width: 940px;
	margin: 0 auto;
	position: relative;
}
section.product .coat_box .coat_wrap .coat_img {
	position: absolute;
    top: -125px;
    left: 25px;
}
section.product .coat_box .coat_wrap .coat_txt {
	padding-left: 320px;
}
section.product .coat_box .coat_wrap .coat_txt h5 {
	font-size: 16px;
	line-height: 1.6;
	font-weight: bold;
	margin-bottom: 10px;
}
section.product .coat_box .coat_wrap .coat_txt p {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 45px;
}
section.product .coat_box .coat_wrap .spec_box {
	display: table;
}
section.product .coat_box .coat_wrap .spec_box p {
	display: table-cell;
}
section.product .coat_box .coat_wrap .spec_box p:first-child {
	width: 320px;
}

/*メンテナンス剤*/
section.product .liquid {
	width: 960px;
	margin: 0 auto;
}
section.product .liquid h4 {
	background: #3c3c3c;
	padding: 10px 10px 10px 0;
	display: table;
}
section.product .liquid h4 span {
	display: table-cell;
	vertical-align: middle;
}
section.product .liquid h4 span:first-child {
	width: 850px;
	padding-left: 250px;
}
section.product .liquid .liquid_inr {
	background: url(../images/index/graydot.jpg);
	position: relative;
}
section.product .liquid .liquid_inr .liquid_txt {
	padding: 60px 0 40px 40px;
	width: 555px;
}
section.product .liquid .liquid_inr .liquid_txt h5 {
	font-size: 22px;
	line-height: 1.36;
	color: #3c3c3c;
	font-weight: bold;
	margin-bottom: 20px;
}
section.product .liquid .liquid_inr .liquid_txt h6 {
	font-size: 16px;
	line-height: 1.6;
	font-weight: bold;
	margin-bottom: 10px;
}
section.product .liquid .liquid_inr .liquid_txt p {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 15px;
}
section.product .liquid .liquid_inr .liquid_txt p .note {
	font-size: 13px;
}

section.product .liquid .liquid_inr .liquid_txt .point li {
	display: inline-block;
	width: 165px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	margin-right: 10px;
	padding: 10px 0 7px;
	font-weight: bold;
	background: #171717;
	background: -moz-linear-gradient(top, #171717 0%, #323232 50%, #171717 100%);
	background: -webkit-linear-gradient(top, #171717 0%,#323232 50%,#171717 100%);
	background: linear-gradient(to bottom, #171717 0%,#323232 50%,#171717 100%);
}
section.product .liquid .liquid_inr .liquid_txt .point li:last-child {
	margin-right: 0;
}
section.product .liquid .liquid_inr .liquid_img {
	width: 405px;
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: center;
}

/*リキッド剤（疎水タイプ）*/
section.product#hydro {
	margin-bottom: 125px;
}
section.product#hydro .coat_box {
	margin-bottom: 45px;
}
section.product#hydro .liquid .liquid_inr .liquid_txt {
	width: 810px;
}
section.product#hydro .liquid .liquid_inr .liquid_txt .point li {
	width: 250px;
}
section.product#hydro .liquid .liquid_inr .liquid_img {
	width: 150px;
}


/*******エバーガラスコートの動画*******/
section#movie {
	padding: 50px 0 60px;
}
section#movie .movie_box {
	margin: 25px auto 60px;
}
section#movie .movie_box h4 {
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0.5em;
}
section#movie .movie_box iframe {
	width: 100%;
	height: 576px;
}


/*******お問い合わせ*******/
section#inquiry {
	background: url(../images/index/blackdot.jpg);
	padding: 35px 0 70px;	
}
section#inquiry .inquiry_inr {
	width: 780px;
	margin: 0 auto;
	color: #fff;
}
section#inquiry .inquiry_inr h4 {
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	margin-bottom: 40px;	
}
section#inquiry .inquiry_inr .tel {
	width: 380px;
	float: left;
}
section#inquiry .inquiry_inr .tel dt,
section#inquiry .inquiry_inr .mail dt {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}
section#inquiry .inquiry_inr .tel dd.pc {
	color: #c7000b;
	font-size: 42px;
	font-weight: bold;
	margin-bottom: 10px;
	letter-spacing: -0.05em;
}
section#inquiry .inquiry_inr .tel dd.pc .icon-circle-tel {
	font-size: 39px;
	margin-right: 10px;
	vertical-align:-10%;	
}
section#inquiry .inquiry_inr .tel dd:last-of-type {
	font-size: 14px;
}
section#inquiry .inquiry_inr .mail {
	width: 380px;
	float: right;
}
section#inquiry .inquiry_inr .mail a {
	display: block;
	background: #c7000b;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	padding: 22px 0;
}
section#inquiry .inquiry_inr .mail a .icon-mail {
	margin-right: 10px;
	font-size: 20.5px;
	vertical-align: -10%;
}



/*================================================
 *  タブレット/スマートフォン向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:799px) {

/*******動画背景*******/
#videoWrap {
   background: url(../images/index/main_sp.jpg) no-repeat center center;
   background-size: contain;
   }
#videoWrap video { display: none; }
#videoWrap:before {
    padding-top: 81.25%;
}

/*******リード*******/
section.lead {
	text-align: left;
	padding: 8vw 0;
	-webkit-background-size: 100%, auto;
	background-size: 100%, auto;

}
section.lead h3 {
	font-size: 4.5vw;
	margin-bottom: 5vw;
	text-align: center;
}

/*******性能*******/
section.performance {
	background: #000 url(../images/index/performance_img00_sp.jpg) no-repeat top center;
	-webkit-background-size: contain;
	background-size: contain;
	padding: 50vw 0 8vw;
}
section.performance .performance_wrap {
	width: 100%;
}
section.performance .performance_wrap .point {
	padding-top: 5vw;
}
section.performance .performance_wrap .point li {
	width: 50vw;
}
section.performance .performance_wrap .point li img {
	width: 100%;
}
section.performance .performance_wrap .point li .point_txt {
	padding: 6vw 5vw 5vw;
	height:50vw;
}
section.performance .performance_wrap .point li .point_txt h4 {
	font-size: 4vw;
	margin-bottom: 3vw;
}
section.performance .performance_wrap .point li .point_txt p {
	font-size: 3.5vw;
	line-height: 1.6;
}

/*******ラインナップ*******/
section.lineup {
	margin: 5vw auto 10vw;
}
section.lineup .link_box {
	width: 48%;
	margin-right: 4%;
	margin-top: 5vw;
	padding: 5vw 3vw;
}
section.lineup .link_box h4 {
	font-size: 5vw;
	margin-bottom: 5vw;
}
section.lineup .link_box .link_txt p:first-child {
	float: none;
	width: 100%;
	margin: 0 0 3vw 0;
	text-align: center;
}
section.lineup .link_box .link_txt p:last-child {
	float: none;
	width: 100%;
	font-size: 3.3vw;
	margin-bottom: 3vw;
}
section.lineup .link_box .more {
	width: 17vw;
}
section.lineup .link_box .more img {
	width: 100%;
}

/*******商品紹介*******/
section.product {
 margin-bottom: 10vw;
}
section.product .ttl_line {
	padding: 3vw 0;
	margin-bottom: 5vw;
}
section.product .ttl_line .ic_ttl {
	font-size: 5.5vw;
	margin-bottom: 2vw;
}
section.product .ttl_line .ic_sub_ttl {
	font-size: 3.5vw;
}
section.product .after {
	margin-bottom: 3.5vw;
}
section.product .after img {
	width: 80%;
}

/*コーティング剤*/
section.product .coat_box {
	width: 90%;
	margin-bottom: 8vw;
}
section.product .coat_box:nth-of-type(3) {
    margin-bottom: 8vw;
}
section.product .coat_box h4 {
	width: 100%;
	margin-bottom: 5vw;
	padding: 2vw 2vw 2vw 3.5vw;
	position: static;
	z-index: auto;	
}
section.product .coat_box h4 span:first-child {
	width: 65vw;
}
section.product .coat_box h4 span:first-child img {
	height:7vw;
	width: auto;
}
section.product .coat_box h4 span:last-child {
	text-align: right;
}
section.product .coat_box h4 span:last-child img {
	width: 14vw;
}
section.product .coat_box .coat_wrap {
	width: 100%;
	position: staic;
}
section.product .coat_box .coat_wrap .coat_img {
	position: static;
	text-align: center;
}
section.product .coat_box .coat_wrap .coat_img img {
	width: 48vw;
	margin-right: -8vw;
}
section.product .coat_box .coat_wrap .coat_txt {
	padding-left: 0;
	margin-bottom: 5vw;
}
section.product .coat_box .coat_wrap .coat_txt h5 {
	font-size: 4vw;
	margin-bottom: 3vw;
}
section.product .coat_box .coat_wrap .coat_txt p {
	font-size: 3.6vw;
	margin-bottom: 0;
}
section.product .coat_box .coat_wrap .spec_box {
	display: block;
}
section.product .coat_box .coat_wrap .spec_box p {
	display: block;
}
section.product .coat_box .coat_wrap .spec_box p:first-child {
	width: 100%;
	margin-bottom: 5vw;
	text-align: center;
}
section.product .coat_box .coat_wrap .spec_box p:first-child img {
	width: 75%;
}

/*メンテナンス剤*/
section.product .liquid {
	width: 90%;
}
section.product .liquid h4 {
	margin: 0 auto;
	padding: 2vw 2vw 2vw 3.5vw;
	width: 100%;
}
section.product .liquid h4 span {
	display: table-cell;
	vertical-align: middle;
}
section.product .liquid h4 span:first-child {
	width: 70vw;
	padding-left: 0;
}
section.product .liquid h4 span:first-child img {
	height:7.6vw;
	width: auto;
}
section.product .liquid h4 span:last-child {
	text-align: right;
}
section.product .liquid h4 span:last-child img {
	width: 14vw;
}
section.product .liquid .liquid_inr {
	padding: 7vw 5vw 0 5vw ;	
}
section.product .liquid .liquid_inr .liquid_txt {
	padding: 0;
	width: 100%;
}
section.product .liquid .liquid_inr .liquid_txt h5 {
	font-size: 4.9vw;
	margin-bottom: 3vw;
}
section.product .liquid .liquid_inr .liquid_txt h6 {
	font-size: 4vw;
	margin-bottom: 3vw;
}
section.product .liquid .liquid_inr .liquid_txt p {
	font-size: 3.6vw;
	margin-bottom: 3vw;
}
section.product .liquid .liquid_inr .liquid_txt p .note {
	font-size: 3.4vw;
}

section.product .liquid .liquid_inr .liquid_txt .point li {
	width: 48%;
	font-size: 4.3vw;
	margin-right: 4%;
	padding: 2.5vw 0;
}
section.product .liquid .liquid_inr .liquid_txt .point li:nth-of-type(even) {
	margin-right: 0;
}
section.product .liquid .liquid_inr .liquid_txt .point li:nth-of-type(n+3) {
	margin-top: 3.2vw;
}
section.product .liquid .liquid_inr .liquid_img {
	width: 100%;
	position: static;
	margin-top: 5vw;
}
section.product .liquid .liquid_inr .liquid_img img {
	height: 65vw;
}

/*リキッド剤（疎水タイプ）*/
section.product#hydro {
	margin-bottom: 10vw;
}
section.product#hydro .liquid .liquid_inr .liquid_txt {
	width: 100%;
}
section.product#hydro .coat_box {
	margin-bottom: 8vw;
}
section.product#hydro .liquid .liquid_inr .liquid_txt .point li {
	width: 48%;
}
section.product#hydro .liquid .liquid_inr .liquid_img {
	width: 100%;
}
section.product#hydro .liquid .liquid_inr .liquid_img img {
	height: 65vw;
}

/*******エバーガラスコートの動画*******/
section#movie {
	padding: 8vw 0;
}
section#movie .movie_box {
	margin: 5vw auto 8vw;
}
section#movie .movie_box:last-of-type {
	margin-bottom: 0;
}
section#movie .movie_box h4 {
	font-size: 4.5vw;
}
section#movie .movie_box iframe {
	height: 50vw;
}

/*******お問い合わせ*******/
section#inquiry {
	padding: 10vw 0;	
}
section#inquiry .inquiry_inr {
	width: 90%;
}
section#inquiry .inquiry_inr h4 {
	font-size: 5vw;
	margin-bottom: 8vw;
	line-height: 1.5;
}
section#inquiry .inquiry_inr .tel {
	width: 100%;
	float: none;
	margin-bottom: 8vw;
}
section#inquiry .inquiry_inr .tel dt,
section#inquiry .inquiry_inr .mail dt {
	font-size: 4.5vw;
	margin-bottom: 3vw;
}
section#inquiry .inquiry_inr .tel dd.sp {
	text-align: center;
	color: #fff;
	font-size: 4vw;
	margin-bottom: 3vw;
}
section#inquiry .inquiry_inr .tel dd.sp a {
	display: block;
	background: #c7000b;
	color: #fff;
	font-weight: bold;
	font-size: 8vw;
	padding: 4.5vw;
}
section#inquiry .inquiry_inr .tel dd.sp a .touch{
	font-size: 4vw;
	padding-top: 2vw;
	display:block;
}
section#inquiry .inquiry_inr .tel dd.sp .icon-tel {
	font-size: 7.2vw;
	margin-right: 1.5vw;
	vertical-align:-5%;	
}
section#inquiry .inquiry_inr .tel dd:last-of-type {
	font-size: 3.6vw;
}
section#inquiry .inquiry_inr .mail {
	width: 100%;
	float: none;
}
section#inquiry .inquiry_inr .mail a {
	font-size: 5.5vw;
	padding: 5vw 0;
}
section#inquiry .inquiry_inr .mail a .icon-mail {
	margin-right: 2vw;
	font-size: 5.5vw;
	vertical-align: -10%;
}




}