﻿
.dataResponse {background-size: auto; background-repeat: no-repeat; }
#intro {padding: 90px 0; background-color: #f4f5f6;}
#spec {padding: 50px 0; background-color: #f4f5f6;}
#spec hr {margin: 10px 0 18px;}
#ps01 {background-position-x: 50%;background-position-y: bottom; background-color: #e4e8e6; }
#ps02 .align-v {align-self:flex-end;}
#ps03,#ps04,#ps06  { background-position-x: 50%;}
#ps05 { background-position-x: 100%;}
#ps05 .align-v {align-self:center;}

@media (max-width: 1199px) {
     #ps05 .align-v {align-self:flex-end; margin-bottom:80px; filter: brightness(0) invert(1);}
}

@media (min-width: 992px) {
	#intro {margin-top: 64px;}
    #ps02 { background-position-x: 45%;}
    #slogan01 {margin-left:90px;margin-bottom:100px;}
}

@media (max-width: 991px) {
	#intro {margin-top: 53px;}
}

@media (min-width: 576px) and (max-width: 991px) {
    #ps02 { background-position-x: 60%;}
    #slogan01 {margin-left:calc(5vw);margin-bottom:80px;}   
}

@media (max-width: 767px) {
	#intro {margin-top: 53px; padding: 50px 0 30px 0;}
    #ps05 .align-v {margin-left:50px;}
    #ps01 h1 {font-size:2em;}
    #ps01 p.h5 {font-size:1.1em;}
}

@media (min-width: 576px) {
	.contain-p {height:768px;margin:5px 0;}
	.contain-h {height:785px;margin:5px 0;}	
    #ps02 {background-color:#b3c4d1; }
    #ps03 { background-color:#93bdcb;}
    #ps04 { background-color:#b1d3e4;}
    #ps05 { background-color:#d4c8c3;}
	#ps06 { background-color:#a4a3a0;}
    #slogan01 {max-width:240px; width:100%;}    
}

@media (min-width: 576px) and (max-width: 767px) {    
    #ps05 { background-position-x: 80%;}
}

@media (max-width: 575px) { 
    #logo_puretol {max-width:120px;padding-bottom:5px;}
   .contain-p {height:calc(100vw); background-size:cover; background-position:center;margin:4px 0;}
   .contain-h {height:calc(119vw); background-size:cover; background-position:center;margin:4px 0;}
   #ps01 h1 {font-size: 26px;line-height:1;}
   #spec ul {padding-left:30px;}
   #slogan01 {width:calc(40vw); margin-bottom:70px; margin-left:15px;}
   #slogan04 {max-width:calc(50vw);}
   #ps05 .align-v {align-self:flex-end; margin-bottom:30px; margin-left: 0;}
}

@media (max-width: 538px) {
    table td ul {margin-left:-15px;}
}