@charset "Shift_JIS";

/* CSS Document */

.body {
    overflow: hidden;
}


/* ・ｽ・ｽ・ｽg======================================================================================================== */

#mainContainer {
    /*background-image: url(images/pagetitle.png);
	background-repeat: no-repeat;
	background-position: left 20px;*/
}

#mainContainer h2 {
    height: 10px;
    overflow: hidden;
}

#mainContainer #topCopy {
    margin: 0 0 50px;
}

#mainContainer #topCopy h3 {
    height: 80px;
    overflow: hidden;
    margin: 0 0 10px;
}

#mainContainer .house {
    background-image: url(images/house.png);
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
    width: 680px;
    position: relative;
}


/* ・ｽ{・ｽ^・ｽ・ｽ・ｽ・ｽ・ｽ・ｽ */

#mainContainer .house li {}

#mainContainer .house li a {
    background-repeat: no-repeat;
    background-position: left top;
    display: block;
    height: 43px;
    width: 101px;
    overflow: hidden;
    position: absolute;
}

#mainContainer .house #BTroof a {
    background-image: url(images/btn-roof.png);
    left: 272px;
    top: 24px;
}

#mainContainer .house #BTroof a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTexterior a {
    background-image: url(images/btn-exterior.png);
    left: 51px;
    top: 105px;
}

#mainContainer .house #BTexterior a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTcloset a {
    background-image: url(images/btn-closet.png);
    left: 198px;
    top: 114px;
}

#mainContainer .house #BTcloset a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTwc a {
    background-image: url(images/btn-wc.png);
    left: 449px;
    top: 219px;
}

#mainContainer .house #BTwc a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTfloor a {
    background-image: url(images/btn-floor.png);
    left: 270px;
    top: 321px;
}

#mainContainer .house #BTfloor a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTwindow a {
    background-image: url(images/btn-window.png);
    left: 528px;
    top: 425px;
}

#mainContainer .house #BTwindow a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTbath a {
    background-image: url(images/btn-bath.png);
    left: 415px;
    top: 430px;
}

#mainContainer .house #BTbath a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTlight a {
    background-image: url(images/btn-light.png);
    left: 238px;
    top: 379px;
}

#mainContainer .house #BTlight a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTpowder a {
    background-image: url(images/btn-powder.png);
    left: 414px;
    top: 360px;
}

#mainContainer .house #BTpowder a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTintercom a {
    background-image: url(images/btn-intercom.png);
    left: 20px;
    top: 394px;
}

#mainContainer .house #BTintercom a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTentrance a {
    background-image: url(images/btn-entrance.png);
    left: 20px;
    top: 451px;
}

#mainContainer .house #BTentrance a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTkitchen a {
    background-image: url(images/btn-kitchen.png);
    left: 285px;
    top: 431px;
}

#mainContainer .house #BTkitchen a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTzousaku a {
    background-image: url(images/btn-zousaku.png);
    left: 251px;
    top: 225px;
    width: 131px;
}

#mainContainer .house #BTzousaku a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTbalcony a {
    background-image: url(images/btn-balcony.png);
    left: 51px;
    top: 199px;
}

#mainContainer .house #BTbalcony a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTdoor a {
    background-image: url(images/btn-door.png);
    left: 246px;
    top: 508px;
}

#mainContainer .house #BTdoor a:hover {
    background-position: left -43px;
}

#mainContainer .house #BTheater a {
    background-image: url(images/btn-heater.png);
    left: 554px;
    top: 512px;
}

#mainContainer .house #BTheater a:hover {
    background-position: left -43px;
}


/* ・ｽﾇ会ｿｽ======================================================================================================== */

#mainContainer {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    color: #000;
}

#mainContainer a {
    color: #000;
}

.contentpage {
    height: 1450px;
    backgrounf-color: #fff;
    /*border:solid #ddd;*/
    text-align: left;
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
}

.contentpage h1 {
    font-size: 18px;
    height: 40px;
    width: 960px;
    line-height: initial;
    text-align: center;
    font-weight: unset;
}

#mainimg {
    height: 450px;
    background-image: url(images/mainimg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
}

.main_area {
    height: 450px;
    width: 970px;
    position: relative;
    margin: 30px auto;
}

.maintext {
    width: 500px;
    position: absolute;
    left: 20px;
    top: 20px;
}

#topicPath {
    width: 890px;
    text-align: right;
    margin: 0 auto 0;
}

#fadein_area h1 {
    font-size: 18px;
    line-height: 37px;
    font-weight: normal;
    display: block;
    margin: 70px auto 0;
    width: 960px;
    text-align: center;
}

.fuwafuwa1 {
    width: 200px;
    position: absolute;
    left: -40px;
    bottom: -560px;
}

.fuwafuwa2 {
    width: 150px;
    position: absolute;
    right: 0px;
    top: 20px;
}


/*・ｽZ・ｽ・ｽﾝ費ｿｽ*/

.jyutakusetubi {
    height: 600px;
    background-image: url(images/jyutakusetubi.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 860px;
    margin: 90px auto 0;
    padding: 1%;
}

.jyutakusetubi ul {
    display: flex;
    margin: auto;
    margin-left: 10px;
}

.jyutakusetubi ul li {
    width: 300px;
    text-align: center;
    margin: 25px;
}


/*.jyutakusetubi ul li :hover{
    width: 300px;
	float:left;
	text-align:center;
	margin: 10px 10px -40px;
}*/

.jyutakusetubi ul li img {
    width: 100%;
}


/*・ｽ\・ｽ・ｽ・ｽH・ｽ@*/

.kouhou {
    height: 400px;
    background-image: url(images/kouhou.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 890px;
    margin: 0 auto 0;
    padding: 1%;
}

.kouhou ul {
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    margin: auto;
    margin-top: 37px;
}

.kouhou ul li {
    width: 340px;
    text-align: center;
    margin: 25px;
}

.kouhou ul li img {
    width: 100%;
}


/*・ｽ\・ｽ・ｽ・ｽH・ｽ@*/

.exterior {
    height: 200px;
    background-image: url(images/lifestyle.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 890px;
    margin: 50px auto 0;
    padding: 1%;
}


/* ・ｽX・ｽN・ｽ・ｽ・ｽ[・ｽ・ｽ======================================================================================================== */

.list-mv07 {
    transition: .8s;
}


/* 1・ｽﾂ目：・ｽk・ｽ・ｽ・ｽE・ｽg・ｽ・ｽ */

.icon,
h4 img {
    transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
}

.mv01 {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}


/* 2・ｽﾂ目：opacity*/

.list-mv02 {
    opacity: 0;
}

.mv02 {
    opacity: 1.0;
}


/* 3・ｽﾂ目：・ｽ・ｽ] */

.list-mv03 {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

.mv03 {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}


/* 4・ｽﾂ目：3D・ｽ・ｽ] */

.list-mv04 {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.mv04 {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
}


/* 5・ｽﾂ目：・ｽﾚ難ｿｽ */

.list-mv05 {
    transform: translate(0, 40px);
    -webkit-transform: translate(0, 40px);
}

.mv05 {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}


/* ・ｽU・ｽﾂ目：・ｽk・ｽ・ｽ・ｽE・ｽg・ｽ蛛・D・ｽ・ｽ] */

.list-mv06 {
    transform: scale(0, 0) rotateY(180deg);
    -webkit-transform: scale(0, 0) rotateY(180deg);
}

.mv06 {
    transform: scale(1, 1) rotateY(360deg);
    -webkit-transform: scale(1, 1) rotateY(360deg);
}


/* ・ｽV・ｽﾂ目：・ｽﾚ難ｿｽ・ｽ{・ｽ・ｽ・ｽ・ｽ・ｽx */

.list-mv07 {
    opacity: 0;
    transform: translate(0, 60px);
    -webkit-transform: translate(0, 60px);
}

.mv07 {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

.mod-btn-demo {
    display: inline-block;
    width: 200px;
    height: 54px;
    text-align: center;
    text-decoration: none;
    line-height: 54px;
    outline: none;
}

.mod-btn-demo::before,
.mod-btn-demo::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}

.mod-btn-demo,
.mod-btn-demo::before,
.mod-btn-demo::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.mod-btn-demo {
    width: 200px;
    position: relative;
    z-index: 2;
    background-color: #fff;
    border: 2px solid #333;
    color: #333;
    line-height: 50px;
    overflow: hidden;
}

.mod-btn-demo:hover {
    color: #fff;
}

.mod-btn-demo::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(.5);
    transform: scale(.5);
}

.mod-btn-demo:hover::after {
    background: #333;
    -webkit-transform: scale(1);
    transform: scale(1);
}

@media screen and (min-width:480px) {
    .large-off {
        display: none
    }
	
	.jyutakusetubi ul {
		justify-content: center;
	}
	
	.jyutakusetubi ul li {
		width: 30%;
	}
}

@media screen and (max-width:479px) {
    
    .maintext{
        width: 100%
    }
    #topicPath {
        width: 100%
    }
    .main_area {
        width: 100%;
        height: auto
    }
    .fuwafuwa1,
    .fuwafuwa2 {
        width: 30%
    }
    #mainimg {
        height: auto;
        padding-bottom: 39%
    }
    #fadein_area h1 {
        width: 100%;
        line-height: 1.5;
        font-size: 14px;
    }
    #mainContainer {
        width: 100%
    }
    .jyutakusetubi {
        width: 100%;
        height: auto;
        background-image:none
    }
    
    .jyutakusetubi ul{
        flex-direction: column
    }
    
    .jyutakusetubi ul li{
        width: 80%
    }
    
    .kouhou{
        width: 100%;
        height: auto;
        background: none
    }
    
    .kouhou ul{
        flex-direction: column
    }
    
    .kouhou ul li{
        width: 80%
    }
    
    .exterior{
        width: 100%;
        height: auto;
        padding-bottom: 32%
    }
    
    h1.large-off {
    width: 80%;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    padding:20px 10px;
  border:2px solid #000;
  -webkitborder-radius: 2em .8em 3em .8em/.8em 3em .8em 2em;
  -moz-border-radius: 2em .8em 3em .8em/.8em 3em .8em 2em;
  border-radius: 2em .8em 3em .8em/.8em 3em .8em 2em;
}
    
    .large-off span {
    font-size: 14px;
}
}