@charset "utf-8";


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


#contents html {
  line-height: 1;
}
#contents ol, #contents ul {
  list-style: none;
}
#contents table {
  border-collapse: collapse;
  border-spacing: 0;
}
#contents caption, #contents th, #contents td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
#contents q, #contents blockquote {
  quotes: none;
}
#contents q:before, #contents q:after, #contents blockquote:before, #contents blockquote:after {
  content: "";
  content: none;
}
#header a img,
#contents a img {
  border: none;
}
#contents article, #contents aside, #contents details, #contents figcaption, #contents figure, #contents footer, #contents header, #contents hgroup, #contents menu, #contents nav, #contents section, #contents summary {
  display: block;
}
#header a:hover img,
#footer a:hover img,
#contents a:hover img {
  opacity:0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
  -moz-opacity:0.7;
  -khtml-opacity: 0.7;
  /zoom:1;
}
#header .logo a:hover img {
  opacity:1.0;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=70)";
  -moz-opacity:1.0;
  -khtml-opacity: 1.0;
}
body{
  width: 100%;
  min-width:1010px;
  margin-top: 0;
  font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
}
#container{
  width: 100%;
  /*overflow: visible;*/
}
#contents #header{
  width: 968px;
  margin: 16px auto 0;
  padding-bottom: 20px;
}
#contents #header ul{
  margin: 0;
  padding: 0;
  height: 56px;
  list-style: none;
}
#contents #header li{
  float: left;
  height: 56px;
  padding-left: 12px;
}
#contents #header .right{
  height: 56px;
}
#contents #headBlock {
  height: 87px;
}
h1{
  text-align: center;
  position: static;
  width: auto;
  border: none;
}
#contents p{ 
  text-indent: inherit;
}
#contents #main_area{
  min-height: 0;
}
#contents #gnavi {
  width: 100%;
  height: 67px;
  background-image: url(../images/bg_navi.jpg);
}
.fixed {
  height: 67px;
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

}
#contents #gnavi ul{
  width: 982px;
  height: 67px;
  margin: 0 auto;
}
#contents #gnavi li{
  float: left;
  height: 67px;
}
#contents #eyecatchBlock{
  height: 589px;
  background-image: url(../images/bg_eyecatch.jpg);
  background-position: center top;
  position: relative;
}

#contents #eyecatchBlock .banner_setsuden_top {
  position: absolute;
  bottom: 50px;
  left: 50%;
  margin: 0 0 0 410px; 
}

@media (max-width : 1220px ) {
  #contents #eyecatchBlock{
    background-position: -400px top;
  }

  #contents #eyecatchBlock .banner_setsuden_top {
    left: 1010px;
    margin: 0; 
  }
}

#contents #main_area{
  background-image: url(../images/bg_section.jpg);
}
#contents .section {
  margin-top: -68px;
  padding:68px 0 50px;
}
#contents .section h2{
  margin-bottom: 30px;
  background-image: url(../images/bg_tit.jpg);
  text-align: center;
  height: 152px;
}
p.border_line{
  background-image: url(../images/bg_line.png);
  text-align: center;
  height: 25px;
  margin: 30px 0;
}
#contents .section .note{
  width: 984px;
  margin: 0 auto;
}
#contents .section h3{
  padding-bottom: 28px;
  text-align: center;
}
#contents .section .txt{
  font-size: 125%;
  line-height: 1.8;
  letter-spacing: 2px;
  background-image: url(http://www.eyefulhome.jp/rakurashi2015/images/bg.png);
  background-repeat: no-repeat;
  background-position: right bottom;
}
#contents #sec1 .txt{
  width: 984px;
  padding-bottom: 30px;
  background-image: url(http://www.eyefulhome.jp/rakurashi2015/images/bg_sec1.png);
  background-repeat: no-repeat;
  background-position: right bottom;
}
#contents #sec1 .details {
  margin-top: -10px;
}
#contents #sec1 .details li{
  position: relative;
  float: left;
  height: 407px;
}
#contents #sec1 .details li.detail1{
  width: 334px;
}
#contents #sec1 .details li.detail2{
  width: 316px;
}
#contents #sec1 .details li.detail3{
  width: 334px;
}
#contents #sec1 .details li .btn{
  position: absolute;
  left: 25px;
  bottom: 37px;
}
#contents #sec1 .details li.detail1 .btn{
  left: 42px;
}
#contents #sec2 {
  padding-bottom: 0;
}
#contents #sec2 .note{
  padding-bottom: 50px;
    background-repeat: no-repeat;
  background-position: right bottom;
}
#contents #sec2 rt{
  letter-spacing: 5px;
}
#contents #sec2 .caption{
  padding: 10px 0 34px;
  background-repeat: no-repeat;
  background-position: right bottom;
}
#contents #sec2 .details .left{
  float: left;
  width: 486px;
}
#contents #sec2 .details .right{
  float: right;
  width: 498px;
}
#contents #sec2 .details .center{
  text-align: center;
}
#contents #sec2 .details .attn{
  width: 740px;
  margin: 0 auto;
  padding-left: 1em;
  text-indent: -1em;
  letter-spacing: 2px;
  background-repeat: no-repeat;
  background-position: right bottom;
}
#contents #sec3 {
  background-repeat: no-repeat;
  background-position: center bottom;
}
#contents #sec3 .center{
  text-align: center;
}
#contents #sec3 .condition {
  width: 640px;
  margin: 0 auto;
  padding-bottom: 20px;
  background-repeat: no-repeat;
  background-position: right bottom;
  line-height: 1.4;
  letter-spacing: 1px;
  font-size: 80%;
}
#contents #sec4 {
  padding-bottom: 0;
}
#contents #sec4 .left{
  float: left;
  width: 631px;
  margin-left: -51px;
}
#contents #sec4 .right{
  float: right;
/*  padding:40px 20px 0 0;
*/}
#contents #sec4 .condition {
  width: 984px;
  margin: 0 auto;
  padding-top: 20px;
  background-repeat: no-repeat;
  background-position: right bottom;
  line-height: 1.4;
  letter-spacing: 1px;
  font-size: 80%;
}
#contents #sec5 {
  padding-bottom: 20px;
}
#contents #sec5 .left{
  float: left;
  width: 455px;
  padding-left: 30px;
}
#contents #sec5 .right{
  float: right;
  width: 455px;
/*  padding-right: 30px;
*/  margin-bottom: 0;
}
#contents #sec5 .last{
  padding-left: 30px;
}
#contents #sec5 .gp{
  padding-bottom: 35px;
}
#contents #sec5 .a,
#contents #sec5 .a2{
  margin-top: 10px;
  padding:0 45px;
  background-image: url(http://www.eyefulhome.jp/rakurashi2015/images/a_1.png);
  background-repeat: no-repeat;
  background-position: left top;
  font-size: 117%;
  line-height: 1.5;
  letter-spacing: 1px;
}
#contents #sec5 .a2{
  background-image: url(http://www.eyefulhome.jp/rakurashi2015/images/a_2.png);
}
#contents #sec5 .use {
  padding-bottom: 40px;
}
#contents #sec5 .use h3{
  padding-bottom: 0;
}
#contents #sec5 .use ol{
  padding-bottom: 25px;
}
#contents #sec5 .use li{
  background-repeat: no-repeat;
  background-position: right bottom;
}
#contents #sec5 .use .txts{
  padding:18px 30px; 
  background-image: url(http://www.eyefulhome.jp/rakurashi2015/images/bg_sec5.png);
  background-position: 0 bottom;
  background-repeat: no-repeat;
  font-size: 117%;
  line-height: 1.5;
  letter-spacing: 1px;
}
#contents #sec5 .banner{
  padding-top: 20px;
  border-top: 2px solid #CBC6A5;
}
#contents #sec5 .banner ul{
  width: 984px;
  margin: 0 auto;
}
#contents #sec5 .banner li{
  position: relative;
  padding: 0;
  width: 484px;
}
#contents #sec5 .banner .btn{
  position: absolute;
  left: 270px;
  bottom: 16px;
}
#contents #footerBlock {
  border-top: 1px solid #ccc;
  background: #fff;
}
#contents #footer {
  position:relative;
  width: 969px;
  height: 112px;
  min-height: 112px;
  margin: 20px auto 0;
  background-image: none;
  color: #333;
}
#contents #footer ul li {
  float: left;
  padding: 0 27px 0 0;
}
#contents #footer .lixil {
  position:absolute;
  top:47px;
  left:0;
}
#contents #footer .eyeful {
  position:absolute;
  top:47px;
  right:0;
}
#contents #footer p {
  position:absolute;
  top:45px;
  left:80px;
  font-size:10px;
  line-height:20px;
}

.movie {margin-top: 2% } 
.btn {text-align: center;}

.foo{z-index:1;position:relative;margin:25px;}

.foo img{z-index:2;position:absolute;pointer-events: none; text-align: center; margin:0 auto;}
.foo a{display:inline-block;/*background:url("http://kachibito.net/wp-content/uploads/2012/08/play.png") no-repeat;*/width:44px;height:25px;position:absolute;bottom:0;left:5px;z-index:3;pointer-events: none;}

#graylayer {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #666;
  filter:alpha(opacity=75);
  opacity: 0.75;
  z-index: 200;
}
* html #graylayer {
  position: absolute;
}
#overlayer {
  display: none;
  width: 80%;
  background: #111;
  padding: 1em;
  border: 2px solid #CCC;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 300;
  height: 90%;
  overflow: scroll;
}
 
* html #overlayer {
  position: absolute;
}
 
#overlayer button.close {
  position: absolute;
  top: 10px;
  right: 10px;
}
.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 60px;
    height: 0;
    overflow: hidden;
    margin-top: 3.25%;
    margin-bottom: 3.25%;
}
#top_video{
  display: none;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#top_video .youtube iframe {
  max-width: 600px;
  max-height: 450px;

}

.btn {width: 982px; margin: 0 auto; text-align: center; }
.btn_01 {float: left; width: 50%}

a{
  text-decoration: none;
}

a:active{
text-decoration:none;
border-width:0px;
border-style:none;
border-color:transparent;
}

/*閉じるボタン */
#cboxClose{position:absolute; bottom:0; right:-30px; background:url(../images/btn.jpg) no-repeat 0 0; width:30px; height:30px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}

#contents .case_study {
  background: #fff;
  border-radius: 8px;
  max-width: 980px;
  margin: 0 auto;
  line-height: 1.65;
}

#contents .case_study_inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 50px 0;
}

#contents .case_study_inner:after {
  content: '';
  display: block;
  clear: both;
}

#contents .case_study_main {
  float: left;
  max-width: 536px;
}

#contents .case_study_side {
  float: right;
}

#contents .case_study_title {
  margin: 0 -30px 15px 0;
}

#contents .case_study_main_photo {
  margin: 0 0 20px;
}

#contents .case_study_title_lead {
  margin: 0 0 40px;
}

#contents .case_study_title_text {
  margin: 0 0 40px;
  font-size: 16px;
}

#contents .case_study_title_text strong {
  color: #ee7a00;
  font-weight: bold;
  position: relative;
  z-index: 2;
  background: #ffef00;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAMAAACeL25MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/+8AAAAA6ydCDQAAAA5JREFUeNpiYMAEAAEGAAAUAAFoSTJjAAAAAElFTkSuQmCC) 0 50% no-repeat;
  background-size: 100% 60%;
}

#contents .case_study_photo_list {
  overflow: hidden;
  margin: 0 0 0 -15px;
}

#contents .case_study_photo_list_item {
  float: left;
  padding: 0 0 0 15px;
  font-size: 11px;
  width: 33.33%;
  box-sizing: border-box;
}

#contents .case_study_photo {
  display: block;
  margin: 0 0 1em;
}

#contents .case_study_side_block {
  margin: 0 0 20px;
}

#contents .case_study_advice_text {
  margin: 0 -36px 0 -30px;
}

#contents .block {
  padding-bottom: 28px;
  text-align: center;
}

#contents .annotation {
  text-align: left;
  margin: 1em auto 0;
  font-size: 0.85em;
  line-height: 1.4;
  max-width: 980px;
}

#contents .video_annotation {
  text-align: left;
  margin: 1em auto 0;
  font-size: 0.85em;
  line-height: 1.4;
  max-width: 660px;
}