﻿@charset "utf-8";
/* CSS Document */

/*  reSet
==================================*/
body{margin:0 auto; padding:0; color:#000;}
html{margin:0 auto; padding:0; font-size:14px; font-family:'Noto Sans Japanese',"メイリオ", 'ＭＳ Ｐゴシック', Helvetica, Verdana, Arial, sans-serif}
@media screen and (max-width: 768px) {
    body{min-width:320px; -webkit-text-size-adjust:100%; padding-top:60px;}
    html{font-family:'Noto Sans Japanese',Helvetica,Arial,Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3","Droid Sans",sans-serif;}
}
*{margin:0; padding:0; text-align:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
img{border:none; vertical-align:bottom; max-width:100%;}
a img,a span,a{-moz-transition:all 0.4s ease; -webkit-transition:all 0.4s ease; -o-transition:all 0.4s ease; -ms-transition:all 0.4s ease; transition:all 0.4s ease;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
p,li,dt,dd,th,td{line-height:1.75em;}
hr{  clear:both; border:0;}
h3, h4, h5, h6{ font-weight:normal;}

/* loAding
==================================*/
#loading{width:100%; height:100%; position:fixed; top:0; background:#fff; z-index:1500;}
#loading img{position:absolute; top:50%; left:50%; margin-left:-16px; margin-top:-16px;}

/* heaDer
==================================*/
header{width:100%; height:40px; background-color:rgba(17,50,68,0.85); position:fixed; z-index:1100;}
header h1{font-size:0; line-height:0; width:170px; position:absolute; left:50%; margin-left:-470px;}
header nav{width:520px; position:absolute; top:0; right:50%; margin-right:-500px;}
header nav ol{list-style:none; height:50px; padding-left:1px; margin:0 0 0 auto; }
header nav ol li{float:left; height:50px;; padding: 7px 5px 0 5px; }
header nav ol li a{ font-weight:bold; color:#fff; text-decoration:none; display:block; line-height:25px; padding:0 10px; }
header nav ol li a:hover{border-bottom:solid 2px #fff;}

header ul{list-style:none; width:200px; position:absolute; top:60px; right:0;}
header ul li{width:95px; float:left;line-height:0;}
header ul li.last{width:105px;}
@media screen and (max-width: 768px) {
    header{height:60px; top:0;}
    header h1{width:auto; position:relative; left:auto; max-height:60px; margin:0 0 0 5px; float:left;}
    header h1 img{height:60px;}
    header p.btn_menu{width:60px; height:60px; float:right; background:#e9e9e9; position:relative; cursor:pointer; padding:0;}
    header p.btn_menu span.line01{position:absolute; width:34px; height:3px; background:#534741; top:16px; left:13px;-moz-transition:all 0.6s ease; -webkit-transition:all 0.6s ease; -o-transition:all 0.6s ease; -ms-transition:all 0.6s ease; transition:all 0.6s ease;}
    header p.btn_menu span.line02{position:absolute; width:34px; height:3px; background:#534741; top:29px; left:13px;-moz-transition:all 1s ease; -webkit-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease;}
    header p.btn_menu span.line03{position:absolute; width:34px; height:3px; background:#534741; top:42px; left:13px;-moz-transition:all 0.6s ease; -webkit-transition:all 0.6s ease; -o-transition:all 0.6s ease; -ms-transition:all 0.6s ease; transition:all 0.6s ease;}
    body header p.open{background:#000;}
    body header p.open span.line01{transform:rotate(-405deg); -moz-transform:rotate(-405deg); -webkit-transform:rotate(-405deg); -o-transform:rotate(-405deg); -ms-transform:rotate(-405deg); transform:rotate(-405deg); background:#fff; top:30px;}
    body header p.open span.line02{-ms-filter:"alpha(opacity=0)"; filter:alpha(style=0,opacity=0); -moz-opacity:0; opacity:0;}
    body header p.open span.line03{transform:rotate(405deg); -moz-transform:rotate(405deg); -webkit-transform:rotate(405deg); -o-transform:rotate(405deg); -ms-transform:rotate(405deg); transform:rotate(405deg); background:#fff; top:30px;}
    header nav{width:100%; height:auto; top:60px; right:0; margin:0; background-color:rgba(17,50,68,.9); display:none; background-image:none;}
    header nav ol{height:auto; padding:0 0 15px; background:none; border-top:1px solid #fff;}
    header nav ol li{float:none; height:auto; width:auto; background:none; border-bottom:1px solid #fff;}
    header nav ol li a{text-align:center; padding:10px 0 25px 0;}
    header ul{width:auto; position:relative; top:auto; right:auto; padding:0 10%;}
    header ul li{width:50%; float:left; text-align:center;}
    header ul li.last{width:50%;}
}

/* visual
==================================*/
section#visual_box>h2{ position:absolute; z-index:1; width:1000px; top:140px; left:0; right:0; margin:auto; opacity:0.8; }
section#visual_box>h2>img{ width:480px; }
section#visual_box>div#mainv{ background-image:url("./img/vb01_bg.jpg"); background-size:cover; background-position:center; }
section#visual_box>div#mainv>span{ background-image:url("./img/vb01.jpg");background-size:cover; background-position:center; background-repeat:no-repeat;
    display:block; width:100%; height:762px; max-width:1300px;  margin:0 auto; }
section#visual_box>ul{list-style:none; text-align:center; position:relative; z-index:1; height:110px; margin:-110px auto 0 auto; padding:10px 0; width:100%;
    min-width:1000px; font-size:0; }
section#visual_box>ul li{font-size:0; line-height:0; display:inline-block; margin:2px; width:160px; border:solid 1px #fff; background-size:cover;}
section#visual_box>ul li:nth-of-type(1){ background-image:url("./img/menu01.png"); }
section#visual_box>ul li:nth-of-type(2){ background-image:url("./img/menu02.png"); }
section#visual_box>ul li:nth-of-type(3){ background-image:url("./img/menu03.png"); }
section#visual_box>ul li:nth-of-type(4){ background-image:url("./img/menu04.png"); }
section#visual_box>ul li:nth-of-type(5){ background-image:url("./img/menu05.png"); }
section#visual_box>ul li:nth-of-type(6){ background-image:url("./img/menu06.png"); }
section#visual_box>ul li a{display:block; background:rgba(0,24,51,.82);}
section#visual_box>ul li a:hover { background:rgba(0,144,173,.82); }

@media screen and (max-width: 768px) {
    section#visual_box{  }
    section#visual_box>h2{ width:50%; top:auto; margin:5vw; }
    section#visual_box>div#mainv>span{ width:95%; background-size:contain; height:100vw; }
    section#visual_box>ul {width:100%; min-width:100%; height:33vw; margin:-33vw auto 0 auto;  }
    section#visual_box>ul li{ width:28%; }
}

/* lowfuel
==================================*/
section#lowfuel{ width:100%; min-width:1000px; max-width:1300px; margin:0 auto; }
section#lowfuel>dl{ width:100%; }
section#lowfuel>dl>dt{ width:50%; float:left; }
section#lowfuel>dl>dd{ width:500px; float:left; padding: 100px 0 0 30px; }
section#lowfuel>dl>dd>dl>dt{ color:#0085C3; font-size:2.7em; font-weight:bold; letter-spacing:-3px; line-height:1.3em; margin-bottom:30px; }
section#lowfuel>dl>dd>dl>dd>dl { width:350px; margin:30px auto 0 auto;; }
section#lowfuel>dl>dd>dl>dd>dl>dt{ width:100px; float:left; padding-top:50px; }
section#lowfuel>dl>dd>dl>dd>dl>dd{ width:250px; float:left; }
section#lowfuel>dl>dd>dl>dd>dl>dd>p{ color:#04B1B6; font-weight:bold; }
section#lowfuel>dl>dd>dl>dd>dl>dd>p>span{ font-size:5.7em; letter-spacing:-3px; line-height:1.0em; }

@media screen and (max-width: 768px) {
    section#lowfuel{ width:100%; min-width:100%; max-width:100%; margin:0 auto; }
    section#lowfuel>dl>dt{ width:100%; float:none; }
    section#lowfuel>dl>dd{ width:90%; float:none; margin:0 auto; padding:0; }
    section#lowfuel>dl>dd>dl>dt{ font-size:7vw; margin-top:30px; }
    section#lowfuel>dl>dd>dl>dd>dl{  }
    section#lowfuel>dl>dd>dl>dd>dl>dt{ width:20%; padding-top:8vw; }
    section#lowfuel>dl>dd>dl>dd>dl>dd{ width:70%; padding-left:2vw; }
    section#lowfuel>dl>dd>dl>dd>dl>dd>p>span{ font-size:10vw; }
}

/* exterior
==================================*/
section#exterior{  }
section#exterior>h3{ position:absolute; width:100%; text-align:center; color:#345461; font-size:2.7em; font-weight:bold; padding-top:40px; }
section#exterior{ width:100%; background:url("./img/exterior01_bg.jpg"); background-size:cover; background-position:center; }
section#exterior>img{ display:block; width:100%; min-width:1000px; max-width:1300px; margin:0 auto; }
@media screen and (max-width: 768px) {
    section#exterior{  padding-top:20px; }
    section#exterior>h3{ font-size:5.0vw; }
    section#exterior>img{ min-width:100%; max-width:100%; }
}

/* interior
==================================*/
section#interior{ padding-top:40px; }
section#interior>h3{ text-align:center; color:#113244; font-size:2.7em; font-weight:bold; margin:0 0 20px 0; }
section#interior>h3>p{ text-align:center; color:#04b1b6; font-size:0.5em; font-weight:bold; }
section#interior>img{ display:block; width:100%; min-width:1000px; max-width:1000px; margin:0 auto 0 auto; }

@media screen and (max-width: 768px) {
    section#interior{ padding-top:60px; }
    section#interior>h3{ font-size:5.0vw; margin-bottom:2vw; }
    section#interior>img{ min-width:100%; max-width:100%; }
}

/* color
==================================*/
section#color{ padding-top:70px !important; }
section#color>ul{ font-size:0;  width:100%; }
section#color>ul>li{ font-size:10px; display:inline-block; vertical-align:top; margin:0; width:50%;  height:705px; }
section#color>ul>li:nth-of-type(1){ background:#F1EBC4; }
section#color>ul>li:nth-of-type(2){ width:1000px; position:absolute; left: 0; right: 0; margin: auto; }
section#color>ul>li:nth-of-type(3){ background:#04B1B5; }
section#color>p{text-align:center; color:#113244; font-size:0.9em; padding:3px;}
@media screen and (max-width: 768px) {
    section#color{ padding-top:70px !important; }
    section#color>ul>li{ height:auto; }
    section#color>ul>li:nth-of-type(1){ display:none; }
    section#color>ul>li:nth-of-type(2){ width:100%; position:static; }
    section#color>ul>li:nth-of-type(3){ display:none; }
}

/* voice
==================================*/
section#voice{ width:100%;  padding-top:80px; background:url("./img/voice05.jpg"); background-repeat:no-repeat; background-position:center;}
section#voice>div{  margin:0 auto; background:url("./img/voice01.png"); background-size:contain; background-repeat:no-repeat; background-position:center; width:750px; height:800px;  padding-top:480px; }
section#voice>div>a{ display:block; background:url("./img/voice02.png"); width:380px; height:116px; margin:0 auto; background-size:contain; background-repeat:no-repeat; background-position:center;  }
section#voice>div>a:hover{ background:url("./img/voice02_on.png"); background-size:contain; background-repeat:no-repeat; background-position:center; }
section#voice>div>p{ text-align:center; color:#113244; font-size:0.8em; }
section#voice>dl{ height:702px; }
section#voice>dl>dt{ width:1000px; margin:0 auto -20px auto; text-align:center; }
section#voice>dl>dt>img{ width:650px; }
section#voice>dl>dd{ width:1000px; margin:0 auto; }
section#voice>dl>dd>a { display:block; width:868px; height:156px; margin:0 auto; background:url("./img/voice04.png");  background-size:contain; background-repeat:no-repeat; background-position:center; }
section#voice>dl>dd>a:hover { background:url("./img/voice04_on.png");  background-size:contain; background-repeat:no-repeat; background-position:center; }
@media screen and (max-width: 768px) {
    section#voice{ background-size:cover; }
    section#voice>div{ width:95%; height:100vw; padding-top:60vw; }
    section#voice>div>a{ width:70%; height:20vw; }
    section#voice>dl{ height:90vw; }
    section#voice>dl>dt{ width:100%; }
    section#voice>dl>dd{ width:100%; }
    section#voice>dl>dd>a{ width:90%; height:20vw; }
}


/* price
==================================*/
section#price{ width:1000px; margin:0 auto; background: #F2F9FB; padding-top:40px; }
section#price>h3{ text-align:center; color:#113244; font-size:2.7em; font-weight:bold; padding:0 0 30px 0; }
section#price #c01{ width:90%; margin:0 auto; }
section#price #c01 table{ width:100%; }
section#price #c01 tr{ }
section#price #c01 th{ background:#113244; color:#fff; font-size:1.2em; font-weight:bold; text-align:center; padding:7px;  line-height:1.0em; }
section#price #c01 th>span{ font-size:0.7em; font-weight:normal; display:block; text-align:center; line-height:1.5em; }
section#price #c01 td{ color:#113244; font-size:1.2em; font-weight:bold; border:solid 2px #cce9ef; }
section#price #c01 tr:nth-child(even)>td{ background:#cce9ef; }
section#price #c01 td:nth-child(1){text-align:center;}
section#price #c01 td:nth-child(2){text-align:center; padding-right:10px; }
section#price #c01 td:nth-child(3){text-align:center; font-size:2.5em; line-height:1.3em; }
section#price #c01 td:nth-child(3)>span{font-size:0.5em; padding-left:5px; }
section#price #c01>p{ color:#113244; font-size:0.8em; }
section#price #c02{ width:90%; height:255px; margin:40px auto -15px auto; color:#113244; text-align:center; font-size:1.2em; letter-spacing:-2px;
        padding-top:50px; line-height:2.0em; background:url("./img/price01.png"); background-repeat:no-repeat; background-position:center; position:relative; }
section#price #c03{ width:90%; margin:0 auto; }
section#price #c03>h4{ background:#04B1B5; color:#fff; font-size:2.0em; font-weight:bold; text-align:center;  padding:15px; }
section#price #c03>div{ background:#fff; padding:5%; }
section#price #c03>div>div{ padding-top:80px; }
section#price #c03>div>div:nth-of-type(1){ padding-top:0px; }
section#price #c03>div>div>a{ display:block; width:670px; height:93px; background:url("./img/price06.png"); position:absolute; margin:350px 0 0 65px;
        background-size:contain; background-repeat:no-repeat; background-position:center; }
section#price #c03>div>div>a:hover{ background:url("./img/price06_on.png"); }
@media screen and (max-width: 768px) {
    section#price{ width:100%; padding-top:60px; }
    section#price>h3{ font-size:5.0vw; padding-bottom:2vw; }
    section#price #c01 th{ font-size:3.2vw; }
    section#price #c01 td{ font-size:3.2vw; }
    section#price #c01 td:nth-child(3){ font-size:4.5vw; white-space:nowrap; }
    section#price #c01>p{ color:#113244; font-size:2vw; }
    section#price #c02{ font-size:2.5vw; padding-top:5vw; height:40vw; margin-top:5vw; background-size:contain; }
    section#price #c03>h4{ font-size:3.8vw; }
    section#price #c03>div>div{ padding-top:8vw; }
    section#price #c03>div>div>a{ width:80%;  height:10vw; margin:33vw 0 0 0; }

}


/* s_menu
==================================*/
dl#s_menu{ width:1000px; margin:0 auto; padding:70px 0; }
dl#s_menu>dt>ul{text-align:center;}
dl#s_menu>dt>ul>li{display:inline-block; margin:5px;}
dl#s_menu>dt>ul>li>a{ display:block; width:282px; height:62px; background-size:contain !important; background-repeat:no-repeat !important; background-position:center !important; }
dl#s_menu>dt>ul>li:nth-of-type(1)>a{ background:url("./img/smenu01.png"); }
dl#s_menu>dt>ul>li:nth-of-type(1)>a:hover{ background:url("./img/smenu01_on.png"); }
dl#s_menu>dt>ul>li:nth-of-type(2)>a{ background:url("./img/smenu02.png"); }
dl#s_menu>dt>ul>li:nth-of-type(2)>a:hover{ background:url("./img/smenu02_on.png"); }
dl#s_menu>dt>ul>li:nth-of-type(3)>a{ background:url("./img/smenu03.png"); }
dl#s_menu>dt>ul>li:nth-of-type(3)>a:hover{ background:url("./img/smenu03_on.png"); }
dl#s_menu>dd>a{ display:block; width:726px; height:112px; background:url("./img/smenu04.png"); background-size:contain; background-repeat:no-repeat;
    background-position:center; margin:10px auto 0 auto; }
dl#s_menu>dd>a:hover{ background:url("./img/smenu04_on.png"); background-size:contain; background-repeat:no-repeat; background-position:center; }

@media screen and (max-width: 768px) {
    dl#s_menu{ width:100%; padding:10px 0; }
    dl#s_menu>dt>ul>li{display:block;}
    dl#s_menu>dt>ul>li>a{ width:100%; height:12vw; }
    dl#s_menu>dd>a{ width:100%; height:18vw; }
}

/*--gototop--*/
p#gototop{font-size:0; line-height:0; position:fixed; bottom:-150px; right:50px; z-index:1001;}
p#gototop a{display:block; width:82px; height:82px;}
p#gototop a:hover img{-moz-transform:rotateY(-180deg) rotateX(-180deg) rotateZ(-180deg); -webkit-transform:rotateY(-180deg) rotateX(-180deg) rotateZ(-180deg); -o-transform:rotateY(-180deg) rotateX(-180deg) rotateZ(-180deg); -ms-transform:rotateY(-180deg) rotateX(-180deg) rotateZ(-180deg); -moz-transition:all .8s ease; -webkit-transition:all .8s ease; -o-transition:all .8s ease; -ms-transition:all .8s ease; transition:all .8s ease;}
@media screen and (max-width: 768px) {
    p#gototop{position:fixed; bottom:-65px; right:5px; width:60px; height:60px;}
    p#gototop a{width:60px; height:60px;}
}

/* fooTer
==================================*/

footer{ height:746px; background:url("./img/footer01.jpg"); background-size:cover; background-repeat:no-repeat; background-position:center; }


@media screen and (max-width: 768px) {
    footer { height:130vw; background-position:66% center; }

}

div#analytics{display:none;}

