/* -----------------------------------------------------*/
/*                                                      */
/* MVA HOME SETTING                                     */
/*                                                      */
/* -----------------------------------------------------*/

#home { }

#main {
position: relative;
width: 100%;
height: 100vh;
min-height: 36rem;
background: url(../images/main.jpg) no-repeat 50% 50%;
background-size: cover;
background-attachment: fixed;
}

#main .scroll-arrow {
width: 3rem;
height: 3rem;
position: absolute;
left: 50%;
margin-left: -1.5rem;
margin-bottom: 1rem;
display: block;
bottom:0;
z-index: 100;
}

/*---about us----*/
#about-us { background-color: rgba(34,34,34,1.00); }

/*#about-us .image {
min-width: 100%;
min-height: 50vh;
height: auto;
background-color: rgba(34,34,34,1.00);
position: relative;
overflow: hidden;
}*/
#about-us .button-area { margin: 3rem auto 0rem auto; }

#about-us .image {
min-width: 100%;
background: url(../images/img_aboutus.jpg) no-repeat 100% 0%;
background-size: 100% auto;
height: 0;
padding-top: 69%;
background-color: rgba(34,34,34,1.00);
position: relative;
overflow: hidden;
}

#about-us .image img {
position: absolute;
top: 0%;
left: 50%;
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}

#about-us .text {
padding: 2.5rem;
min-height: 100%;
min-height: 50vh;
}

#about-us p {
font-size: 1rem;
line-height: 2em;
color: white;
display: inline-block;
}

/*---//about us----*/

/*---Portfolio----*/
#portfolio { background-color: rgba(34,34,34,1.00); }

#portfolio .button-area { margin: 3rem auto 0rem auto; }

#portfolio .image {
min-width: 100%;
background: url(../images/img_ourclients.jpg) no-repeat 0% 0%;
background-size: 100% auto;
height: 0;
padding-top: 69%;
background-color: rgba(34,34,34,1.00);
position: relative;
overflow: hidden;
}

#portfolio .image img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#portfolio .text {
padding: 2.5rem;
min-height: 100%;
min-height: 50vh;
}

#portfolio p {
font-size: 1rem;
line-height: 2em;
color: white;
display: inline-block;
}

/*---//portfolio----*/

/*---works main image----*/
#works-main-image {
position: relative;
width: 100%;
height: 0;
padding-top: 62.5%;
min-height: 36rem;
background: url(../images/works_main_image.jpg) no-repeat 50% 50%;
background-size: 100% auto;
background-attachment: fixed;
justify-content: center;
align-items: center;
align-content: center;
-webkit-transition: 5s ease;
-moz-transition: 5s ease;
-ms-transition: 5s ease;
transition: 5s ease;
display: flex;
}

#works-main-image .title-box {
align-self: flex-end;
margin-bottom: 5rem;
width: 100%;
}

#works-main-image .scroll-arrow {
width: 3rem;
height: 3rem;
position: absolute;
left: 50%;
margin-left: -1.5rem;
margin-bottom: 0rem!important;
display: block;
bottom:0;
z-index: 100;
}

#works-main-image h3.headline {
line-height: 2em;
display: block;
text-align: center;
margin-bottom: 1.5rem!important;
padding: 0!important;
max-width: none;
}

#works-main-image .button-area { margin-top: 0rem!important; }

/*---//works main image----*/

/*---works list----*/
#works-list { margin: 1rem 0rem 2rem 0rem; }

#works-list a {
text-decoration: none;
display: block;
margin: 1rem 0;
}

.space-category { position: relative; }

.space-category dt{position: relative;}

.space-category .space-category-title {
display: block;
font-size: 1.25rem;
line-height: 1.65em;
font-weight: 400;
margin: 1.5rem 0 1rem 0;
}

.space-category p {
display: block;
font-size: 0.875rem;
line-height: 2em;
}

.space-category .space-num {
display: inline-block;
background-color: rgba(34,34,34,1.00);
color: white;
font-size: 0.75rem;
line-height: 1.25rem;
height: 1.25rem;
overflow: hidden;
padding: 0 0.5rem;
letter-spacing: 0.1em;
font-weight: 500;
position: absolute;
left: 0.5rem;
bottom: -0.625rem;
z-index: 10;
}

#works-list a .space-category .button-view-more.black-frame { min-width: 100%; }

#works-list a:hover .space-category .button-view-more.black-frame {
color: white;
background-color: rgba(34,34,34,1.00);
border-color: rgba(34,34,34,1.00);
}

/*---//works list----*/

/*---information----*/
#information {
position: relative;
width: 100%;
max-height: 62.5%;
background: url(../images/information_main_image.jpg) no-repeat 50% 50%;
background-size: cover;
display: flex;
/*justify-content: center;*/
align-items: center;
/*align-content: center;*/
overflow: hidden;
}

#information > .container{align-self: center;}

#information .info-box {
background-color: rgba(0,0,0,0.85);
padding: 2rem;
margin: 10rem 0rem;
position: relative;
}

#information .headline {
vertical-align: baseline;
margin-bottom: 2rem;
margin-top: 1rem;
}

#information .headline span {
display: inline-block;
margin-right: 1em;
}

#information .headline strong { display: inline-block; }

#information .button-area {
margin-top: 2.5rem;
margin-bottom: 1rem;
}

#information a.rss {
position: absolute;
right: 2rem;
bottom: 3.5rem;
color: white;
text-decoration: none;
line-height: 2.5rem;
}

/*---//information----*/

/*---recommend contents----*/
#recommend-contents { margin: 2.5rem 0 0 0; }

#recommend-contents .recommend-s { }
#recommend-contents .recommend-s dl span {
padding: 0rem 1rem;
display: block;
}

#recommend-contents .recommend-s dl dd span { line-height: 2em;display: block; position: relative;}
#recommend-contents .recommend-s a{display: block; text-decoration: none; margin-bottom: 2.5rem; position: relative;}
#recommend-contents h4 {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-size: 1.875rem;
line-height: 1.35em;
font-family: "adobe-caslon-pro", serif;
font-weight: 600;
display: block;
}

#recommend-contents .recommend-s p {
display: block;
font-size: 0.875rem;
line-height: 2em;
max-width: 100%;
}

#recommend-contents h4 strong {
font-size: 1.25rem;
line-height: 1.65em;
font-family: "source-han-sans-japanese", sans-serif;
font-style: normal;
font-weight: 300!important;
display: block;
margin: 0;
}

#recommend-contents .button-view-more.black-frame {min-width: 100%; }

/*---//recommend contents----*/

h3.headline {
line-height: 2em;
display: block;
text-align: center;
margin-bottom: 2.5rem;
}

.white-text { color: white; }

.black-text { color: rgba(34,34,34,1.00); }

.white-box { background-color: white; }

.black-box { background-color: rgba(34,34,34,1.00); }

h3.headline span {
font-size: 2.5rem;
line-height: 1.35em;
font-family: "adobe-caslon-pro", serif;
font-weight: 600;
display: block;
}

h3.headline strong {
font-size: 1.375rem;
line-height: 1.65em;
font-weight: 300!important;
display: block;
margin: 0;
}

/*---animation setting----*/
.animation-top1 {
background-size: auto 120%!important;
opacity: 0;
-webkit-transition: all 900ms cubic-bezier(0.340, 0.025, 0.150, 0.970); 
   -moz-transition: all 900ms cubic-bezier(0.340, 0.025, 0.150, 0.970); 
     -o-transition: all 900ms cubic-bezier(0.340, 0.025, 0.150, 0.970); 
        transition: all 900ms cubic-bezier(0.340, 0.025, 0.150, 0.970); 

-webkit-transition: all 2000ms cubic-bezier(0.315, 0.040, 0.000, 0.990); 
   -moz-transition: all 2000ms cubic-bezier(0.315, 0.040, 0.000, 0.990); 
     -o-transition: all 2000ms cubic-bezier(0.315, 0.040, 0.000, 0.990); 
        transition: all 2000ms cubic-bezier(0.315, 0.040, 0.000, 0.990); 
}

.animation-top2 {
background-size: auto 120%!important;
opacity: 0;
-webkit-transition: all 900ms cubic-bezier(0.340, 0.025, 0.150, 0.970); 
   -moz-transition: all 900ms cubic-bezier(0.340, 0.025, 0.150, 0.970); 
     -o-transition: all 900ms cubic-bezier(0.340, 0.025, 0.150, 0.970); 
        transition: all 900ms cubic-bezier(0.340, 0.025, 0.150, 0.970); 

-webkit-transition: all 2000ms cubic-bezier(0.315, 0.040, 0.000, 0.990); 
   -moz-transition: all 2000ms cubic-bezier(0.315, 0.040, 0.000, 0.990); 
     -o-transition: all 2000ms cubic-bezier(0.315, 0.040, 0.000, 0.990); 
        transition: all 2000ms cubic-bezier(0.315, 0.040, 0.000, 0.990); 
}

.animation-top3 {
background-position: 50% 80%!important;
opacity: 0;
}

.animation-top1.IN-animation {
margin-left: 0rem;
margin-top: 0rem;
background-size: auto 100%!important;
opacity: 1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}

.animation-top2.IN-animation {
margin-right: 0rem;
margin-top: 0rem;
background-size: auto 100%!important;
opacity: 1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}

.animation-top3.IN-animation {
background-position: 50% 50%!important;
opacity: 1;
}

/*---//animation setting----*/

/* BREAK POINT -----------------------------------------------------*/
@media (max-width: 767px) {

#main {
position: relative;
width: 100%;
height: 100vh;
min-height: 36rem;
background: url(../images/main.jpg) no-repeat 50% 50%;
background-size: cover;
background-attachment: inherit!important;
}

#about-us .text {
padding: 2.5rem 2rem;
min-height: inherit;
}

#portfolio .text {
padding: 2.5rem 2rem 4rem 2rem;
min-height: inherit;
}

/*#about-us .image,
#portfolio .image { min-height: inherit; }*/
.sp-padding-15 {
margin: 1rem;
overflow: hidden;
}

#works-main-image {
position: relative;
width: 100%;
height: 100vh;
background: url(../images/works_main_image_sp.jpg) no-repeat 50% 100%;
background-size: cover;
background-attachment:inherit;
}

#works-list { margin: 2rem 1rem 2rem 1rem; }

#works-list a { margin: 2rem 0; }

#works-list a:hover .space-category .button-view-more.black-frame {
color: inherit;
background-color: inherit;
border-color: inherit;
}

#information {
max-height: inherit;
display: block;
background: url(../images/information_main_image_sp.jpg) no-repeat 100% 50%;
}

#information .info-box {
padding: 1rem;
margin: 5rem 0rem;
}

#information .headline {
margin-bottom: 1.5rem;
margin-top: 1rem;
}

#information .headline span {
display: block;
margin-right: 0em;
}

#information .headline strong { display: block; }
#recommend-contents .recommend-s a{ margin-bottom: 4rem; text-decoration: none;}

#recommend-contents .recommend-s dl dt.content-image{margin: 0 1rem; }

#information a.rss {
position: relative;
right: inherit;
bottom: inherit;
line-height: 2.5rem;
margin: 0.5rem auto 1rem auto!important;
display: inline-block;
text-align: center;
width: 100%;
}

/*---animation setting----*/
.animation-top1 { margin-left: -7rem; }

.animation-top2 { margin-right: -7rem; }

.animation-top3 { background-size: auto 130%; }
/*---animation setting----*/
}/*----------------------------------------------------- BREAK POINT*/