@charset "UTF-8";

#faq .header{
    background-image: url(/abudhabi/img/faq/mainimg.jpg);
    position:relative;
    height: 50%;
}

.wrapper{
    background-color: #fff;
    padding-top: 40px;
}

.pt0{
    padding-top: 0;
}

.section.block{
    position: relative;
    max-width: 1280px;
    margin: 0px auto;
    overflow:visible;
}

.section.block div{
    opacity: 0;
    animation-duration: 1.0s;
	-webkit-animation-duration: 1.0s;
}

.section.block div#q1.active,
.section.block div#ph2.active,
.section.block div#ph2-1.active,
.section.block div#q3.active,
.section.block div#q6.active,
.section.block div#ph8.active,
.section.block div#ph8-1.active{
	animation-name: fromL;
	-webkit-animation-name: fromL;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
    opacity: 1;
}

.section.block div#ph1.active,
.section.block div#ph1-1.active,
.section.block div#ph3-1.active,
.section.block div#ph3.active,
.section.block div#q5.active,
.section.block div#ph6.active,
.section.block div#ph6-1.active,
.section.block div#q8.active,
.section.block div#ph9.active,
.section.block div#ph9-1.active{
	animation-name: fromR;
	-webkit-animation-name: fromR;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
    opacity: 1;
}

.section.block div#ph1.active,
.section.block div#ph1-1.active,
.section.block div#q2.active,
.section.block div#q4.active,
.section.block div#ph5.active,
.section.block div#ph5-1.active,
.section.block div#q7.active,
.section.block div#q9.active{
	animation-name: fromBottom;
	-webkit-animation-name: fromBottom;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
    opacity: 1;
}

/*bg*/
.section.block div#bg1.active,
.section.block div#bg3-2.active,
.section.block div#bg4.active,
.section.block div#bg5.active,
.section.block div#bg9.active{
	animation-name: fromRbg;
	-webkit-animation-name: fromRbg;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
    opacity: 0.5;
}

.section.block div#bg2.active,
.section.block div#bg3.active,
.section.block div#bg3-1.active,
.section.block div#bg6.active,
.section.block div#bg8.active{
	animation-name: fromLbg;
	-webkit-animation-name: fromLbg;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
    opacity: 0.5;
}

@-webkit-keyframes fromL {
	0% {-webkit-transform: translateX(-200px);opacity: 0;}
	100% {-webkit-transform: translateX(0px);opacity: 1;}
}
@keyframes fromL {
	0% {transform: translateX(-200px);opacity: 0;}
	100% {transform: translateX(0px);opacity: 1;}
}
@-webkit-keyframes fromR {
	0% {-webkit-transform: translateX(200px);opacity: 0;}
	100% {-webkit-transform: translateX(0px);opacity: 1;}
}
@keyframes fromR {
	0% {transform: translateX(200px);opacity: 0; }
	100% {transform: translateX(0px);opacity: 1;}
}
@-webkit-keyframes fromBottom {
	0% {-webkit-transform: translateY(50px);opacity: 0;}
	100% {-webkit-transform: translateX(0px);opacity: 1;}
}
@keyframes fromBottom {
	0% {transform: translateY(50px);opacity: 0; }
	100% {transform: translateX(0px);opacity: 1;}
}

@-webkit-keyframes fromLbg {
	0% {-webkit-transform: translateX(-100px);opacity: 0;}
	100% {-webkit-transform: translateX(0px);opacity: 0.5;}
}
@keyframes fromLbg {
	0% {transform: translateX(-100px);opacity: 0;}
	100% {transform: translateX(0px);opacity: 0.5;}
}
@-webkit-keyframes fromRbg {
	0% {-webkit-transform: translateX(100px);opacity: 0;}
	100% {-webkit-transform: translateX(0px);opacity: 0.5;}
}
@keyframes fromRbg {
	0% {transform: translateX(100px);opacity: 0; }
	100% {transform: translateX(0px);opacity: 0.5;}
}

.section h2{
    color: #bc7e26;
}

.section p{
    color: #000;
    font-size: 1.8rem;
    line-height: 3rem;
}

.section div img{
    width: 100%;
}

.block .bgbrown{
    background-color: #BC7E26;
    opacity: 0.5;
}

.block .bgglay{
    background-color: #666666;
    opacity: 0.5;
}

/*block 1*/
.block.no1{
    min-height: 900px;
}

#q1{
    position: absolute;
    top: 0;
    left: 5%;
    width: 60%;
    z-index: 10;
}

#ph1{
    position: absolute;
    top: 10%;
    right: 3%;
    width: 30%;
}

#ph1-1{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#bg1{
    width: 100%;
    height: auto;
    min-height: 200px;
    position: absolute;
    top: 0px;
    left: -20px;
    z-index: 0;
}

#ph2{
    position: absolute;
    top: 40%;
    left: 0;
    width: 50%;
}

#ph2-1{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#bg2{
    width: 105%;
    min-height: 300px;
    height: auto;
    position: absolute;
    top: 5%;
    left: 0px;
    z-index: 0;
}

#ph3{
    position: absolute;
    top: 50%;
    right: 0px;
    width: 45%;
}

/*block 2*/
.block.no2{
    min-height: 500px;
}

#q2{
    position: absolute;
    top: 0;
    right: 5%;
    width: 70%;
    z-index: 10;
}

#bg3{
    width: 30%;
    min-height: 280px;
    height: auto;
    position: absolute;
    top: 0px;
    left: -3%;
    z-index: 0;
}

#bg3-1{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#bg3-2{
    width: 20%;
    height: 20%;
    position: absolute;
    bottom: -50px;
    right: -50px;
}

#q3{
    position: absolute;
    top: 65%;
    left: 10%;
    width: 60%;
}

/*パラ1*/
.image.para1 {
  background-image: url('/abudhabi/img/faq/ph4.jpg');
    height: 800px;
}

/*block 3*/
.block.no3{
    min-height: 350px;
}

#q4{
    width: 75%;
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 10;
}

#bg4{
    position: relative;
    top:-10%;
    width: 20%;
    min-height: 200px;
    height: auto;
    z-index: 0;
}

/*block 4*/
.block.no4{
    min-height: 300px;
}

#q5{
    width: 65%;
    position: absolute;
    top: 0px;
    right: 2%;
    z-index: 10;
}

#ph5{
    position: absolute;
    top: 0;
    left: -10%;
    width: 40%;
}

#ph5-1{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#bg5{
    width: 100%;
    height: 300px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 0;
}

/*block 5*/
.block.no5{
    min-height: 250px;
}

#q6{
    width: 75%;
    margin: 8% auto 8% 10%;
}

/*block 6*/
.block.no6{
    min-height: 360px;
}

#q7{
    width: 58%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

#ph6{
    position: absolute;
    top: 0;
    right: 0px;
    width: 40%;
}

#ph6-1{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#bg6{
    width: 100%;
    min-height: 300px;
    height: auto;
    position: absolute;
    top: 15%;
    right: 5%;
    z-index: 0;
}

/*パラ2*/
.image.para2 {
  background-image: url('/abudhabi/img/faq/ph7.jpg');
    height: 800px;
}


/*block 7*/
.block.no7{
    min-height: 200px;
}

#q8{
    position: relative;
    width: 75%;
    left: 3%;
}

/*block 8*/
.block.no8{
    min-height: 700px;
    padding-bottom: 5%;
}

#q9{
    position: absolute;
    width: 40%;
    left: 5%;
    top: 10%;
    z-index: 10;
}

#ph8{
    width: 48%;
    position: absolute;
    right: 0;
    top: 0;
}

#ph8-1{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

#bg8{
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    min-height: 400px;
    height: auto;
}

#ph9{
    width: 55%;
    position: absolute;
    left: -15%;
    top: 40%;
}

#ph9-1{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

#bg9{
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    min-height: 300px;
    height: auto;
}

@media only screen and (max-width:979px) {
#faq .header{
    height: 100%;
}

.section.block div,
#q1,#q2,#q3,#q4,#q5,#q6,#q7,#q8,#q9,
#ph5,#ph5-1,#ph6,#ph6-1{
    opacity: 1;
    animation: none;
    -weblit-animation:'none';
    -webkit-transition: 'none';
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
}

#ph1,#ph2,#ph3,#ph4,#ph7,#ph8,#ph9{
    opacity: 1;
    animation: none;
    -weblit-animation:'none';
    -webkit-transition: 'none';
    position: relative;
    top: 0;
    left: 0;
    width: 50%;
    float: left;
    padding: 5px;
    box-sizing: border-box;
}

#ph1-1,#ph2-1,#ph3-1,#ph4-1,#ph7-1,#ph8-1,#ph9-1{
    opacity: 1;
    animation: none;
    -weblit-animation:'none';
    -webkit-transition: 'none';
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    float: left;
    box-sizing: content-box;
}

#q6{
    margin: 8% auto;
}


.section.block div#q1.active,
.section.block div#ph2.active,
.section.block div#ph2-1.active,
.section.block div#q3.active,
.section.block div#q6.active,
.section.block div#ph8.active,
.section.block div#ph8-1.active{
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
    opacity: 1;
}

.section.block div#ph1.active,
.section.block div#ph1-1.active,
.section.block div#ph3-1.active,
.section.block div#ph3.active,
.section.block div#q5.active,
.section.block div#ph6.active,
.section.block div#ph6-1.active,
.section.block div#q8.active,
.section.block div#ph9.active,
.section.block div#ph9-1.active{
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
    opacity: 1;
}

.section.block div#ph1.active,
.section.block div#ph1-1.active,
.section.block div#q2.active,
.section.block div#q4.active,
.section.block div#ph5.active,
.section.block div#ph5-1.active,
.section.block div#q7.active,
.section.block div#q9.active{
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
    opacity: 1;
}

/*bg*/
.section.block div#bg1.active,
.section.block div#bg3-2.active,
.section.block div#bg4.active,
.section.block div#bg5.active,
.section.block div#bg9.active{
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
    opacity: 0.5;
}

.section.block div#bg2.active,
.section.block div#bg3.active,
.section.block div#bg3-1.active,
.section.block div#bg6.active,
.section.block div#bg8.active{
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
    opacity: 0.5;
}

.block.no1,
.block.no2,
.block.no3,
.block.no4,
.block.no5,
.block.no6,
.block.no7,
.block.no8{
    min-height: inherit;
    padding-bottom: 20px;
    clear: both;
    overflow: hidden;
}

.image.para1,
.image.para2{
    height: 280px;
}

.section.block div h2{
    margin-top: 10px;
}

.section.block div h2,
.section.block div p{
    padding:0 10px;
}

.section.block div.bgbrown{
    display: none;
}

.section.block div.bgglay{
    display: none;
}

}