@charset "UTF-8";

/* slick arrow */
.slide-arrow{position:absolute;top:50%;cursor:pointer;z-index:100;transform:translateY(-50%);}
.slide-arrow.prev-arrow{left:0;}
.slide-arrow.next-arrow{right:0;}
.slide-arrow i {display:inline-block;padding:1rem 1.5rem;color:#666;line-height:1;}

@media (min-width:896px){
  .slide-arrow i{font-size:6rem;transition:opacity .15s linear;}
  .slide-arrow:hover i{opacity:.8;}
}
@media screen and (max-width:896px){
  .slide-arrow i{font-size:4rem;}
}
@media screen and (max-width:640px){
  .slide-arrow i{font-size:3rem;padding:.5rem;}
}

/*----------------------------------------------------
https://codepen.io/johnheiner/pen/JdRybK
*/
@keyframes delay {
  0%, 60%, 100% {transform: scale(0.1);-webkit-transform: scale(0.1);}
  20% {transform: scale(1);-webkit-transform: scale(1);}
}
.js body{
	position: relative;
}
.js body::before,
.js body::after {
	display: block;
  content: '';
  height: 51vh;
  width: 100vw;
  position: fixed;
  background-color: #ddd;
	transition: all .4s ease-in-out;
	pointer-events: none;
}
.js body::before {
	top: 0;
	left: 0;
}
.js body::after {
	bottom: 0;
	right: 0;
}
.js body.loading{
	overflow: hidden;
}
.js body.render::before {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.js body.render::after {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.js body i.loader{
	pointer-events: none;
	letter-spacing: -.4em;
	display: block;
  margin: 0 auto;
  width: 120px;
  height: 20px;
  text-align: center;
  position:fixed;
  top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	opacity: 1;
	
}
.js body i.loader > span {
	pointer-events: none;
	letter-spacing: normal;
  height: 24px;
	width: 24px;
  border-radius: 50%;
	margin: 5px;
  display: inline-block;
  -webkit-animation: delay 0.8s infinite ease-in-out;
					animation: delay 0.8s infinite ease-in-out;
					transition: all .4s ease-in-out;
					background-color: #fff;
}
.js body i.loader .bar1 {
	-webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.js body i.loader .bar2 {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.js body i.loader .bar3 {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.js body.render i.loader span{
	opacity: 0;
}
/*----------------------------------------------------*/
/*IE11only hack new!!
_:-ms-lang(x)::-ms-backdrop, .selector {}
*/
html {
  overflow-y: scroll;
  font-size: calc(.78125vw + 7.5px);
}
@media (max-width: 320px) {
  html {
    font-size: 62.5%;
  }
}
@media (min-width: 961px) {
  html {
    /*font-size: 93.8%;*/
    font-size: 81.25%;
  }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: bold;
}
h1 {font-size: 2.8rem;}
h2 {font-size: 2.4rem;}
h3 {font-size: 2rem;}
h4 {font-size: 1.6rem;}
h5 {font-size: 1.4rem;}
h6 {font-size: 1rem;}

body{
  font-family: -apple-system, BlinkMacSystemFont,"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",  'Kosugi', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', "メイリオ", sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  letter-spacing: 0.025em;
  color: #3a3a3a;
  background-color: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
_::-webkit-full-page-media, _:future, :root body {
  -webkit-font-feature-settings: 'pkna';
  font-feature-settings: 'pkna';
}
a img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity .5s ease;
}
a:hover img {
  opacity: .8;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.en{
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.en-mincho {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
}
.en-mincho.b {
  font-weight: 600;
}
.mincho {
  /*font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
  font-weight: 400;
  font-feature-settings: "palt";*/
  font-weight: 500;
}
::-moz-selection,::selection {
		background: #b3d4fc;
		text-shadow: none;
}
.clearfix:after {
		content:"";
		display:block;
		clear:both;
}

.js .js-wp {
  transform: translateY(1rem);
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
}
.js .js-wp.js-wp-active {
  transform: translate(0);
  opacity: 1;
}

.fs60 { font-size: 4rem; }
.fs52 { font-size: 3.46rem; }
.fs30 { font-size: 2rem; }
.fs24 { font-size: 1.6rem; }
.fs20 { font-size: 1.33rem; }
.fs18 { font-size: 1.2rem; }
.fs16 { font-size: 1.06rem; }
@media screen and (max-width:896px){
  .fs60 { font-size: 3.2rem; }
  .fs52 { font-size: 2.6rem; }
  .fs30 { font-size: 1.8rem; }
  .fs24 { font-size: 1.4rem; }
  .fs20 { font-size: 1.26rem; }
  .fs18 { font-size: 1.1rem; }
  .fs16 { font-size: 1rem; }
}
@media screen and (max-width:640px){
  .fs60 { font-size: 2.4rem; }
  .fs52 { font-size: 1.8rem; }
  .fs30 { font-size: 1.6rem; }
  .fs24 { font-size: 1.2rem; }
  .fs20 { font-size: 1.15rem; }
}

/*----------------------------------------------------*/
@media print, screen and (min-width:641px){
  .sp-only{display: none;}
}
@media print, screen and (min-width:897px){
  .pctb-only{display: none;}
  .tbsp-only{display: none;}
}
@media screen and (max-width:896px){
  .pc-only{display: none;}
}
@media screen and (max-width:640px){
	.pctb-only{display: none;}
}
	
/*----------------------------------------------------*/
figcaption, figure, main{
  display:block;
}
main{
  position: relative;
  height: 100%;
  background-color: #fff;
}
img{
  vertical-align: top;
}
.all{
  text-align: left;
  }
.alc{
  text-align: center;
}
.alr{
  text-align: right;
}
.f--jc{
  text-align: justify;
  text-justify: inter-ideograph;
}
.f--indent{
  padding-left: -1rem;
  text-indent: 1rem;
}
.f--upc{
  text-transform: uppercase;
}
.f--small{
  font-size: 10px;
}
.ib{
  display: inline-block;
}
.bgGrad {
  background: #e8f0ef;
  background: -moz-linear-gradient(45deg,  #e8f0ef 0%, #f1ebe8 100%);
  background: -webkit-linear-gradient(45deg,  #e8f0ef 0%,#f1ebe8 100%);
  background: linear-gradient(45deg,  #e8f0ef 0%,#f1ebe8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8f0ef', endColorstr='#f1ebe8',GradientType=1 );
}
/*----------------------------------------------------*/
a {
  color: #3a3a3a;
  text-decoration: none;
}

body.menu-active #wrapper,
body.modal-open #wrapper {
  width: 100%;
  position: fixed;
}

/*-header---------------------------------------------------*/
#header{
	position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
}
#site-header{
  position: relative;
  height: 120px;
  transition: height .4s ease, background .4s ease;
  overflow: hidden;
}
body.min-header #site-header {
  height: 80px;
  background: rgba(255,255,255,0.9);
}
body.menu-active #site-header {
  background: #fff;
}
#site-header h1 {
  position: absolute;
  left: 30px;
  top: 50%;
	max-width: 40%;
  transform: translateY(-50%);
  transition: all .3s ease;
}
#site-header h1 a img{
  display: block;
  max-height: 45px;
}

#menu-bg {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: transparent;
  transition: all .5s ease;
}
body.menu-active #menu-bg {
  height: 100%;
  background: #fff;
}

#menu {
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  transition: all .3s ease;
}
#menu .menu-btn {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  cursor: pointer;
}
#menu .menu-btn i {
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0;
  top: 50%;
  margin-top: -2px;
  background: #3a3a3a;
  transition: all .3s ease;
}
#menu .menu-btn:before,
#menu .menu-btn:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: #3a3a3a;
  transition: all .3s ease;
}
#menu .menu-btn:before {
  top: 2px;
}
#menu .menu-btn:after {
  bottom: 2px;
}
body.menu-active #menu .menu-btn i {
  left: 100%;
  opacity: 0;
}
body.menu-active #menu .menu-btn:before {
  transform: rotate(135deg);
  top: 50%;
  margin-top: -2px;
}
body.menu-active #menu .menu-btn:after {
  transform: rotate(-135deg);
  bottom: 50%;
  margin-bottom: -2px;
}
@media (min-width:897px){
body.is-home #menu .menu-btn i { background: #fff; }
body.is-home #menu .menu-btn:before,
body.is-home #menu .menu-btn:after { background: #fff; }
body.is-home.min-header #menu .menu-btn i,
body.is-home.menu-active #menu .menu-btn i { background: #3a3a3a; }
body.is-home.min-header #menu .menu-btn:before,
body.is-home.min-header #menu .menu-btn:after,
body.is-home.menu-active #menu .menu-btn:before,
body.is-home.menu-active #menu .menu-btn:after { background: #3a3a3a; }
}

#global-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*height: calc(100% - 240px);*/
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease;
}
body.menu-active #global-menu {
  visibility: visible;
  opacity: 1;
}
#global-menu .inner {
  position: relative;
  width: 100%;
  min-height: 100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
#global-menu .menu-list {
  width: 100%;
  padding: 0 40px;
  max-width: 1200px;
  line-height: 1.5;
  box-sizing: border-box;
}
#global-menu .menu-list a {
  display: inline-block;
  padding: .8rem 0;
}
#global-menu .menu-list .en-mincho {
  font-size: 2.4rem;
}
#global-menu .menu-list .mincho {
  display: block;
  font-size: 1.2rem;
}

@media (min-width:897px){
  #global-menu .menu-list li {
    padding-right: 50%;
  }
  #global-menu .menu-list li a:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 47.5%;
    height: 100%;
    height: calc(100% - 140px);
    z-index: 50;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: opacity .3s ease, height .3s ease;
    pointer-events: none;
  }
  #global-menu .menu-list li:nth-child(2) a:before { background-image: url("../images/bg_gnav_a.jpg"); }
  #global-menu .menu-list li:nth-child(3) a:before { background-image: url("../images/bg_gnav_b.jpg"); }
  #global-menu .menu-list li:nth-child(4) a:before { background-image: url("../images/bg_gnav_c.jpg"); }
  #global-menu .menu-list li:nth-child(5) a:before { background-image: url("../images/bg_gnav_d.jpg"); }
  #global-menu .menu-list li a:hover:before {
    opacity: 1;
  }
  body.min-header #global-menu .menu-list li a:before {
    height: calc(100% - 80px);
  }
  #global-menu .menu-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 47.5%;
    height: 100%;
    height: calc(100% - 140px);
    background: url("../images/bg_gnav.jpg") no-repeat center center;
    background-size: cover;
    z-index: 10;
    transition: height .3s ease;
  }
  body.min-header #global-menu .menu-img {
    height: calc(100% - 80px);
  }
}
@media (min-width:1201px){
  #site-header h1{
    left: 60px;
  }
}
@media screen and (max-width:896px){
  #site-header,
  body.min-header #site-header {
    height: 60px;
  }
  #site-header h1 {
    left: 30px;
  }
  #menu {
    right: 30px;
  }
  #menu .menu-btn {
    width: 30px;
    height: 30px;
  }
  #menu .menu-btn i {
    height: 4px;
    margin-top: -2px;
  }
  #menu .menu-btn:before,
  #menu .menu-btn:after {
    height: 4px;
  }
  body.menu-active #menu .menu-btn:before {
    margin-top: -2px;
  }
  body.menu-active #menu .menu-btn:after {
    margin-bottom: -2px;
  }
  
  #global-menu {
    height: 100%;
  }
  #global-menu .menu-img {
    display: none;
  }
  #global-menu .menu-list {
    width: 100%;
    max-width: 650px;
    padding: 60px 4% 0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #global-menu .menu-list li {
    width: 48%;
    padding: 1rem 0;
    box-sizing: border-box;
  }
  #global-menu .menu-list li:first-child {
    width: 100%;
  }
  #global-menu .menu-list li a {
    display: block;
    padding: 0;
  }
  #global-menu .toEc {
    line-height: 1;
    margin: 30px 0 20px;
  }
  #global-menu .menu-list .type {
    display: block;
    position: relative;
    padding-bottom: 105%;
  }
  #global-menu .menu-list .type:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    padding-bottom: 115.625%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 1;
  }
  #global-menu .menu-list li:nth-child(2) .type:before { background-image: url("../images/bg_gnav_a.jpg"); }
  #global-menu .menu-list li:nth-child(3) .type:before { background-image: url("../images/bg_gnav_b.jpg"); }
  #global-menu .menu-list li:nth-child(4) .type:before { background-image: url("../images/bg_gnav_c.jpg"); }
  #global-menu .menu-list li:nth-child(5) .type:before { background-image: url("../images/bg_gnav_d.jpg"); }
  #global-menu .menu-list .en-mincho {
    position: relative;
    font-size: 2.8rem;
    z-index: 5;
  }
  #global-menu .menu-list .en-mincho.b {
    display: inline-block;
    margin-left: -1rem;
  }
  #global-menu .menu-list .mincho {
    padding-top: 1em;
    font-size: 1.1rem;
  }
}
@media screen and (max-width:640px){
  #site-header,
  body.min-header #site-header {
    height: 50px;
  }
  #site-header h1 {
    left: 15px;
  }
  #site-header h1 a img{
    max-height: 20px;
  }
  #menu {
    right: 15px;
  }
  #menu .menu-btn {
    width: 22px;
    height: 22px;
  }
  #menu .menu-btn i {
    height: 2px;
    margin-top: -1px;
  }
  #menu .menu-btn:before,
  #menu .menu-btn:after {
    height: 2px;
  }
  body.menu-active #menu .menu-btn:before {
    margin-top: -1px;
  }
  body.menu-active #menu .menu-btn:after {
    margin-bottom: -1px;
  }
  #global-menu .menu-list {
    padding: 50px 4% 0 8%;
  }
  #global-menu .menu-list li {
    padding: 0 0 1rem;
  }
  #global-menu .menu-list li:first-child {
    margin-left: -1rem;
  }
}

/*-asides--------------------------------------------------*/
#typeSelect {
  position: relative;
  margin: 18rem 0 8.6rem;
}
#typeSelect .bg {
  position: absolute;
  left: 0;
  top: 2.2rem;
  width: 100%;
  padding-bottom: 25.67rem;
  z-index: 1;
}
#typeSelect .lead {
  padding: 1rem 0;
  position: relative;
  text-align: center;
  z-index: 5;
}
#typeSelect .typeList {
  position: relative;
  padding: 0 4.375%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  z-index: 10;
}
#typeSelect .ttl {
  position: relative;
  z-index: 10;
  font-size: 4rem;
  padding-bottom: 1rem;
  line-height: 1.2;
  text-align: center;
}
#typeSelect .type-wrap {
  position: relative;
  padding-top: 1rem;
  width: 21.91%;
  max-width: 320px;
}
#typeSelect .type-wrap h3 {
  position: relative;
  margin: 0 0 -1.2rem -2rem;
  z-index: 15;
  line-height: 1;
}
#typeSelect .type-wrap h3 .alpha {
  font-size: 5.46rem;
  font-weight: 600;
}
#typeSelect .type-wrap .text {
  padding-top: 1.5rem;
  font-size: 1.2rem;
  background: #fff;
}
#typeSelect .type-wrap .img {
  overflow: hidden;
}
@media screen and (min-width:897px){
  #typeSelect .type-wrap img {
    transition: all .8s ease;
  }
  #typeSelect .type-wrap h3 {
    transition: color .8s ease, transform .4s ease-in-out;
  }
  #typeSelect .type-wrap a:hover h3 {
    color: #999;
    transform: translateY(0.5em);
  }
  #typeSelect .type-wrap a:hover img {
    opacity: 1;
    transform: scale(1.06);
    /*-webkit-filter: sepia(80%) brightness(0.8);
    -moz-filter: sepia(80%) brightness(0.8);
    -ms-filter: sepia(80%) brightness(0.8);
    filter: sepia(80%) brightness(0.8);*/
  }
}
@media screen and (min-width:1601px){
  #typeSelect .typeList .ib {
    display: block;
  }
}
@media screen and (max-width:896px){
  #typeSelect {
    margin: 10rem 0 6rem;
  }
  #typeSelect .ttl {
    padding-bottom: 2rem;
  }
  #typeSelect .bg {
    padding-bottom: 40%;
  }
  #typeSelect .typeList {
    padding: 0 6%;
  }
  #typeSelect .type-wrap .text {
    font-size: 1.1rem;
  }
}
@media screen and (max-width:640px){
  #typeSelect {
    margin: 6rem 0 3rem;
  }
  #typeSelect .bg {
    padding-bottom: 50%;
  }
  #typeSelect .ttl {
    padding-bottom: 0;
    font-size: 3rem;
  }
  #typeSelect .lead {
    padding-bottom: 0;
  }
  #typeSelect .lead .ib {
    display: block;
  }
  #typeSelect .typeList {
    padding: 0 4% 0 8%;
  }
  #typeSelect .type-wrap {
    width: 48%;
  }
  #typeSelect .type-wrap h3 {
    margin: 0 0 -1.2rem -1.5rem;
  }
  #typeSelect .type-wrap h3 .alpha {
    font-size: 4rem;
  }
}

#footer-bnrs {
  padding: 7.33rem 40px 6.67rem;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
#footer-bnrs .ttl-s {
  max-width: 1200px;
  padding-bottom: 1.5rem;
  margin: 0 auto;
}
#footer-bnrs .bnr-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
#footer-bnrs .bnr-wrap + .bnr-wrap {
  margin-top: 40px;
}
#footer-bnrs .ttl {
  font-size: 1.6rem;
  padding: 0 0 0 3em;
  width: 13.5em;
}
#footer-bnrs .text-wrap {
  width: 66.67%;
}
#footer-bnrs .link-text {
  font-size: 1.2rem;
  padding-right: 1em;
}
#footer-bnrs .copy {
  padding-bottom: 1em;
  font-weight: bold;
}
#footer-bnrs .link a {
  display: inline-block;
  margin-right: 1em;
  text-decoration: underline;
}
#footer-bnrs .link i {
  display: inline-block;
  font-size: 130%;
  padding-right: .3em;
}
#footer-bnrs .img-wrap {
  position: relative;
  width: 33.33%;
  min-height: 220px;
}
#footer-bnrs .img-wrap .bg {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;
}
#footer-bnrs .img-wrap .bg01 {background-image:url("../images/bg_footer_bnr01.jpg");}
#footer-bnrs .img-wrap .bg02 {background-image:url("../images/bg_footer_bnr02.jpg");}
#footer-bnrs .img-wrap .bg03 {background-image:url("../images/bg_footer_bnr03.jpg");}
#footer-bnrs .img-wrap .bg04 {background-image:url("../images/bg_footer_bnr04.jpg");}
#footer-bnrs .img-wrap .bg05 {background-image:url("../images/bg_footer_bnr05.jpg");}

@media (min-width:896px){
  #footer-bnrs .link a i {
    transition: transform .15s linear;
  }
  #footer-bnrs .link a:hover i {
    transform: translateX(.15em);
  }
}
@media screen and (max-width:896px){
  #footer-bnrs {
    padding: 5rem 30px;
  }
  #footer-bnrs .bnr-wrap + .bnr-wrap {
    margin-top: 30px;
  }
  #footer-bnrs .ttl {
    padding: 0 0 0 1em;
    width: 10em;
  }
}
@media screen and (max-width:768px){
  #footer-bnrs .text-wrap {
    padding: 40% 30px 20px;
    width: auto;
  }
  #footer-bnrs .ttl {
    width: auto;
    padding: 1em 0 .6em;
  }
  #footer-bnrs .img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    padding-bottom: 40%;
  }
  #footer-bnrs .img-wrap .bg01 {
    background-position: center -10px;
  }
}
@media screen and (max-width:640px){
  #footer-bnrs {
    padding: 3rem 15px;
  }
  #footer-bnrs .bnr-wrap + .bnr-wrap {
    margin-top: 15px;
  }
  #footer-bnrs .text-wrap {
    padding: 40% 15px 10px;
  }
}

/*-footer--------------------------------------------------*/
#footer {
  padding: 70px 40px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 1.06rem;
}
#footer #footer-links {
  line-height: 2;
}
#footer #footer-links a {
  display: inline-block;
  color: #929292;
}
#footer .copyright {
  /*padding-top: 30px;*/
}
@media screen and (min-width:897px){
  #footer #footer-links a:hover {
    text-decoration: underline;
  }
}
@media screen and (max-width:896px){
  #footer {
    padding: 50px 30px;
  }
  #footer .copyright {
    padding-top: 20px;
  }
}
@media screen and (max-width:640px){
  #footer {
    padding: 20px 15px;
  }
}

/*-modal-area--------------------------------------------------*/
#modal-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all .5s ease;
}
#modal-area.active {
  visibility: visible;
  opacity: 1;
}
#modal-area #modal-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.95);
  z-index: 1;
}
#modal-area #modal-close {
  position: absolute;
  right: 2%;
  top: 2%;
  z-index: 5;
  cursor: pointer;
  transition: transform .5s ease, opacity .5s ease;
}
#modal-area #modal-close i {
  position: relative;
  display: block;
  width: 3rem;
  height: 3rem;
}
#modal-area #modal-close i:before,
#modal-area #modal-close i:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: #666;
}
#modal-area #modal-close i:before {
  transform: rotate(45deg);
}
#modal-area #modal-close i:after {
  transform: rotate(-45deg);
}
#modal-area #modal-content {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 90%;
  max-width: 1200px;
  height: 90%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
#modal-area #modal-content::-webkit-scrollbar { width: 6px; }
#modal-area #modal-content::-webkit-scrollbar-track { border-radius: 0; background: #efefef; box-shadow: 0 0 3px #ccc inset; }
#modal-area #modal-content::-webkit-scrollbar-thumb { border-radius: 0; background: #666; }

#modal-area #modal-content img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  pointer-events: initial;
  transition: transform .3s ease, opacity .5s  ease;
}
#modal-area #modal-content img.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#modal-area #modal-controle {
  font-size: 5rem;
}
#modal-area #modal-controle span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  cursor: pointer;
  z-index: 10;
  transition: color .5s ease;
}
#modal-area #modal-controle .prev {
  left: 2%;
}
#modal-area #modal-controle .next {
  right: 2%;
}
@media (min-width:897px){
  #modal-area #modal-close:hover {
    transform: scale(1.15);
    opacity: .8;
  }
  #modal-area #modal-controle span:hover {
    color: #ccc;
  }
}

/*------------------------------------------------------
Z-INEX
--------------------------------------------------------*/
.js body i.loader{
	z-index: 1003;
}
.js body::before,
.js body::after{
	z-index: 1002;
}
#header{
	z-index: 1000;
}
#site-header {
  z-index: 1500;
}
#menu-bg {
  z-index: 500;
}
#global-menu {
  z-index: 800;
}
#wrapper {
  z-index: 100;
}
.modaal-overlay {
  z-index: 1600;
}
#modal-area {
  z-index: 1800;
}