@charset "Shift_JIS";

/* @media all and (max-width: 640px) { */

#lp br.sp-none {
display: none;
}


#lp.bath-1 #contents #lead .inner  {
background: url(/bathroom/images/lp/comfort/lead_bg.jpg) center center no-repeat;
background-size: cover;
}

#lp #contents #lead .inner .title h1{
  margin-bottom: 0;
}

#lp #contents #lead .inner .title h1 .icon{
  top: inherit;
}

#lp #contents #lead .inner .title h1 .en{
  padding-left: 12px;
  letter-spacing: 4px;
}

#lp #contents #lead .inner .title h2 {
  font-size: 30px;
  letter-spacing: 2px;
}

#lp.bath-1 #outline{
  padding-bottom: 60px;
}

#lp.bath-1 #outline .main header{
  margin: 0 auto 40px auto;
  width: 100%;
}


#lp.bath-1 #outline .main header p{
  float: none;
  width: 100%;
}

#lp.bath-1 #outline-1{
padding-bottom: 30px;
}


#lp.bath-1 #outline-1 .inner{
  width: 100%;
}

#lp.bath-1 #outline-1 .inner h1.title{
  padding: 40px 30px 45px;
}


#lp.bath-1 #outline-1 .section-1{
  padding-bottom: 30px;
}


#lp.bath-1 #outline-1 .section-1 .anime{
  height: inherit;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
}

#lp.bath-1 #outline-1 .section-1 header{
  padding: 0 30px;
width: 100%;
box-sizing: border-box;
margin: 0 auto;
}



#lp.bath-1 #outline-1 .anime img{
display: block;
width: 100%;
height: auto;
}


#lp.bath-1 #outline-1 .section-1 .anime .base{
position: relative;
  left: inherit;
  top: inherit;
width: 70%;
margin: 0 auto 20px;
}
#lp.bath-1 #outline-1 .section-1 .anime .effect-1{
width: 43.2%;
  display: none;
  left: 0;
right:0;
margin: 0 auto;
  top: 19vw;
}
#lp.bath-1 #outline-1 .section-1 .anime .base img,
#lp.bath-1 #outline-1 .section-1 .anime .effect-2_sp img {
display: block;
width: 100%;
height: auto;
}

#lp.bath-1 #outline-1 .section-1 .anime .effect-2{
display: none!important;
}

#lp.bath-1 #outline-1 .section-1 .anime .effect-2_sp{
  display: block!important;
  left: inherit;
  top: inherit;
position: inherit;
max-width: 407px;
width: 70%;
margin: 0 auto ;
}

#lp.bath-1 #outline-1 .section-2{
  padding: 0;
  position: relative;
margin-bottom: 30px;
}

#lp.bath-1 #outline-1 .section-2 header{
  padding: 0 30px;
width: 100%;
box-sizing: border-box;
margin: 0 auto 20px;
}

#lp.bath-1 #outline-1 .section-2 .anime{
  max-height: 335px;
  position: relative;
  left: inherit;
  top: inherit;
  max-width: 669px;
width: 100%;
height: 50vw;
}

#lp.bath-1 #outline-1 .section-2 .anime .effect{
  display: none;
  max-width: 493px;
width: 73.7%;
  left: 11%;
  top: 7vw;
}

#lp.bath-1 #outline-1 .section-4{
	padding: 0;
	position: relative;
	height: inherit;
margin-bottom: 30px;
}
#lp.bath-1 #outline-1 .section-4 header{
  padding: 0 30px;
  width: 100%;
box-sizing: border-box;
margin-bottom: 18vw;
}

#lp.bath-1 #outline-1 .section-4 .anime{
  height: inherit;
  left: inherit;
  position: inherit;
  top: inherit;
  width: 100%;
margin-bottom: 20px;
}

#lp.bath-1 #outline-1 .section-4 .anime .base {
position: inherit;
  left: inherit;
  top: inherit;
max-width: 609px;
width: 100%;
margin-bottom: 10px;
}


#lp.bath-1 #outline-1 .section-4 .anime .effect-1{
  display: none;
left: 6%;
    top: -10%;
max-width: 492px;
width: 80.8%;
}



#lp.bath-1 #outline-1 .section-4 .anime .effect-2 {
position: inherit;
    display: none;
    right: inherit;
    top: inherit;
max-width: 368px;
width: 70%;
margin: 0 auto;
}

#lp.bath-1 #outline-1 .section-3{
  padding: 0;
  position: relative;
}

#lp.bath-1 #outline-1 .section-3 header{
  padding: 0 30px;
  width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
}

#lp.bath-1 #outline-1 .section-3 .anime{
  max-height: 345px;
  left: inherit;
  position: relative;
  top: inherit;
  max-width: 561px;
width: 100%;
height: 61.5vw;
}
#lp.bath-1 #outline-1 .section-3 .anime .effect{
  display: none;
  left: 3%;
  top: 13vw;
  max-width: 452px;
width: 80.6%;
}



#lp #contents #warm header.section-title {
background: url(/bathroom/images/lp/comfort/warm_title_bg.jpg) center center no-repeat;
background-size: cover;
}

#lp.bath-1 #warm-1{
  margin: 0 auto 47px auto;
  width: 100%;
}


#lp.bath-1 #warm-1 .section-1{
  float: none;
  width: 100%;
  max-width: 480px;
margin-bottom: 30px;
}

#lp.bath-1 #warm-1 .section-1 header{
  padding: 0 30px;
width: 100%;
box-sizing: border-box;
margin-bottom: 20px;
}
#lp.bath-1 #warm-1 .section-1 .thumbs-s{
	padding:0;
}

#lp.bath-1 #warm-1 .section-2{
  float: none;
  position: relative;
  max-width: 480px;
width: 100%;
margin: 0 auto;
}
#lp.bath-1 #warm-1 .section-2 .anime{
  max-height: 599px;
  left: inherit;
  position: inherit;
  top: inherit;
  max-width: 441px;
width: 80%;
margin: 0 auto;
height: 110vw;
}


#lp.bath-1 #warm-1 .section-2 header{
  padding: 0 30px;
width: 100%;
box-sizing: border-box;
margin-bottom: 20px;
}




#lp.bath-1 #warm-2{
  margin: 0 auto 60px;
  position: relative;
  width: 100%;
}

#lp.bath-1 #warm-2 header{
	padding:0 30px;
  width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
}

#lp.bath-1 #warm-2 .anime{
  max-height: 339px;
  left: inherit;
  position: relative;
  top: inherit;
  max-width: 647px;
width: 100%;
height: 61.7vw;
}



#lp #contents #relax header.section-title {
background: url(/bathroom/images/lp/comfort/relax_titile_bg.jpg) center center no-repeat;
background-size: cover;
}

#lp.bath-1 #relax-2{
  margin: 0 auto 40px auto;
  position: relative;
  width: 100%;
}

#lp.bath-1 #relax-2 header{
  margin: 0 auto 14px auto;
  width: 100%;
padding: 0 30px;
  position: inherit;
box-sizing: border-box;
margin-bottom: 20px;
}

#lp.bath-1 #relax-2 .img{
  width: 100%;
margin-bottom: 20px;
}

#lp.bath-1 #relax-2 .img .base{
	padding:0 20px;
max-width: 385px;
margin: 0 auto;
}

#lp.bath-1 #relax-2 .img .txt{
  left: 35%;
  position: absolute;
  top: 20px;
  width: 60%;
}


#lp.bath-1 #relax-2 .img{
  position: relative;
  margin: 0 auto 20px;
  width: 100%;
}

#lp.bath-1 #relax-2 .img2 .base{
	padding:0 10px;
}
#lp.bath-1 #relax-2 .img2 .txt{
  left: 20px;
  position: absolute;
  top: 80px;
  width: 60%;
}




#lp.bath-1 #relax-2 .img2{
  position: relative;
  margin: 0 auto;
  width: 100%;
}



#lp.bath-1 #relax-2 .illust{
  /*left: 686px;*/
  right: inherit;
  position: inherit;
  top: inherit;
}


#lp.bath-1 #contents .circle-graph .counter {
font-size: 40px;
}



/*------------------------------------------*/




#lp.bath-2 #contents #lead .inner  {
background: url(/bathroom/images/lp/save_time/lead_bg.jpg) center center no-repeat;
background-size: cover;
}

#lp.bath-2 #contents #lead .inner .title h2 {
    font-size: 26px;
    letter-spacing: 1px;
}

#lp.bath-2 #outline .main ul{
  background: none;
  height: inherit;
  margin: 0 auto;
  position: relative;
  width: 100%;
padding-top: 20px;
}

#lp.bath-2 #outline .main ul li{
  display: block;
  font-size: 16px;
  line-height: 1.4;
  padding-bottom: 10px;
  position: inherit;
  left: inherit!important;
  top: inherit!important;
  width: inherit!important;
padding-left:1.2em;
	text-indent: -1.2em;
}

#lp.bath-2 #outline .main ul li span{
  font-size: 13px;
}

#lp.bath-2 #outline .main ul .txt-1::before{
content: "1. ";
}

#lp.bath-2 #outline .main ul .txt-2::before{
content: "2. ";
}

#lp.bath-2 #outline .main ul .txt-3::before{
content: "3. ";
}

#lp.bath-2 #outline .main ul .txt-4::before{
content: "4. ";
}


#lp.bath-2 #contents #clean header.section-title {
background: url(/bathroom/images/lp/save_time/clean_title_bg.jpg) center center no-repeat;
background-size: cover;
}

#lp.bath-2 #clean-1{
  padding-bottom: 60px;
}

#lp.bath-2 #clean-1 header{
  margin: 0 auto;
  width: 100%;
}

#lp.bath-2 #clean-1 header h1,
#lp.bath-2 #clean-1 header p{
	float: none;
	width:100%;
padding: 0 30px;
box-sizing: border-box;
}


#lp.bath-2 #clean-2 .bg{
display: none;
}
#lp.bath-2 #clean-2 .inner{
  margin: 0 auto;
  padding-top: 40px;
  position: relative;
  width: 100%;
}


#lp.bath-2 #clean-2 .anime{
  height: 282px;
  margin: 0 auto 40px;
  position: relative;
  width: 282px;
}

#lp.bath-2 #clean-2 header{
  padding: 0 30px 40px;
  width: 100%;
box-sizing: border-box;
}

#lp.bath-2 #clean-3{
  padding: 60px 30px;
}
#lp.bath-2 #clean-3 .inner{
  width: 100%;
}

#lp.bath-2 #clean-3 section{
  max-width: 480px;
width: 100%;
margin: 0 auto;
}

#lp.bath-2 #clean-3 section .left,
#lp.bath-2 #clean-3 section .right {
float: none;
}

#lp.bath-2 #clean-3 section.section-1 {
margin-bottom: 30px;
}
#lp.bath-2 #clean-3 section .thumb{
  padding-bottom: 15px;
  padding-top: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
}
#lp.bath-2 #clean-3 section video{
display: block;
width: 100%;
height: auto;
}

#lp.bath-2 #clean-3 section .txt{
  float: none;
  width: 100%;
margin-bottom: 10px;
}

#lp.bath-2 #clean-3 section .txt-col1 {
  width: 100%;
}

#lp.bath-2 #clean-3 section .illust{
  float: none;
margin: 0 auto;
}


#lp.bath-2 #clean-4{
  background: url(../images/lp/save_time/clean4_bg.gif) no-repeat center;
  border-top: 1px solid #ccc;

}
#lp.bath-2 #clean-4 .inner{
  margin: 0 auto;
  position: relative;
  width: 100%;
}

#cboxContent {
width: 100%!important;
height: auto!important;
}


#lp.bath-2 .popBox {
width: 100%!important;
height: auto!important;
}



#lp.bath-2 .popBox .img {
float: none;
display: block;
width: 100%;
height: auto;
margin-bottom: 15px;
}
#lp.bath-2 .popBox .img img {
display: block!important;
width: 100%!important;
height: auto!important;
}
#lp.bath-2 .popBox .txt {
position: inherit!important;
float: none;
padding: 20px!important;
top: inherit!important;
left: inherit!important;
right: inherit!important;
bottom: inherit!important;
width: 100%!important;
box-sizing: border-box;
}


#lp.bath-2 #clean-4{
  background: none;
  height: auto;
padding-top: 30px;
}
#lp.bath-2 #clean-4 section{
  position: inherit;
  width: 100%;
padding: 0 30px;
margin: 0 auto;
box-sizing: border-box;
}

#lp.bath-2 #clean-4 .section-1,
#lp.bath-2 #clean-4 .section-2{
  left: inherit;
  top: inherit;
}
#lp.bath-2 #clean-4 .section-1 {
margin-bottom: 30px;
}



#lp.bath-2 #clean-4 ul{
display: block;
width: 100%;
  background: url(../images/lp/save_time/clean4_bg.gif) no-repeat center;
background-size: cover;
  height: 92.7vw;
position: relative;
}

#lp.bath-2 #clean-4 li{
  display: block;
  height: 20vw;
  position: absolute;
  width: 20%;
}

#lp.bath-2 #clean-4 li a{
  background: url(../images/lp/save_time/clean4_link_icon.png) no-repeat top left;
background-size: 100% auto;
}




#lp.bath-2 #clean-4 .link-1{
  /* left: 47.18%;
  top: 33.59%; */
  left: 42.18%;
  top: 28.59%;
}

#lp.bath-2 #clean-4 .link-2{
  /* left: 71.35%;
  top: 41.12%; */
  left: 66.35%;
  top: 36.12%;
}

#lp.bath-2 #clean-4 .link-3{
  /* left: 3.54%;
  top: 54.49%; */
  left: 0;
  top: 49.49%;
}

#lp.bath-2 #clean-4 .link-4{
  /* left: 51.77%;
  top: 57.87%; */
  left: 46.77%;
  top: 52.87%;
}

#lp.bath-2 #clean-4 .link-5{
  /* left: 86.67%;
  top: 75.17%; */
  left: 81.67%;
  top: 70.17%;
}


/*-----------------------------*/

#lp.bath-3 #contents #lead .inner  {
background: url(/bathroom/images/lp/friendly/lead_bg.jpg) center center no-repeat;
background-size: cover;
}

#lp.bath-3 #outline .main{
padding-bottom: 60px;
}
#lp.bath-3 #outline .main ul{
  background: none;
  height: inherit;
  margin: 0 auto;
  position: relative;
  width: 100%;
padding-top: 20px;
}
#lp.bath-3 #outline .main ul li{
  background:none;
  display: block;
  font-size: 16px;
  line-height: 1.4;
  padding-bottom: 10px;
  position: inherit;
  left: inherit!important;
  top: inherit!important;
  width: inherit!important;
padding-left:1.2em;
	text-indent: -1.2em;
}


#lp.bath-3 #outline .main ul .caption-01::before{
content: "1. ";
}

#lp.bath-3 #outline .main ul .caption-02::before{
content: "2. ";
}

#lp.bath-3 #outline .main ul .caption-03::before{
content: "3. ";
}


#lp.bath-3 #outline .main .caption{
  padding: 12px 0 0;
text-align: center;
}


#lp.bath-3 #contents #health header.section-title {
background: url(/bathroom/images/lp/friendly/health_title_bg.jpg) center center no-repeat;
background-size: cover;
}

#lp.bath-3 #health-1 header{
  margin: 0 auto 40px auto;
  overflow: hidden;
  width: 100%;
  zoom: 1;
}

#lp.bath-3 #health-1 header .left,
#lp.bath-3 #health-1 header .right{
  width: 100%;
float: none;
padding: 0 30px;
box-sizing: border-box;
}


#lp.bath-3 #health-2{
  padding-bottom: 60px;
  position: relative;
  margin: 0 auto;
  width: 100%;
}
#lp.bath-3 #health-2 header{
  padding: 0 30px;
}

#lp.bath-3 #health-2 .anime{
  left: 0;
  position: relative;
}

#lp.bath-3 #health-2 .anime img{
display: block;
width: 100%;
height: auto;
}


#lp.bath-3 #health-2 .anime .effect{
width: 41%;
height: 53.8%;
  display: none;
  left: 39.9%;
  position: absolute;
  top: 20.4%;
}


#lp.bath-3 #health-3{
  overflow: hidden;
  padding-bottom: 60px;
  position: relative;
  margin: 0 auto;
  width: 100%;
  z-index: 2;
  zoom: 1;
}

#lp.bath-3 #health-3 header{
  padding:0 30px;
  float: none;
  width: 100%;
box-sizing: border-box;
}

#lp.bath-3 #health-3 .anime{
  float: none;
  position: relative;
  max-width: 430px;
  margin:0 auto;
  width: 100%;
}

#lp.bath-3 #health-3 .anime .p1,
#lp.bath-3 #health-3 .anime .p2,
#lp.bath-3 #health-3 .anime .p3,
#lp.bath-3 #health-3 .anime .p4 {
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

#lp.bath-3 #health-3 .anime .p1 img,
#lp.bath-3 #health-3 .anime .p2 img,
#lp.bath-3 #health-3 .anime .p3 img,
#lp.bath-3 #health-3 .anime .p4 img {
  display: block;
  width: 100%;
  height: auto;
}

#lp.bath-3 #contents #ecology header.section-title {
background: url(/bathroom/images/lp/friendly/ecology_titile_bg.jpg) center center no-repeat;
background-size: cover;
}


#lp.bath-3 #ecology-1 header{
  margin: 0 auto;
  width: 100%;
padding: 0 30px;
box-sizing: border-box;
}

#lp.bath-3 #ecology-1 header h1,
#lp.bath-3 #ecology-1 header p{
float: none;
  width: 100%;
}

#lp.bath-3 #ecology-2{
  margin: 0 auto 60px;
  width: 100%;
}

#lp.bath-3 #ecology-2 .left,
#lp.bath-3 #ecology-2 .right{
float: none;
  width: 100%;
}

#lp.bath-3 #ecology-2 .left h1,
#lp.bath-3 #ecology-2 .left p{
  padding: 0 30px;
  width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
#lp.bath-3 #ecology-2 .left h1 {
padding-bottom: 20px;
}

#lp.bath-3 #ecology-2 .anime{
  float: none;
  max-height: 412px;
  margin: 0 auto;
  position: relative;
  max-width: 308px;
width: 100%;
height: 133.8vw;
}


#lp.bath-3 #ecology-3{
  margin-bottom: 60px;
}

#lp.bath-3 #ecology-3 .inner{
  margin: 0 auto;
  width: 100%;
}

#lp.bath-3 #ecology-3 header{
  padding: 0 30px;
  position: relative;
  width: 100%;
box-sizing: border-box;
margin-bottom: 40px;
}

#lp.bath-3 #ecology-3 .bg{
  position: absolute;
  bottom: auto;
top:0;
  left: 0;
  width: 100%;
}
#lp.bath-3 #ecology-3 .bg .inner{
  position: relative;
  margin: 0 auto;
  width: 100%;
}

#lp.bath-3 #ecology-3 .bg .inner img{
  position: relative;
  left: inherit;
right: -13vw;
display: block;
width: 100%;
height: auto;
top: -15vw;
}


#lp.bath-3 #ecology-3 .anime-wrapper{
  overflow: hidden;
  padding: 0 0 85px;
  position: relative;
max-width: 480px;
  width: 100%;
}

#lp.bath-3 #ecology-3 .anime-wrapper .left,
#lp.bath-3 #ecology-3 .anime-wrapper .right {
float: none;
margin: 0 auto;
}
#lp.bath-3 #ecology-3 .anime-wrapper .left .anime{
margin: 0 auto 30px;
}


#lp.bath-3 #ecology-3 .anime-wrapper .right {
float: none;
margin: 0 auto;
padding: 0 10px;
width: 100%;
box-sizing: border-box;
max-width: 310px;
}

#lp.bath-3 #ecology-3 .anime-wrapper .right h2{
  font-weight: bold;
  padding-right: 0;
margin: 0 auto ;
}
#lp.bath-3 #ecology-3 .anime-wrapper .right .diff{
  padding-left: 80px;
  left: 60px;
}

#lp.bath-3 #ecology-3 .anime-wrapper .notice{
  position: inherit;
  right: inherit;
  bottom: inherit;
padding-top: 15px;
text-align: center;
}


#lp.bath-3 #ecology-4 .inner{
  width: 100%;
}

#lp.bath-3 #ecology-4 section.left{
float: none;
margin: 0 auto 60px;
  width: 100%;
}
#lp.bath-3 #ecology-4 section.right {
float: none;
margin: 0 auto;
  width: 100%;
}



#lp.bath-3 #ecology-4 section header{
  width: 100%;
padding: 0 30px;
box-sizing: border-box;
margin-bottom: 20px!important;
}
#lp.bath-3 #ecology-4 .right .anime{
  max-height: 167px;
  position: relative;
  margin: 0 auto ;
  max-width: 483px;
width: 100%;
height: 34.6vw;
}

#lp.bath-3 #ecology-4 .right .anime .text{
  color: #666;
  left: 20%;
  top: 23.9%;
  font-size: 16px;
}

#lp.bath-3 #ecology-4 .right .anime .text strong{
  font-size: 40px;
  font-weight: normal;
}

#lp.bath-3 #ecology-4 .right .anime .diff{
  color: #666;
  display: none;
  bottom: 10px;
  top: auto;
  left: 69%;
  line-height: 1.2;
  font-size: 14px;
}

#lp.bath-3 #ecology-4 .right .anime .diff strong{
  font-size: 24px;
  font-weight: normal;
  padding: 0 5px;
}

#lp.bath-3 #ecology-4 .right .caption{
  padding: 10px 10px 0 40px;
}




/*------------------------------------------*/




#lp.bath-4 #contents #lead .inner  {
background: url(/bathroom/images/lp/history/lead_bg.jpg) center center no-repeat;
background-size: cover;
}

#lp.bath-4 #outline{
  padding-bottom: 60px;
}

#lp.bath-4 #outline .main header {
  margin-bottom: 76px;
padding: 0;
  width: 100%;
box-sizing: border-box;
}

#lp.bath-4 #outline-1{
  width: 100%;
}

#lp.bath-4 #outline-1 .left{
  float: none;
  width: 100%;
  padding-top: 0;
margin-bottom: 45px;
}

#lp.bath-4 #outline-1 .right{
  float: none;
  width: 100%;
  padding: 0 30px;
box-sizing: border-box;
}

#lp.bath-4 #outline-1 .right h1,
#lp.bath-4 #outline-1 .right p{
  padding-left: 0;
}


#lp.bath-4 #contents #quality header.section-title {
background: url(/bathroom/images/lp/history/quality_title_bg.jpg) center center no-repeat;
background-size: cover;
}


#lp.bath-4 #quality-1{
  width: 100%;
}

#lp.bath-4 #quality-1 .box{
  max-width: 480px;
  text-align: center;
width: 100%;
}

#lp.bath-4 #quality-2{
  margin: 0 auto 60px auto;
  width: 100%;
}

#lp.bath-4 #quality-2 .left,
#lp.bath-4 #quality-2 .right{
  width: 100%;
float: none;
padding: 0 30px;
}


#lp.bath-4 #quality-2 .left h1,
#lp.bath-4 #quality-2 .left p{
width: 100%;
box-sizing: border-box;
}
#lp.bath-4 #quality-2 .left p{
margin-bottom: 20px;
}


#lp.bath-4 #contents #history header.section-title {
background: url(/bathroom/images/lp/history/history_titile_bg.jpg) center center no-repeat;
background-size: cover;
}

#lp.bath-4 #history-1 header{
  padding: 20px 30px 60px;
  width: 100%;box-sizing: border-box;
}

#lp.bath-4 #history-1 header h1,
#lp.bath-4 #history-1 header p{
  width: 100%;
}



#lp.bath-4 #history-2{
  padding: 40px 0 0 0;
}

#lp.bath-4 #history-2 .section{
  width: 100%;
}

#lp.bath-4 #history-2 .section .year{
  float: none;
  padding: 0;
  margin:0 auto 30px;
  width: 238px;
}

#lp.bath-4 #history-2 .bg2{
  float: none;
  padding: 0;
  margin:0 auto 30px;
  width: 238px;
}


#lp.bath-4 #history-2 .bg2{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

#lp.bath-4 #history-2 .inner{
  width: 100%;
}
#lp.bath-4 #history-2 .bg img{
  margin-left: 0;
}