@charset "Shift_JIS";
/*---------------------------------------------------------------
lp.css
-----------------------------------------------------------------
table of contents

	1. Reset
	2. Basic Style
	3. Layout
	4. Pages Layout
	5. Libraries
-----------------------------------------------------------------
font-size table

	10px : 77%		16px : 123.1%
	11px : 85%		17px : 131%
	12px : 93%		18px : 138.5%
	13px : 100%		19px : 146.5%
	14px : 108%		20px : 153.9%
	15px : 116%		21px : 161.6%
---------------------------------------------------------------*/
/*===============================================================

  #lp.bath-1

===============================================================*/
/*#lp.bath-1 #lead .inner {
  background-image: url(../images/lp/comfort/lead_bg.jpg);
}*/

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

#lp #contents #lead .inner .title h1 .icon{
  top: -108px;
}

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

/*    #outline
---------------------------------------------------------------*/
#lp.bath-1 #outline{
  padding-bottom: 139px;
}
#lp.bath-1 #outline .main header{
  margin: 0 auto 76px auto;
  overflow: hidden;
  width: 980px;
  zoom: 1;
}

#lp.bath-1 #outline .main header h1{
  float: left;
  width: 460px;
}

#lp.bath-1 #outline .main header p{
  float: right;
  width: 500px;
}

#lp.bath-1 #outline-1{
  background-color: #ebebea;
  -moz-box-shadow:inset 0 0 5px 5px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow:inset 0 0 5px 5px rgba(0, 0, 0, 0.05);
  box-shadow:inset 0 0 5px 5px rgba(0, 0, 0, 0.05);
}

#lp.bath-1 #outline-1 .inner{
  margin: 0 auto;
  width: 960px;
}

#lp.bath-1 #outline-1 .inner h1.title{
  padding: 90px 0 45px 84px;
}

#lp.bath-1 #outline-1 .inner section h1 strong{
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  zoom: 1;
}

#lp.bath-1 #outline-1 section header h1{
	padding-bottom: 24px;
  letter-spacing: 3px;
}

#lp.bath-1 #outline-1 .section-1{
  padding-bottom: 74px;
  position: relative;
}

#lp.bath-1 #outline-1 .section-1 header{
  padding: 495px 0 0 515px;
  width: 320px;
}

#lp.bath-1 #outline-1 .section-1 header h1 strong{
  background: url(../images/lp/comfort/outline1_section1_logo.gif) no-repeat 0 8px;
  height: 27px;
  padding: 8px 0 0 0;
  width: 270px;
}

#lp.bath-1 #outline-1 .section-1 .anime{
  height: 710px;
  left: 0;
  position: absolute;
  top: 0;
  width: 960px;
}

#lp.bath-1 #outline-1 .section-1 .anime p{
  position: absolute;
}

#lp.bath-1 #outline-1 .section-1 .anime .base{
  left: 62px;
  top: 0;
}

#lp.bath-1 #outline-1 .section-1 .anime .effect-1{
  display: none;
  left: 131px;
  top: 100px;
}

#lp.bath-1 #outline-1 .section-1 .anime .effect-2{
  display: none;
  left: 403px;
  top: -199px;
}

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

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

#lp.bath-1 #outline-1 .section-2 header{
  padding: 72px 0 0 0;
  width: 320px;
}

#lp.bath-1 #outline-1 .section-2 header h1{
  letter-spacing: 2px;
}

#lp.bath-1 #outline-1 .section-2 header h1 strong{
  background: url("../images/lp/comfort/outline1_section1_logo2.gif") no-repeat 0 8px;
  height: 27px;
  padding: 8px 0 0 0;

}

#lp.bath-1 #outline-1 .section-2 .anime{
  height: 335px;
  position: absolute;
  left: 399px;
  top: 0;
  width: 669px;
}

#lp.bath-1 #outline-1 .section-2 .anime p{
  position: absolute;
}

#lp.bath-1 #outline-1 .section-2 .anime .base{
  left: 0;
  top: 0;
}

#lp.bath-1 #outline-1 .section-2 .anime .effect{
  display: none;
  left: 80px;
  top: 56px;
}

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

#lp.bath-1 #outline-1 .section-3 header{
  padding: 55px 0 0 638px;
  width: 320px;
}

#lp.bath-1 #outline-1 .section-3 header h1{
  letter-spacing: 2px;
}

#lp.bath-1 #outline-1 .section-3 header h1 strong{
  background: url(../images/lp/comfort/outline1_section3_logo.gif) no-repeat 0 8px;
  height: 24px;
  padding: 8px 0 0 0;
  width: 112px;
}


#lp.bath-1 #outline-1 .section-3 .anime{
  height: 345px;
  left: 0;
  position: absolute;
  top: 0;
  width: 561px;
}

#lp.bath-1 #outline-1 .section-3 .anime p{
  position: absolute;
}

#lp.bath-1 #outline-1 .section-3 .anime .base{
  left: 0;
  top: 0;
}

#lp.bath-1 #outline-1 .section-3 .anime .effect{
  display: none;
  left: 14px;
  top: 70px;
}

/* added 20160122 GIGANT */
#lp.bath-1 #outline-1 .section-4{
	padding: 0 0 90px 0;
	position: relative;
	height: 594px;
}

#lp.bath-1 #outline-1 .section-4 header{
  padding: 0;
  width: 560px;
}

#lp.bath-1 #outline-1 .section-4 header h1{
  letter-spacing: 2px;
}

#lp.bath-1 #outline-1 .section-4 header h1 strong{
  background: url(../images/lp/comfort/outline1_section20_logo.gif) no-repeat 0 12px;
  height: 27px;
  padding: 12px 0 0 0;
  width: 244px;
}
#lp.bath-1 #outline-1 .section-4 .anime{
  height: 572px;
  left: 0;
  position: absolute;
  top: 0;
  width: 960px;
}

#lp.bath-1 #outline-1 .section-4 .anime p{
  position: absolute;
}

#lp.bath-1 #outline-1 .section-4 .anime .base{
  left: -63px;
  top: 348px;
}

#lp.bath-1 #outline-1 .section-4 .anime .effect-1{
  display: none;
  left: -30px;
  top: 257px;
}
#lp.bath-1 #outline-1 .section-4 .anime .effect-2{
  display: none;
  right: -27px;
  top: -17px;
}


/*    #warm
---------------------------------------------------------------*/
#lp.bath-1 #warm-1{
  margin: 0 auto 47px auto;
  width: 980px;
}

#lp.bath-1 #warm-1 .section-1{
  float: left;
  width: 480px;
}

#lp.bath-1 #warm-1 .section-1 header{
  padding: 24px 0 99px 10px;
}

#lp.bath-1 #warm-1 .section-1 .thumbs-s{
	padding:4px 0 0 10px;
}

#lp.bath-1 #warm-1 .section-2{
  float: right;
  position: relative;
  width: 400px;
}

#lp.bath-1 #warm-1 .section-2 header{
  padding: 603px 0 0 0;
}

#lp.bath-1 #warm-1 .section-2 header h1{
  letter-spacing: 3px;
}

#lp.bath-1 #warm-1 .section-2 .anime{
  height: 599px;
  left: -44px;
  position: absolute;
  top: -38px;
  width: 441px;
}

#lp.bath-1 #warm-1 .section-2 .anime p{
  left: 0;
  position: absolute;
  top: 0;
}

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

#lp.bath-1 #warm-2{
  margin: 0 auto 220px auto;
  position: relative;
  width: 960px;
}

#lp.bath-1 #warm-2 header{
	padding:32px 0 0 0;
  width: 400px;
}

#lp.bath-1 #warm-2 .anime{
  height: 339px;
  left: 444px;
  position: absolute;
  top: 0;
  width: 647px;
}

#lp.bath-1 #warm-2 .anime p{
  left: 0;
  position: absolute;
  top: 0;
}

#lp.bath-1 #warm-2 .anime .effect{
  display: none;
}


/*    #relax
---------------------------------------------------------------*/
#lp.bath-1 #relax-1{
  margin-bottom: 50px;
}

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

#lp.bath-1 #relax-2 header{
  margin: 0 auto 14px auto;
  width: 960px;
  position: relative;
  z-index: 10;
}

#lp.bath-1 #relax-2 header h1{
	padding-bottom: 16px;
}

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

#lp.bath-1 #relax-2 .img .base{
	padding:1px 0 0 1px;
}

#lp.bath-1 #relax-2 .img .txt{
  left: 170px;
  position: absolute;
  top: 36px;
  width: 200px;
}
#lp.bath-1 #relax-2 .img .txt2{
  left: 1px;
  position: absolute;
  top: 36px;
  width: 380px;
}

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

#lp.bath-1 .magazine-1{
  display: none;
}

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

#lp.bath-1 #relax-2 .img2 .base{
	padding:7px 0 5 30px;
}

#lp.bath-1 #relax-2 .img2 .txt{
  left: 60px;
  position: absolute;
  top: 100px;
  width: 380px;
}

#lp.bath-1 #relax-2 .img2 .txt3{
  left: 265px;
  position: absolute;
  top: 10px;
  width: 160px;
}


/*===============================================================

  #lp.bath-2

===============================================================*/
/*#lp.bath-2 #lead .inner {
  background-image: url(../images/lp/save_time/lead_bg.jpg);
}*/

/*    #outline
---------------------------------------------------------------*/
#lp.bath-2 #outline{
  padding-bottom: 50px;
}

#lp.bath-2 #outline .main header{
  padding-bottom: 35px;
}

#lp.bath-2 #outline .main ul{
  background: url(../images/lp/save_time/outline_bg.png) no-repeat 2px 3px;
  height: 584px;
  margin: 0 auto;
  position: relative;
  width: 960px;
}

#lp.bath-2 #outline .main ul li{
  position: absolute;
  font-size: 17px;
  line-height: 1.6;
}

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

#lp.bath-2 #outline .main ul .txt-1{
  left: 0;
  top: 154px;
}

#lp.bath-2 #outline .main ul .txt-2{
  left: 0;
  top: 445px;
}

#lp.bath-2 #outline .main ul .txt-3{
  left: 760px;
  top: 475px;
}

#lp.bath-2 #outline .main ul .txt-4{
  left: 760px;
  top: 475px;
}

/*    #clean
---------------------------------------------------------------*/
#lp.bath-2 #clean-1{
  -moz-box-shadow:0 5px 3px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow:0 5px 3px rgba(0, 0, 0, 0.05);
  box-shadow:0 5px 3px rgba(0, 0, 0, 0.05);
  padding-bottom: 78px;
  position: relative;
  z-index: 2;
}

#lp.bath-2 #clean-1 ul{
  margin-bottom:47px;
}

#lp.bath-2 #clean-1 header{
  margin: 0 auto;
	overflow:hidden;
  width: 960px;
	zoom:1;
}

#lp.bath-2 #clean-1 header h1{
	float:left;
	width:480px;
}

#lp.bath-2 #clean-1 header p{
	float:right;
	width:480px;
}

#lp.bath-2 #clean-2{
  background: url(../images/lp/save_time/clean2_bg.png) repeat-x;
  position: relative;
}

#lp.bath-2 #clean-2 .bg{
  margin: 0 auto;
  position: relative;
  width: 980px;
}

#lp.bath-2 #clean-2 .bg img{
  left: 230px;
  position: absolute;
  top: 0;
}

#lp.bath-2 #clean-2 .inner{
  margin: 0 auto;
  padding-top: 60px;
  position: relative;
  width: 960px;
}

#lp.bath-2 #clean-2 header{
  padding: 0 0 58px 0;
  width: 320px;
}

#lp.bath-2 #clean-2 header h1{
	padding-bottom: 16px;
  letter-spacing: 1px;
}

#lp.bath-2 #clean-2 header .notice{
	display: block;
	font-size:11px;
	line-height:1.7;
	padding-top:4px;
}

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

#lp.bath-2 #clean-2 .anime p{
  left: 0;
  position: absolute;
  top: 0;
}

#lp.bath-2 #clean-2 .anime .effect-2{
  display: block;
  height: 0;
  overflow: hidden;
  width: 100%;
  zoom: 1;
}

#lp.bath-2 #clean-2 .anime .effect-2 img{
  left: 0;
  position: absolute;
  top: 0;
}

#lp.bath-2 #clean-3{
  -moz-box-shadow: 0 -5px 3px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 -5px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 -5px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 99px 0 93px 0;
  zoom: 1;
  position: relative;
}

#lp.bath-2 #clean-3 .inner{
  margin: 0 auto;
  width: 960px;
}

#lp.bath-2 #clean-3 section{
  overflow: hidden;
  width: 480px;
  zoom: 1;
}

#lp.bath-2 #clean-3 section.right .thumb{
  padding-left: 2px;
}

#lp.bath-2 #clean-3 section.right h1{
  letter-spacing: 3px;
}

#lp.bath-2 #clean-3 section .thumb{
  padding-bottom: 28px;
  padding-top: 2px;
  width: 478px;
  overflow: hidden;
}
#lp.bath-2 #clean-3 section .thumb iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

#lp.bath-2 #clean-3 section .txt{
  float: left;
  width: 240px;
}

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

#lp.bath-2 #clean-3 section .illust{
  float: right;
}

#lp.bath-2 #clean-3 .section-1 .illust{
  padding: 5px 21px 0 0;
  width: 183px;
}

#lp.bath-2 #clean-3 .section-2 .illust{
  width: 201px;
}

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

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

#lp.bath-2 #clean-4 section{
  position: absolute;
  width: 320px;
}

#lp.bath-2 #clean-4 .section-1{
  left: 0;
  top: 226px;
}

#lp.bath-2 #clean-4 .section-2{
  left: 558px;
  top: 114px;
}

#lp.bath-2 #clean-4 .section-2 h1{
  letter-spacing: 1px;
}

#lp.bath-2 #clean-4 li{
  display: block;
  height: 103px;
  position: absolute;
  width: 104px;
}

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

#lp.bath-2 #clean-4 li a:hover{
  background: url(../images/lp/save_time/clean4_link_icon_on.png) no-repeat top left;
}

#lp.bath-2 #clean-4 .link-1{
  left: 453px;
  top: 299px;
}

#lp.bath-2 #clean-4 .link-2{
  left: 685px;
  top: 366px;
}

#lp.bath-2 #clean-4 .link-3{
  left: 34px;
  top: 485px;
}

#lp.bath-2 #clean-4 .link-4{
  left: 497px;
  top: 515px;
}

#lp.bath-2 #clean-4 .link-5{
  left: 832px;
  top: 669px;
}

#lp.bath-2 .popBox{
  height: 642px;
  position: relative;
  width: 800px;
}

#lp.bath-2 #clean4-colorbox-3.popBox,
#lp.bath-2 #clean4-colorbox-4.popBox {
	height: 350px;
}

#lp.bath-2 .popBox .txt{
  bottom: 25px;
  font-size: 16px;
  left: 30px;
  position: absolute;
  text-align: left;
}

#lp.bath-2 .popBox .txt h1{
  padding-bottom: 10px;
}

#lp.bath-2 .popBox .txt p{
  font-size: 13px;
}



#lp.bath-2 #clean4-colorbox-1 .img,
#lp.bath-2 #clean4-colorbox-2 .img,
#lp.bath-2 #clean4-colorbox-4 .img{
float: left;
}
#lp.bath-2 #clean4-colorbox-3 .img ,
#lp.bath-2 #clean4-colorbox-5 .img {
float: right;
}

#lp.bath-2 #clean4-colorbox-1 .txt{
  right: 25px;
  left: auto;
  width: 220px;
}

#lp.bath-2 #clean4-colorbox-2 .txt{
  right: 25px;
  left: auto;
  width: 220px;
}

#lp.bath-2 #clean4-colorbox-3 .txt{
  top: 29px;
  left: 26px;
  bottom: auto;
  width: 220px;
}

#lp.bath-2 #clean4-colorbox-4 .txt{
  right: 25px;
  left: auto;
  width: 220px;
}

#lp.bath-2 #clean4-colorbox-5 .txt{
  left: 29px;
  width: 220px;
}

#lp.bath-2 #cboxClose {
    top: -22px;
    right: 11px;
    width: 27px;
    height: 27px;
}


/*    #experiences
---------------------------------------------------------------*/
#lp.bath-2 #experiences{
  border-top: 1px solid #ccc;
  box-shadow: none;
  padding-top: 90px;
}

#lp.bath-2 #magazine{
  border-top: 1px solid #ccc;
}
#lp.bath-2 .magazine-2{
  display: none;
}

/*===============================================================

  #lp.bath-3

===============================================================*/
/*#lp.bath-3 #lead .inner {
  background-image: url(../images/lp/friendly/lead_bg.jpg);
}*/

#lp.bath-3 #outline .main header{
  padding-bottom: 10px;
}
#lp.bath-3 #outline .main ul{
  background: url(../images/lp/friendly/outline_illust.png) no-repeat center;
  height: 493px;
  margin: 0 auto;
  position: relative;
  width: 960px;
}

#lp.bath-3 #outline .main ul li{
  background-position: bottom left;
  background-repeat: no-repeat;
  display: block;
  font-size: 17px;
  line-height: 1.6;
  padding-bottom: 7px;
  position: absolute;
}

#lp.bath-3 #outline .main ul .caption-01{
  left: 43px;
  top: 128px;
  width: 276px;
}

#lp.bath-3 #outline .main ul .caption-02{
  left: 722px;
  top: 28px;
  width: 206px;
}

#lp.bath-3 #outline .main ul .caption-03{
  left: 638px;
  top: 402px;
  width: 285px;
}

#lp.bath-3 #outline .main .caption{
  font-size: 11px;
  padding: 8px 0 79px 240px;
}

/*    #health
---------------------------------------------------------------*/
#lp.bath-3 #health-1 .thumbs{
  margin-bottom: 48px;
}

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

#lp.bath-3 #health-1 header .left{
  width: 480px;
}

#lp.bath-3 #health-1 header .right{
  width: 480px;
}

#lp.bath-3 #health-2{
  padding-bottom: 143px;
  position: relative;
  margin: 0 auto;
  width: 960px;
}

#lp.bath-3 #health-2 header{
  padding: 20px 0 0 640px;
}

#lp.bath-3 #health-2 .anime{
  left: -296px;
  position: absolute;
}

#lp.bath-3 #health-2 .anime .effect{
  display: none;
  left: 356px;
  position: absolute;
  top: 148px;
}

#lp.bath-3 #health-3{
  /*padding-top: 20px;
  left: 640px;
  position: absolute;
  top: 0;*/
  overflow: hidden;
  padding-bottom: 100px;
  position: relative;
  margin: 0 auto;
  width: 800px;
  z-index: 2;
  zoom: 1;
}

#lp.bath-3 #health-3 header{
  padding:100px 20 0 100px;
  float: left;
  width: 320px;
}

#lp.bath-3 #health-3 header h1{
  padding-bottom: 15px;
}

#lp.bath-3 #health-3 .anime{
  float: right;
  position: relative;
  width: 435px;
  margin-right: -2px;
}

#lp.bath-3 #health-3 .anime .people img{
  position: absolute;
  display: none;
}

#lp.bath-3 #health-3 .anime .people .current{
  display: block;
}

#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;
}

#lp.bath-3 #health-3 .anime .caption{
  font-size: 11px;
  padding-top: 10px;
  padding-left: 25px;
}


/*    #ecology
---------------------------------------------------------------*/
#lp.bath-3 #ecology{
  position: relative;
}

#lp.bath-3 #ecology-1{
  padding-bottom: 64px;
}
#lp.bath-3 #ecology-1 .thumbs{
  margin-bottom: 45px;
}

#lp.bath-3 #ecology-1 header{
  overflow: hidden;
  margin: 0 auto;
  width: 960px;
  zoom: 1;
}

#lp.bath-3 #ecology-1 header h1{
  width: 480px;
}

#lp.bath-3 #ecology-1 header p{
  width: 480px;
}

#lp.bath-3 #ecology-2{
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 960px;
  zoom: 1;
  z-index: 2;
}

#lp.bath-3 #ecology-2 .left,
#lp.bath-3 #ecology-2 .right{
  width: 480px;
}

#lp.bath-3 #ecology-2 .left h1,
#lp.bath-3 #ecology-2 .left p{
  padding: 70px 0 0 160px;
  width: 240px;
}

#lp.bath-3 #ecology-2 .left p{
  padding-top: 15px;
}

#lp.bath-3 #ecology-2 .right{
}

#lp.bath-3 #ecology-2 .anime{
  float: left;
  height: 412px;
  margin-left: -20px;
  position: relative;
  width: 308px;
}

#lp.bath-3 #ecology-2 .anime p{
  position: absolute;
}

#lp.bath-3 #ecology-2 .anime .base{
  left: 21px;
  top: 23px;
}

#lp.bath-3 #ecology-2 .anime .effect{
  display: none;
}

#lp.bath-3 #ecology-2 .meta{
  float: right;
  padding: 73px 0 0 0;
  width: 182px;
  text-align: center;
}

#lp.bath-3 #ecology-2 .meta .illust{
  padding-bottom: 12px;
  position: relative;
  width: 182px;
  height: 217px;
}

#lp.bath-3 #ecology-2 .meta .illust img{
  position: absolute;
}
#lp.bath-3 #ecology-2 .meta .illust span{
  color: #666;
  position: absolute;
  top: 87px;
  text-align: center;
  width: 100%;
  letter-spacing: 1px;
}
#lp.bath-3 #ecology-2 .meta .illust strong{
  color: #666;
  font-weight: normal;
  letter-spacing: 2px;
  position: absolute;
  font-size: 50px;
  text-align: center;
  top: 100px;
  width: 100%;
}

#lp.bath-3 #ecology-2 .meta .txt{
  text-align: center;
}
#lp.bath-3 #ecology-2 .meta .caption{
  padding-top: 45px;
  font-size: 11px;
  padding-left: 5px;
}

#lp.bath-3 #ecology-3{
  border-bottom: 1px solid #ccc;
  /*margin: 0 auto;
  width: 980px;*/
  margin-bottom: 105px;
  position: relative;
  z-index: 1;
}

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

#lp.bath-3 #ecology-3 header{
  padding: 90px 0 30px 480px;
  position: relative;
  width: 350px;
}

#lp.bath-3 #ecology-3 header h1{
  padding-bottom: 18px;
}

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

#lp.bath-3 #ecology-3 .anime-wrapper .notice{
  position: absolute;
  right: 134px;
  bottom: 49px;
  font-size: 11px;
}

#lp.bath-3 #ecology-3 .anime-wrapper h2,
#lp.bath-3 #ecology-3 .anime-wrapper .text{
  text-align: center;
  line-height: 1.2;
}

#lp.bath-3 #ecology-3 .anime-wrapper h2{
  padding-bottom: 12px;
}

#lp.bath-3 #ecology-3 .anime-wrapper .text{
  color: #666;
}

#lp.bath-3 #ecology-3 .anime-wrapper .text strong{
  font-size: 35px;
  font-weight: normal;
  line-height: 1.4;
}

#lp.bath-3 #ecology-3 .anime-wrapper .right{
  position: relative;
}

#lp.bath-3 #ecology-3 .anime-wrapper .right h2{
  font-weight: bold;
  padding-right: 170px;
}

#lp.bath-3 #ecology-3 .anime-wrapper .right .diff{
  background: url(../images/lp/friendly/ecology_section3_line.gif) no-repeat 0 42px;
  color: #666;
  display: none;
  font-size: 18px;
  height: 100%;
  line-height: 1.2;
  padding-left: 115px;
  position: absolute;
  top: 0;
  /*right: 32px;*/
  left: 74px;
  text-align: center;
  /*width: 235px;*/
}

#lp.bath-3 #ecology-3 .anime-wrapper .right .diff p{
  padding-top: 15px;
  padding-left: 100px;
  width: 200px;
  line-height: 1.2;
}

#lp.bath-3 #ecology-3 .anime-wrapper .right .diff p img{
  position: static;
}

#lp.bath-3 #ecology-3 .anime-wrapper .right .diff strong{
  font-size: 50px;
  font-weight: normal;
  line-height: 1.2;
}
#lp.bath-3 #ecology-3 .anime-wrapper .right .diff strong.small{
  padding-right: 2px;
  font-size: 26px;
}

#lp.bath-3 #ecology-3 .anime-wrapper .anime{
  width: 160px;
}

#lp.bath-3 #ecology-3 .anime-wrapper .anime2{
  margin-right: 170px;
}

#lp.bath-3 #ecology-3 .anime-wrapper .anime{
  height: 193px;
  position: relative;
  width: 140px;
}

#lp.bath-3 #ecology-3 .anime-wrapper .anime p{
  left: 0;
  position: absolute;
  /*bottom: 0;*/
  width: 100%;
  height: 100%;
}

#lp.bath-3 #ecology-3 .anime-wrapper .anime p img{
  position: absolute;
  bottom: 0;
  left: 0;
}

#lp.bath-3 #ecology-3 .anime-wrapper .anime .effect{
  bottom: 0;
  left: 1px;
  height: 1px;
  overflow: hidden;
}


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

#lp.bath-3 #ecology-3 .bg .inner img{
  /*top: -84px;*/
  /*bottom: 0;*/
  /*position: absolute;*/
  position: relative;
  left: -516px;
}

#lp.bath-3 #ecology-3 .anime-wrapper .anime .text{
  bottom: 35px;
  height: auto;
}

#lp.bath-3 #ecology-4{
  border-bottom: 1px solid #ccc;
  padding-bottom: 115px;
  width: 100%;
}

#lp.bath-3 #ecology-4 .inner{
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  width: 960px;
  zoom: 1;
}

#lp.bath-3 #ecology-4 section{
  width: 480px;
}

#lp.bath-3 #ecology-4 section header{
  width: 330px;
}

#lp.bath-3 #ecology-4 .left header{
  margin-bottom: 27px;
}

#lp.bath-3 #ecology-4 .right header{
  margin-bottom: 43px;
}

#lp.bath-3 #ecology-4 .left .graph{
  background: url(../images/lp/friendly/ecology_section4_graph.gif) no-repeat;
  margin-left: -1px;
  position: relative;
  width: 401px;
  height: 244px;
}

#lp.bath-3 #ecology-4 .left .graph dl{
  color: #666666;
  display: block;
  position: relative;
  overflow: hidden;
  zoom: 1;
  height: 132px;
}

#lp.bath-3 #ecology-4 .left .graph dl dt{
  float: left;
  width: 88px;
  padding-top: 42px;
  text-indent: 7px;
  margin-left: -7px;
}
#lp.bath-3 #ecology-4 .left .graph dl dd{
  float: right;
  width: 311px;
  overflow: hidden;
  zoom: 1;
}

#lp.bath-3 #ecology-4 .left .graph dl dd .title{
  padding-top: 54px;
  padding-left: 21px;
  float: left;
}

#lp.bath-3 #ecology-4 .left .graph dl dd .txt{
  padding-top: 35px;
  float: right;
  width: 123px;
  line-height: 1.3;
}

#lp.bath-3 #ecology-4 .left .graph dl dd .txt span{
  font-size: 40px;
  letter-spacing: 2px;
}

#lp.bath-3 #ecology-4 .left .graph dl.table-2 dt{
  padding-top: 38px;
}

#lp.bath-3 #ecology-4 .left .graph dl.table-2 .title{
  padding-top: 52px;
}

#lp.bath-3 #ecology-4 .left .graph dl.table-2 .txt{
  padding-top: 31px;
}

#lp.bath-3 #ecology-4 .left .graph dl.table-2 .txt span{

}

#lp.bath-3 #ecology-4 .right .anime{
  height: 167px;
  position: relative;
  margin-bottom: 15px;
  margin-left: -5px;
  width: 483px;
}

#lp.bath-3 #ecology-4 .right .anime p{
  left: 0;
  position: absolute;
  top: 0;
}

#lp.bath-3 #ecology-4 .right .anime .effect{
  bottom: 0;
  height: 1px;
  overflow: hidden;
  position: absolute;
  left: 0;
  width: 100%;
  top: auto;
}

#lp.bath-3 #ecology-4 .right .anime .effect img{
  bottom: 0;
  position: absolute;
  left: 0;
}

/*#lp.bath-3 #ecology-4 .right .anime .text{
  color: #666;
  height: 100%;
  font-size: 16px;
  line-height: 164px;
  text-align: center;
  width: 100%;
}*/
#lp.bath-3 #ecology-4 .right .anime .text{
  color: #666;
  left: 155px;
  top: 40px;
  font-size: 16px;
}

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

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

#lp.bath-3 #ecology-4 .right .anime .diff strong{
  font-size: 28px;
  font-weight: normal;
  padding: 0 5px;
}
#lp.bath-3 #ecology-4 .right .caption{
  color: #666;
  font-size: 11px;
  padding-left: 40px;
}

#lp.bath-3 #experiences{
  padding-top: 90px;
  box-shadow: none;
}

#lp.bath-3 .magazine-3{
  display: none;
}

/*===============================================================

  #lp.bath-4

===============================================================*/
/*#lp.bath-4 #lead .inner {
  background-image: url(../images/lp/history/lead_bg.jpg);
}*/

#lp.bath-4 #outline{
  padding-bottom: 137px;
}
#lp.bath-4 #outline .main header {
  margin-bottom: 76px;
  width: 570px;
}

#lp.bath-4 #outline-1{
  margin: 0 auto;
  overflow: hidden;
  width: 960px;
  zoom:1;
}

#lp.bath-4 #outline-1 .left{
  float: left;
  width: 480px;
  padding-top: 12px;
}

#lp.bath-4 #outline-1 .right{
  float: right;
  width: 480px;
  padding-top: 5px;
}

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

/*    #quality
---------------------------------------------------------------*/
#lp.bath-4 #quality-1{
  margin: 0 auto 60px auto;
  overflow: hidden;
  width: 960px;
  zoom: 1;
}

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

#lp.bath-4 #quality-1 .box h1{
  font-size: 13px;
  letter-spacing: 1px;
  padding-bottom: 12px;
  text-align: center;
}

#lp.bath-4 #quality-1 .box p{
  text-align: center;
}

#lp.bath-4 #quality-1 .left{
  float: left;
}

#lp.bath-4 #quality-1 .right{
  float: right;
}

#lp.bath-4 #quality-1 .anime{
  height: 281px;
  margin: 0 auto 16px auto;
  position: relative;
  width: 281px;
  overflow: hidden;
}

#lp.bath-4 #quality-1 .anime p{
  left: 0;
  position: absolute;
  top: 0;
}

#lp.bath-4 #quality-1 .anime p img{
  max-width: none;
}

#lp.bath-4 #quality-1 .anime .after{
  display: block;
  /*height: 100%;*/
  height:0;
  overflow: hidden;
  width: 148px;
  left: 141px;
}

#lp.bath-4 #quality-1 .anime .text{
  display: none;
  position: absolute;
  top: 120px;
  left: 180px;
}

#lp.bath-4 #quality-2{
  margin: 0 auto 140px auto;
  overflow: hidden;
  width: 960px;
  zoom: 1;
}

#lp.bath-4 #quality-2 .left,
#lp.bath-4 #quality-2 .right{
  width: 480px;
}

#lp.bath-4 #quality-2 .left{
  float: left;
}

#lp.bath-4 #quality-2 .left h1,
#lp.bath-4 #quality-2 .left p{
  padding-right: 70px;
}

#lp.bath-4 #quality-2 .right{
  float: right;
  padding-top: 5px;
}

#lp.bath-4 #quality-3{
  overflow: hidden;
  margin: 0 auto 167px auto;
  width: 980px;
  zoom: 1;
}

#lp.bath-4 #quality-3 .left,
#lp.bath-4 #quality-3 .right{
  width: 480px;
}

#lp.bath-4 #quality-3 .right h1,
#lp.bath-4 #quality-3 .right p{
  padding-left: 80px;
}

#lp.bath-4 #quality-3 .left{
  padding-top: 5px;
  padding-left: 3px;
}

#lp.bath-4 #quality-3 .right{
  padding-right: 10px;
}

/*    #history
---------------------------------------------------------------*/
#lp.bath-4 #history-1 header{
  margin: 0 auto;
  overflow: hidden;
  padding: 45px 0 87px 0;
  zoom: 1;
  width: 960px;
}

#lp.bath-4 #history-1 header h1,
#lp.bath-4 #history-1 header h2,
#lp.bath-4 #history-1 header p{
  display: block;
  width: 480px;
}

#lp.bath-4 #history-2{
  background-color: #f3f3f3;
  /*box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1) inset;*/
  -moz-box-shadow:inset 0 5px 3px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow:inset 0 5px 3px rgba(0, 0, 0, 0.05);
  box-shadow:inset 0 5px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  padding: 80px 0 30px 0;
}

#lp.bath-4 #history-2 .section{
  margin: 0 auto;
  padding-bottom: 25px;
  overflow: hidden;
  position: relative;
  width: 960px;
  zoom: 1;
}

#lp.bath-4 #history-2 .section2{
  margin: 0 auto;
  padding-bottom: 25px;
  overflow: hidden;
  position: relative;
  width: 960px;
  zoom: 1;
}

#lp.bath-4 #history-2 .section .year{
  float: left;
  padding: 0 2px 0 0;
  margin-bottom: 77px;
  width: 238px;
}

#lp.bath-4 #history-2 .section .year h1{
  padding-bottom: 9px;
  font-size: 30px;
  letter-spacing: 5px;
}
#lp.bath-4 #history-2 .section .year h2{
  font-size: 23px;
  line-height: 1.4;
  letter-spacing: 2px;
  margin: 0 0 20px 0;
}

#lp.bath-4 #history-2 .section .year .thumb{
  margin: 0 0 15px 0;
}

#lp.bath-4 #history-2 .section .year .thumb-2{
  margin: 15px 0 0 0;
}

#lp.bath-4 #history-2 .section .year .text{
  padding: 0 2px 0 3px;
  display: block;
}

#lp.bath-4 #history-2 .section .year-2012{
  padding-bottom: 115px;
  width: 320px;
}

#lp.bath-4 #history-2 .section .year-2012 h2{
  font-size: 23px;
  line-height: 1.4;
  letter-spacing: 2px;
  margin: 0 0 20px 0;
}

#lp.bath-4 #history-2 .section .year-2024{
  padding-bottom: 115px;
  width: 320px;
}

#lp.bath-4 #history-2 .section .year-2024 h2{
  font-size: 23px;
  line-height: 1.4;
  letter-spacing: 2px;
  margin: 0 0 20px 0;
}

#lp.bath-4 #history-2 .yearp{
  margin: 0 48px 0 0;
}

.year-2024{
  line-height: 1.4;
  letter-spacing: 2px;
  margin: 0 10 20px 0;
}

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

#lp.bath-4 #history-2 .bg2024{
  margin: 0 0 20px 0;
}

#lp.bath-4 #history-2 .inner{
  margin: 0 auto;
  width: 960px;
}
#lp.bath-4 #history-2 .bg img{
  margin-left: 320px;
}

#lp.bath-4 #experiences-2{
  padding-top: 90px;
}

#lp.bath-4 #magazine{
  -moz-box-shadow: 0 -5px 3px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 -5px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 -5px 3px rgba(0, 0, 0, 0.05);
  position: relative;
}

#lp.bath-4 .magazine-4{
  display: none;
}

@media all and (min-width: 0px) and (max-width: 640px)  {

#lp.bath-1 #relax-2 .img .txt2{
  left: 10px;
  position: absolute;
  top: 20px;
  width: 320px;
}

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

#lp.bath-1 .magazine-1{
  display: none;
}

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

#lp.bath-1 #relax-2 .img2 .base{
	padding:7px 0 500 20px;
}

#lp.bath-1 #relax-2 .img2 .txt{
position: relative;
  top: 100px;
  width: 180px;
}

#lp.bath-1 #relax-2 .img2 .txt3{
font-size: 10px;
  left: 210px;
  position: absolute;
  top: 10px;
  width: 110px;
}



}

@media (min-width: 901px) {
	.disp-spOnly {
		display: none !important;
	}
}
@media (max-width: 900px) {
	.disp-pcOnly {
		display: none !important;
	}

}
/*    #series
---------------------------------------------------------------*/
/* added YBS 20141001*/
/* delete YBS 20150916*/

/*#lp #series .article-wrapper article {
  padding:0 4px 0 0;
  width:237px;
}

#lp #series .article-wrapper article a span{
  width:237px;
  height:238px;
}*/


/* added 20160122 GIGANT */
/*#lp #series .article-wrapper article {
  width: 237px;
}

#lp #series .article-wrapper article a span{
  width: 237px;
  height: 240px;
}*/