/* ===============================================================
HERO
================================================================== */

#home .hero {
height: 560px;
background-image: url("../img/bg_hero_home.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: auto 100%;
}

#home .hero .inner{
position: relative;
}

#home .hero h1{
background-image: url("../img/bg_hero_home_h1.png");
background-repeat: no-repeat;
background-position: center top;
background-size: auto 100%;
width: 400px;
height: 340px;
position: absolute;
top: 40px;
left: 0px;
z-index: 1;
}



/* ===============================================================
YouTube
================================================================== */

.movie-wrap{
width: 560px;
margin: auto auto 50px auto;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* ===============================================================
nav-btn01
================================================================== */
#home .nav-btn-01 .nav-btn{
/*background-color: #eee;*/
}
#home .nav-btn-01 .nav-btn ul{
position: relative;
width: 100%;
height: 640px;
}

#home .nav-btn-01 .nav-btn ul li{
position: absolute;
background-position: center center;
background-repeat: no-repeat;
}

#home .nav-btn-01 .nav-btn ul li a{
position: relative;
display: block;
width: 100%;
height: 100%;
color: #fff;
font-size: 1.3rem;
text-align: center;
white-space: nowrap;
}

#home .nav-btn-01 .nav-btn .btn01{
background-image: url("../img/bg_btn_home_01.jpg");
background-size: auto 100%;
height: 100%;
width: 40%;
top: 0;
left: 0;
}

#home .nav-btn-01 .nav-btn .btn01 span{
background-color: rgba(248,238,165,0.8);
padding: 40px 30px;
}
#home .nav-btn-01 .nav-btn .btn01 a{
color: #333;
}

#home .nav-btn-01 .nav-btn .btn02{
background-image: url("../img/bg_btn_home_02.jpg");
background-size: 100% auto;
height: 33%;
width: 60%;
top: 0;
left: 40%;
}

#home .nav-btn-01 .nav-btn .btn03{
background-image: url("../img/bg_btn_home_03.jpg");
background-size: 100% auto;
background-position: center 35%;
height: 33%;
width: 60%;
top: 33%;
left: 40%;
}

#home .nav-btn-01 .nav-btn .btn04{
background-image: url("../img/bg_btn_home_04.jpg");
background-size: 100% auto;
height: 34%;
width: 60%;
top: 66%;
left: 40%;
}


/* ===============================================================
nav-btn02
================================================================== */

#home .nav-btn-02 .nav-btn ul{
width: 100%;
display: flex;
justify-content: space-between;
}

#home .nav-btn-02 .nav-btn ul li{
width: 30%;
background-position: center center;
background-repeat: no-repeat;
}

#home .nav-btn-02 .nav-btn .btn01{
background-image: url("../img/bg_btn_download.jpg");
background-size: 100% auto;
height: 190px;
/*box-shadow: 30px -20px #DBF5FF;*/
}

#home .nav-btn-02 .nav-btn .btn02{
background-image: url("../img/bg_btn_contact.jpg");
background-size: 100% auto;
height: 190px;
/*box-shadow: -30px -20px #FFE8D7;*/
}

#home .nav-btn-02 .nav-btn .btn03{
background-image: url("../img/bg_btn_consultation.jpg");
background-size: 100% auto;
height: 190px;
/*box-shadow: -30px -20px #FFE8D7;*/
}


#home .nav-btn-02 .nav-btn ul li a{
position: relative;
display: block;
width: 100%;
height: 100%;
color: #fff;
font-size: 1.3rem;
text-align: center;
white-space: nowrap;
}

#home .nav-btn-02 .nav-btn ul li a span{
border: thin solid #fff;
padding: 30px 30px 60px 30px;
background-image: url("../img/icon_arrow_white.png");
background-repeat: no-repeat;
background-position: center 80%;
width: 100%;
max-width: 250px;
display: inline-block;
background-color: rgba(0,0,0,0.30)
}

#home .nav-btn-02 .nav-btn .btn01 a span,
#home .nav-btn-02 .nav-btn .btn02 a span,
#home .nav-btn-02 .nav-btn .btn03 a span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

/*#home .nav-btn-02 .nav-btn .btn02 a span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}*/






/* [-] レスポンシブ対応
=========================================================================================== */

/* for - 1899px
=========================================================================================== */
@media screen and (min-width: 1899px) {


/* ===============================================================
HERO
================================================================== */
#home .hero {
background-position: center center;
background-size: 100% auto;
}
}

/* for - 959px
=========================================================================================== */
@media screen and (max-width: 959px) {

/* ===============================================================
HERO
================================================================== */

#home .hero {
height: 400px;
}

#home .hero h1{
width: 280px;
height: 230px;
top: 40px;
left: 20px;
}


}

/* for - 559px
=========================================================================================== */
@media screen and (max-width: 559px) {

/* ===============================================================
HERO
================================================================== */

#home .hero {
height: 200px;
}

#home .hero h1{
width: 180px;
height: 130px;
top: 20px;
left: 10px;
}

/* ===============================================================
YouTube
================================================================== */

.movie-wrap{
width: 90%;
margin: auto auto 50px auto;
}

/* ===============================================================
nav-btn
================================================================== */

#home .nav-btn-01 .nav-btn ul{
position: static;
width: 100%;
height: auto;
}

#home .nav-btn-01 .nav-btn ul li{
position: static;
background-position: center center;
background-repeat: no-repeat;
height: 100px!important;
}

#home .nav-btn-01 .nav-btn ul li a{
position: relative;
display: block;
width: 100%;
height: 100%;
color: #fff;
font-size: 1.3rem;
text-align: center;
white-space: nowrap;
}

#home .nav-btn-01 .nav-btn .btn01{
background-image: url("../img/bg_btn_home_01.jpg");
background-size: 100% auto;
width: 100%;
}

#home .nav-btn-01 .nav-btn .btn01 span{
background-color: rgba(248,238,165,0.8);
padding: 10px 30px;
}
#home .nav-btn-01 .nav-btn .btn01 a{
color: #333;
}

#home .nav-btn-01 .nav-btn .btn02{
background-image: url("../img/bg_btn_home_02.jpg");
background-size: 100% auto;
width: 100%;
}

#home .nav-btn-01 .nav-btn .btn03{
background-image: url("../img/bg_btn_home_03.jpg");
background-size: 100% auto;
width: 100%;
}

#home .nav-btn-01 .nav-btn .btn04{
background-image: url("../img/bg_btn_home_04.jpg");
background-size: 100% auto;
width: 100%;
}

/* ===============================================================
nav-btn02
================================================================== */

#home .nav-btn-02 .nav-btn ul{
width: 100%;
display: block;
justify-content: space-between;
}

#home .nav-btn-02 .nav-btn ul li{
width: 80%;
background-position: center center;
background-repeat: no-repeat;
margin: 0 auto 20px auto;
}

#home .nav-btn-02 .nav-btn .btn01{
height: 100px;
box-shadow: none;
}

#home .nav-btn-02 .nav-btn .btn02{
height: 100px;
box-shadow: none;
}

#home .nav-btn-02 .nav-btn ul li a span{
border: thin solid #fff;
padding: 15px 30px;
background-image: url("../img/icon_arrow_white.png");
background-repeat: no-repeat;
background-position: 10px center;
display: inline-block;
background-color: rgba(0,0,0,0.30)
}

#home .nav-btn-02 .nav-btn .btn01 a span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

#home .nav-btn-02 .nav-btn .btn02 a span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}


}