﻿/* =============================================== base */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {

margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;font-family: "メイリオ", "KozGoPro-Light", "小塚ゴシック Pro L", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif;

}

/* HTML5 display-role reset for older browsers */

body {line-height: 1;}

ol, ul {list-style: none;}

table {border-collapse: collapse;border-spacing: 0;}

/*body {width:825px;}*/

ul, li, lo, p {margin:0;padding:0;list-style:none;}

img, table, th, tr, td {border:0;}

.cl_main {margin: 0 auto;text-align: center;}

.cl_main:after {display: block;clear: both;content: "";}

a:hover {

  opacity:0.7;

}

/* =============================================== case01 */

#mainvisual {

    margin-top: 0 !important;

}

.case01 {

  height:610px;

    background:url(https://vegasiku.com/perfect-space/lp/nlh/nlh_lp01_bg3.png) top center no-repeat, url(https://vegasiku.com/perfect-space/lp/nlh/nlh_lp01_bg2.gif) top center no-repeat, url(https://vegasiku.com/perfect-space/lp/nlh/nlh_lp01_bg1.png) top center no-repeat #000;

}

.case01 .inner-box{

  width:825px;

  height:610px;

  margin:0 auto;

  position:relative;

  overflow:hidden;

}

.slidetext1 {position:absolute;top:205px;left:30px;z-index:2;}

.slidetext2 {position:absolute;top:400px;left:30px;z-index:2;}

.itemname {

  background-color:#000;

  color:#fff;

}

.itemname p {
    display: block;
    width: 825px;
    margin: 0 0 0 20px;
    padding: 10px 0;
    text-align: left;
    color: #fff;
    font-size: 18px;
}

/* =============================================== case02 */

.case02 {

    width: 825px;

    background: url(https://vegasiku.com/perfect-space/lp/nlh/nlh_lp02_bg.jpg) top center no-repeat;

  height:750px;

}

/* =============================================== case03 */

.cl_03 {

  height:1313px;

  margin: 20px 0;

  background: url(https://vegasiku.com/perfect-space/lp/nlh/nlh_lp03_01_bg.jpg) top center no-repeat;

  position:relative;

}

.button001, .button002, .button003 {position: absolute;bottom: 330px;width: 100px !important;}

.button001 {left: 60px;}

.button002 {left: 355px;}

.button003 {left: 640px;}

.cl_03_2 {

  margin: 20px 0;

}

/* =============================================== case04 */

.cl_04 {

  height:620px;

    background: url(https://vegasiku.com/perfect-space/lp/nlh/nlh_lp04_bg.jpg) top center no-repeat;

    margin: 0;

  position: relative;

}

.threesixty {

    overflow: hidden;

    margin: 0 auto 0 0;

    padding: 130px 0 0 25px;

}

.threesixty .threesixty_images {

  display: none;

  list-style: none;

  margin: 0;

  padding: 0;

}

.threesixty .threesixty_images img.previous-image {

  position: absolute;

  visibility: hidden;

  width: 0;

}

.threesixty .threesixty_images img.current-image {

  visibility: visible;

}

.threesixty .spinner {

  width: 60px;

  display: block;

  margin: 0 auto;

  height: 30px;

  background: #333;

  background: rgba(0, 0, 0, 0.7);

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

}

.threesixty .spinner span {

  font-family: Arial, "MS Trebuchet", sans-serif;

  font-size: 12px;

  font-weight: bolder;

  color: #FFF;

  text-align: center;

  line-height: 30px;

  display: block;

}

.zoom_item {

    position: absolute;

    top: 130px;

    right: 25px;

}

.zoomWindow {

  left: -393px !important;

  top: 0 !important;

}

.icon_zoom {

    position: absolute;

    bottom: 54px;

    right: 25px;

    z-index: 40;
    width: 82px !important;

}

.icon_360 {

    position: absolute;

    bottom: 47px;

    left: 320px;

    width: 82px !important;

}

/* =============================================== case05 */

.cl_05 {

    width: 825px;

    margin: 0;

}

/* =============================================== case06 */

.cl_06 {

  margin:0 auto 20px;

}

.cl_06 img {

  margin:20px auto 0;

}



/* =============================================== case07 */

.cl_07 {

  position: relative;

  background: url(https://vegasiku.com/perfect-space/lp/nlh/nlh_lp07_bg.jpg) no-repeat top center;

  margin: 0 0 20px 0;

}

#clickablemap {

  width: 825px;

  height: 747px;

  margin: 0 auto;

  position: relative;

}

#clickablemap li a, #clickablemap li a:link, #clickablemap li a:visited {display: block;}

li.furniture {position: absolute;}

.scene {overflow: hidden;}

.scene a:hover {position: relative;}

li.furniture span {

    position: absolute;

    background-color: #fff;

    visibility: hidden;

    right: 0;

    padding: 15px;

    width: 380px;

    border: 1px solid #999;

}

li.furniture span h2 {

    margin: 12px 0 0;

    font-size: 16px;

    font-weight: bold;

    text-align: left;

}

li.furniture span p {

    padding: 5px 0 0;

    font-size: 12px;

    line-height: 150%;

    text-align: left;

}



li.furniture:hover span{visibility:visible;z-index: 10;}

.scene1 a:hover, .scene2 a:hover, .scene3 a:hover, .scene4 a:hover, .scene5 a:hover {opacity:1;}

li.pic1 {top: 309px;left: 122px;}

.scene1 {width: 147px;height: 159px;}

.scene1 a:hover {top: -159px;left: 0px;}

li.pic1:hover span{top: -80px;left: 200px;}



li.pic2 {top: 329px;right: 93px;}

.scene2 {width: 74px;height: 139px;}

.scene2 a:hover {left: -75px;}

li.pic2:hover span{top: -80px;right: 100px;}



li.pic3 {bottom: 31px;left: 32px;}

.scene3 {width: 159px;height: 170px;}

.scene3 a:hover {top: -171px;}

li.pic3:hover span{bottom: 0;left: 220px;}



li.pic4 {bottom: 31px;right: 190px;}

.scene4 {width: 72px;height: 85px;}

.scene4 a:hover {top: -86px;}

li.pic4:hover span{bottom: 50px;right: 100px;}



li.pic5 {bottom: 51px;right: 29px;}

.scene5 {width: 48px;height: 138px;}

.scene5 a:hover {left: -48px;top: 0px;}

li.pic5:hover span{bottom: -10px;right: 80px;}

.scene2 a {width: 149px !important;}
.scene5 a {width: 96px !important;}
.scene2 a img {width: 149px !important;}
.scene5 a img {width: 96px !important;}

@-webkit-keyframes modalFadeIn {

    0% {opacity:0;display:block;}

    100% {opacity:1;}

}

li.furniture:hover span {

    -webkit-animation-name: modalFadeIn;

    -webkit-animation-duration: 1s;

    -webkit-animation-iteration-count: 1;

    opacity: 1;

    display:block;

}



/* =============================================== case08 */

.cl_08 {

  margin: 0 auto 20px;

}

/* =============================================== case09 */

.cl_09 {

  margin: 0 auto 20px;

}

.cl_09_2 {

    margin: 0 auto 20px;

}

/* =============================================== case10 */

.case10 {

    margin: 0 auto 30px;

}

/* =============================================== case11 */

.case11 {

  margin:20px 0;

}

.cl_11 {

    background: url(https://vegasiku.com/perfect-space/lp/nlh/nlh_lp11_bg.gif) top left;

    height: 680px;

    position: relative;

    margin: 20px auto;

}

.cl_11 .text11 {

    position: absolute;

    bottom: 25px;

    right: 0;

    width: 493px !important;
}

.cl_11_2 {

    position: relative;

    margin: 0 auto 20px;

}

.cl_11_2 .water {

    position: absolute;

    top: 80px;

    left: 0;

    width: 396px !important;

}

/* =============================================== case12 */

.cl_12 {

  height:545px;

  background:url(https://vegasiku.com/perfect-space/lp/nlh/nlh_lp12_bg.jpg) no-repeat top center;

  position:relative;

}

img.animal1 {

    position: absolute;

    top: 315px;

    left: 118px;

    opacity: 0;

    animation: animal1 9s linear 0s infinite normal;
    width: 83px !important;

}

img.animal2 {

    position: absolute;

    top: 220px;

    left: 383px;

    opacity: 0;

    animation: animal2 9s linear 0s infinite normal;
    width: 81px !important;
}

img.animal3 {

    position: absolute;

    top: 198px;

    left: 575px;

    opacity: 0;

    animation: animal3 9s linear 0s infinite normal;
    width: 158px !important ;

}

@keyframes animal1 {

  0% {opacity:0;}

  10% {opacity:0;}

  20% {opacity:1;}

  30% {opacity:1;}

  40% {opacity:1;}

  50% {opacity:1;}

  60% {opacity:1;}

  70% {opacity:1;}

  80% {opacity:1;}

  90% {opacity:1;}

  100% {opacity:0;}

}



@keyframes animal2 {

  0% {opacity:0;}

  10% {opacity:0;}

  20% {opacity:0;}

  30% {opacity:1;}

  40% {opacity:1;}

  50% {opacity:1;}

  60% {opacity:1;}

  70% {opacity:1;}

  80% {opacity:1;}

  90% {opacity:1;}

  100% {opacity:0;}

}

@keyframes animal3 {

  0% {opacity:0;}

  10% {opacity:0;}

  20% {opacity:0;}

  30% {opacity:0;}

  40% {opacity:1;}

  50% {opacity:1;}

  60% {opacity:1;}

  70% {opacity:1;}

  80% {opacity:1;}

  90% {opacity:1;}

  100% {opacity:0;}

}

/* =============================================== case13 */

.cl_13 {

  width:825px;

    margin: 0 auto;

}

ul.nlh_j {

    margin: 0 0 30px;

}

ul.nlh_j li {

  width:130px;

  height:245px;

  float:left;

  padding:0 2px;

  border-right:3px dotted #cccccc;

  text-align:center;

}

ul.nlh_j li.nb {

  border-right:0;

}

ul.nlh_j li.title {

  margin:5px 0;

  border-right:0;

  width:825px;

  height:auto;

}

.nlh_j p {

    font-size: 13px;

    padding: 0 0 5px 0;

}

.nlh_j a {text-decoration:none;color:#333;}

.red {color:#ff0000;}



/* =============================================== case14 */

.cl_14 {

  padding:20px 0;

    background-color: #e2dace;

}

.cl_14 .itemlink {

  position:relative;

  margin:0 auto 30px;

}

.cl_14 .itemlink img.button1, .cl_14 .itemlink img.button2, .cl_14 .itemlink img.button3 {
    width: 100px !important;
    bottom: 36px;

  position:absolute;

}

.cl_14 .itemlink .button1 {left: 181px;}

.cl_14 .itemlink .button2 {left: 419px;}

.cl_14 .itemlink .button3 {left: 660px;}

.cl_14 .itemlink a:hover {opacity:0.7;}

/* =============================================== case15 */

.cl_15 {

  height: 780px;

    background: url(https://vegasiku.com/perfect-space/lp/nlh/nlh_lp15.jpg) no-repeat top right;

  margin: 0;

}

/* =============================================== case16 */

.cl_16 {

    width: 825px;

    margin: 0;

}

.rack {

  height:619px;

  position:relative;

}

.rack img.rack_2 {

    position: absolute;

    bottom: 0;

    left: 0;

}

/* =============================================== case17 */

.cl_17 {

    position: relative;

  overflow: hidden;

    margin: 180px auto 0;

}

/* ===============================================  case18 */

.cl_18 {

    margin: 30px auto 0;

}

/* ===============================================  case19 */

/* float解除 !!!必ず最下部に記載する事!!!

==================================================================*/

.clearfix:after { /*floatの解除、ここがポイント*/

  display:block !important;

  clear:both !important;

  height:0px !important;

  visibility:hidden !important;

  content:"." !important;

}

.clearfix {

  min-height: 1px !important; /*IE6、7対策*/

}


/******iframeスマホ・PC調整*****/

/*PC（スマホ以外）*/
.nlh_lp_sm{
	display:none;
}

.nlh_lp_ifr{
	width:825px;
}

/*ここからスマートフォン用CSS */
@media screen and (max-width: 480px) {
	.nlh_lp_pc{
	display:none;
}

.nlh_lp_sm{
	display:block;
}
}