@charset "utf-8";

body{
	font-size: 13px;
}
figure{margin: 0}

h3{font-size: 1.3em}
h4{font-size: 1.2em}
h5{font-size: 1em;margin: 1em 0}

.aligncenter{text-align: center}
.upcase{text-transform: uppercase;}
.vertical{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.catalog-page img{max-width: 100%;height: auto}
.catalog-page ul{list-style:none;}

.page-frame{
	padding: 48px 0;
	overflow: hidden;
}

.wrapper{
	width: 1024px;
	margin: 0 auto;
}
.wrapper-nr{
	width: 80%;
	max-width: 1024px;
	margin: 0 auto;
}

.half{width: 50%;}

.header-frame{

}

.blo,
.br{display: block;}

.ds{
	display: inline-block;
	letter-spacing: -5px;
	margin-right: 6px;
}
.abs{position: absolute;}

.wt{
	color: #fff;
}

.section-read{
	width: 50%;
	margin: 0 auto
}
.info{
	font-size: 85%
}
.credit{
	font-size: .8em;
}
#indicator-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 8;

    -webkit-transition: -webkit-transform .8s cubic-bezier(0.85, 0, 0.32, 1);
    transition: -webkit-transform .8s cubic-bezier(0.85, 0, 0.32, 1);
    transition: transform .8s cubic-bezier(0.85, 0, 0.32, 1);
    transition: transform .8s cubic-bezier(0.85, 0, 0.32, 1),-webkit-transform .8s cubic-bezier(0.85, 0, 0.32, 1)
    /* display: none;後で消す */
}

#indicator {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  top: 40%;
  left: 50%;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: transformX(-50%) translateZ(0);
  -ms-transform: transformX(-50%) translateZ(0);
  transform: transformX(-50%) translateZ(0);
}
#indicator small{
	display: block;
	font-size: 14px;
	margin: 7.4em 0 0 -1em;
	color: #fff;
	opacity: .7;
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

#indicator-wrapper .cover{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #dfd3b9 url(../img/cover.jpg) no-repeat 50% 0 / 100% auto;
}

#indicator-wrapper .percent {
	position: absolute;
	top: 52%;
	left: 49%;
    font-size: 1.4rem;
    /*font-weight: bold;
    font-family: 'Georgia','Times New Roman',serif;*/
    color: #fff;
    z-index: 2
}

#indicator-wrapper.active {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.scroll{
    position: absolute;
    bottom: 8%;
    right: 1%;
    z-index: 2;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: #000;
    font-size: 12px;
    padding-bottom: 1.4em;
    /*text-shadow: 1px 1px 3px rgba(0,0,0,.4);*/
}
.scroll span{
    display: block;
    position: absolute;
    right: 2em;
    bottom: 0;
    width: 8px;
    height: 100%;

}
.scroll span::before,
.scroll span::after{
    display: block;
    background: #000/*rgba(255,255,255,.8)*/;
    /*box-shadow: 1px 1px 3px rgba(0,0,0,.4);*/
}
.scroll span::before{
    width: 1px;
    height: 100%;
    left: 0;
    bottom: 0;
    -webkit-animation: movin 2s cubic-bezier(0.88, 0, 0.35, 1) infinite;
    animation: movin 2s cubic-bezier(0.88, 0, 0.35, 1) infinite;
}
.scroll span::after{
    width: 16px;
    height: 1px;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    right: -8px;
    bottom: 0;
}
@-webkit-keyframes movin{
    0%{height: 100%}
    100%{height: 20%;}
}
@keyframes movin{
    0%{height: 100%}
    100%{height: 20%;}
}

.title{
	position: absolute;
	width: 30%;
	top: 40%;
	right: 12%;
}

/*
-----------------------*/

.p6,
.p8,
.p10,
.p18{
	position: relative;
}

.p6 .col-evn2,
.p10 .col-evn2,
.p12 .col-evn2{
	z-index: 1
}

.p6,
.p11{
	padding: 24px;
}

/*
-----------------------*/
.header-frame{overflow: hidden;}
.header-frame .kv{vertical-align: bottom;}

.header-frame .headline{
	padding: 4%;
}

/* Every New
--------------------*/
.every-new .col-evn2,
.new-classic .col-evn2{
	position: relative;
}
.every-new .headline{
	position: absolute;
	width: 45%;
	top: 2%;
	left: 5%;
	color: #fff;
	z-index: 2;
}

.every-new .frame{
	padding: 3%;
}


.p2 .vertical{
	top: 23%;
	right: 9%;
}
.p2 .upcace{
	width: 45%;
	bottom: 5%;
	left: 5%;
}
.p2 ul{
	right: 3%;
	bottom: 3%;
}

.p3 .vertical{
	left: 8%;
	top: 52%;
}



/* Classic
--------------------*/

.p4,
.column-reverse{
	flex-direction: column-reverse;
}
.p4 h2{
	z-index: 2
}
.nc_2{
	width: 50%;
	top: 35%;
	right: 0;
}
.nc_2 .vertical{
	top: 0;
	right: 0;
}
.nc_2 .info{
	width: 68%;
	bottom: 8%;
	left: -50%;
}

.p5 h2{
	top: 1%;
	right: 4%;
}
.p5 .vertical{
	bottom: 8%;
	right: 13%;
}
.p5 .info{
	bottom: 3%;
	left: 5%;
}

.p4 h2,
.p5 h2{
	max-width: 65.66%;
}

.p6 h2 .br{font-size: 1.6em}

.p6 .hd{
	position: absolute;
	border: 2px solid;
	padding: 6px 8px;
	margin: 0;
}
.p6 .item2,
.p6 .item4{
	padding-top: 80px;
}

.nc_2,
.p12 .items,
.p13 .items{
	opacity: 0;
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.active .nc_2,
.p6.active .col-evn2,
.p12.active .items,
.p13.active .items{
	-webkit-animation-timing-function: cubic-bezier(0.42,0,0,1);
	animation-timing-function: cubic-bezier(0.42,0,0,1);
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp
}

.p12 .items-1,
.p13 .items-1{
	animation-delay: .4s;
}
.nc_2,
.p12 .items-2,
.p13 .items-2{
	animation-delay: .8s;
}
.p12 .items-3,
.p13 .items-3{
	animation-delay: 1.2s;
}
/* Order Fes
--------------------*/
.order-fes{
	background: #fbf6e8;
}
.p8{
	padding: 2% 60px 60px;
}
.p8 h2 span,
.p18 h2 span{
	font-size: 1.6em;
}

.p6 h2 small,
.p8 h2 small,
.p18 h2 small{
	font-weight: normal;
}


.p9 .item1 .ov_h{
	width: 200%;
}
.p9 .item2 .ov_h{
	width: 150%;
	margin-left: -50%;
}
.p9 .item2{
	padding-right: 24px;
}
.p9 .border{
	border-top: 2px solid;
	padding-top: 16px;
}


.p10{
	background: url(../img/nc_1.jpg) no-repeat 50% 0 / 100% auto;
}
.order-fes h2 img{
	display: block;
}
.order-fes .cho{
	display: inline-block;
	border: 2px solid;
	padding: 1px 6px;
	margin-bottom: 8px;
}


.p10 .headline{
	bottom: 8%;
	left: 4%;
}
.p10 .vertical{
	top: 2%;
	left: 5%;
}



.p12 .left{
	position: relative;
	background: url(../img/ca_s_1.png) no-repeat 30% 20% / 100% auto;
}

.p13 .left{
	position: relative;
	min-height: 85vw;
	background: url(../img/ca_j_1.png) no-repeat 30% 20% / 100% auto;
}
.p12,
.p13{
	padding: 24px;
}

.p12 .vertical,
.p13 .vertical{
	top: 18%;
	right: 10%;
}

.p4 h2,
.p5 h2,
.p10 .right-2,
.p12 .animate-visual{
	opacity: 0;
	-webkit-animation-duration: 1.8s;
	animation-duration: 1.8s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.active .p5 h2,
.p12.active .fadeLeft{
	-webkit-animation-timing-function: cubic-bezier(0.1, 0.41, 0.11, 1);
	animation-timing-function: cubic-bezier(0.1, 0.41, 0.11, 1);
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft
}
.active .p4 h2,
.p10.active .right-2,
.p12.active .fadeRight{
	-webkit-animation-timing-function: cubic-bezier(0.1, 0.41, 0.11, 1);
	animation-timing-function: cubic-bezier(0.1, 0.41, 0.11, 1);
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight
}
.p10 .right-1{
	animation-delay: .4s
}
.p10 .right-2{
	animation-delay: .8s
}


/* Ippin
--------------------*/
.p14{
	background: linear-gradient(106deg, #A97953,#a17149);
}
.p15{
	background: linear-gradient(229deg,#6d777b,#697277);
}
.p16{
	background: linear-gradient(194deg, #ccd3d3,#c0c9cb);
}
.p17{
	background: linear-gradient(151deg,#264a6e,#1d4161);
}

.ippin h2{
	width: 80%;
	margin: 0 auto;
	padding: 24px 0;
}
.ippin figcaption{
	padding: 16px 32px 32px;
}
.ippin h3{
	font-size: 1.4em;
}


.p14 .section-read{
	opacity: 0;
	transition: opacity 1s ease-out 1s;
}
.p14.active .section-read{
	opacity: 1
}



/* Sustainable Items
--------------------*/
.sustainable-items .headline{
	top: 45%;
	left: 22%;
	z-index: 2;
}
.sustainable-items .accent{
	display: inline-block;
	background: #00265b;
	color: #fff;
	padding: 2px;
	margin-bottom: 4px;
}
.sustainable-items h3{
	margin: 0 0 .5em;
}

.sustainable-items .items::before,
.p19::before{
	background: #e5e7ec;
	width: 90%;
	height: 90%;
	top: 6vh;
	left: 5%;
	z-index: 0;
}
.sustainable-items .items > *,
.p19 .items{
	position: relative;
	z-index: 1
}

.p18 h2{
	margin-bottom: .5em
}
/*.p18 h4{
	top: 50%;
	left: 40%;
}*/

.p19{
	padding-right: 24px;
}

.sustainable-items .item-1{
	padding: 32px 16px 0 0; 
}

.sustainable-items .item-2{
	margin-top: 160px;
	padding: 16px 0 0 24px;
}
.sustainable-items .item-4{
	margin-top: 32px;
}

.sustainable-items .item-2 h4{
	bottom: 0%;
	right: +3%;
}


.p20 .left,
.p20 .right-1,
.p20 .right-2{
	opacity: 0;
	-webkit-animation-duration: 1.8s;
	animation-duration: 1.8s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.p20.active .left{
	-webkit-animation-timing-function: cubic-bezier(0.1, 0.41, 0.11, 1);
	animation-timing-function: cubic-bezier(0.1, 0.41, 0.11, 1);
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft	
}
.p20.active .right-1,
.p20.active .right-2{
	-webkit-animation-timing-function: cubic-bezier(0.1, 0.41, 0.11, 1);
	animation-timing-function: cubic-bezier(0.1, 0.41, 0.11, 1);
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight
}
.p20.active .right-1{
	animation-delay: .4s;
}
.p20.active .right-2{
	animation-delay: .8s;
}


/* Animations
-----------------------*/
.header-frame .ef1,
.p3,
.sustainable-items .items{
	opacity: 0;
	filter: blur(20px);
	transition: all 1.2s ease-out;
}
.active .header-frame .ef1,
.active .p3,
.active.sustainable-items .items{
	opacity: 1;
	filter: blur(0);
}

.header-frame .sub_hd,
.p6 .items{
	opacity: 0;
	transition: opacity .5s ease-in;
}

.header-frame .rd,
.p9 .item1,
.p9 .item2,
.p11 .items,
.ippin .items .ef1,
.ippin .items .ef2{
	opacity: 0;
	transform: translateY(20px);
	transition: all .8s ease-out;
}
.active .header-frame .rd,
.active .p9 .item1,
.active .p9 .item2,
.active .p11 .items,
.ippin.active .items .ef1,
.ippin.active .items .ef2{
	opacity: 1;
	transform: translateY(0);
}


.p12 .left .hd,
.p12 .left .rd{
	opacity: 0;
	transform: translateX(20px);
	transition: all .8s ease-out;
}
.p12 .right .hd,
.p12 .right .sub_hd{
	opacity: 0;
	transform: translateX(-20px);
	transition: all .8s ease-out;	
}
.p12 .act .hd,
.p12 .act .rd,
.p12 .act .info,
.p12 .act .sub_hd,
.p12 .act .point,
.p16 .right .act .hd,
.p16 .right .act .rd,
.p16 .right .act .info{
	opacity: 1;
	transform: translateX(0);
}

.active .header-frame .sub_hd,
.p6.active .items{
	opacity: 1;
}

.header-frame .sub_hd,
.p6 .item1,
.sustainable-items .item-1{
	transition-delay: .4s
}

.p6 .item3,
.p9 .item1,
.p11 .items-1,
.ippin .items .ef1,
.sustainable-items .item-2{
	transition-delay: .8s
}
.header-frame .rd,
.p6 .item2,
.p9 .item2,
.p11 .items-2,
.ippin .items .ef2,
.sustainable-items .item-3{
	transition-delay: 1.2s
}
.p6 .item4,
.p11 .items-3,
.sustainable-items .item-4{
	transition-delay: 1.6s
}
.p11 .items-4,
.sustainable-items .item-5{
	transition-delay: 2s
}
.sustainable-items .item-6{
	transition-delay: 2.4s;

}

.act
.fadeInRight {
	-webkit-animation-timing-function: cubic-bezier(0.42,0,0,1);
	animation-timing-function: cubic-bezier(0.42,0,0,1);
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight
}

@-webkit-keyframes fadeInLeft {
	1% {
		opacity: 0;
		-webkit-transform: translateX(-10%);
		transform: translateX(-10%)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes fadeInLeft {
	1% {
		opacity: 0;
		-webkit-transform: translateX(-10%);
		transform: translateX(-10%)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@-webkit-keyframes fadeInRight {
	1% {
		opacity: 0;
		-webkit-transform: translateX(10%);
		transform: translateX(10%)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes fadeInRight {
	1% {
		opacity: 0;
		-webkit-transform: translateX(10%);
		transform: translateX(10%)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@-webkit-keyframes fadeInUp {
	1% {
		opacity: 0;
		-webkit-transform: translateY(50px);
		transform: translateY(50px)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes fadeInUp {
	1% {
		opacity: 0;
		-webkit-transform: translateY(50px);
		transform: translateY(50px)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}
@-webkit-keyframes coverVertical {
    1% {
        height: 0
    }

    48% {
        height: 100%;
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    52% {
        height: 100%;
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    100% {
        height: 100%;
        -webkit-transform: scaleY(0);
        transform: scaleY(0)
    }
}

@keyframes coverVertical {
    1% {
        height: 0
    }

    48% {
        height: 100%;
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    52% {
        height: 100%;
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    100% {
        height: 100%;
        -webkit-transform: scaleY(0);
        transform: scaleY(0)
    }
}
@-webkit-keyframes coverHorizon {
    1% {
        transform: scaleX(0)
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes coverHorizon {
    1% {
        transform: scaleX(0)
    }
    100% {
        width: 100%;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@media screen and (max-width: 1024px) and (min-width: 769px){
	
}
@media screen and (max-width: 1300px){
}
@media screen and (max-width: 1024px){
	.p10 .right-1,
	.p10 .right-2{display: block;}
	.p10 .right-1 figcaption,
	.p10 .right-2 figcaption{width:100%;}
	.header-frame .kv{max-width: none;height:100%;}

	.p2 .upcace{bottom: 15%;}
	.p2 ul{bottom: 6%}
	.p3 .vertical{top: 37%;}
	.nc_2{top: 40%;}
	.nc_2 .vertical{right: -8%;}
	.p4{min-height: 80vw}
	.p5 .vertical{bottom: 15%;right: 8%}
	.p5 .info{bottom: 13%}
	.p8{padding: 2% 32px 60px;}
	.p9 .item2 .ov_h{width: 165%}
	.p12 .left,
	.p13 .left{background-position: 30% 40%;background-size: 130% auto}
	.sustainable-items .headline{top: 52%;left: 10%;}
}
@media screen and (max-width: 768px){
	.every-new .col-evn2,
	.new-classic .col-evn2,
	.p8,
	.p9,
	.p10,
	.p11,
	.p12 .col-evn2,
	.p13 .col-evn2,
	.p14,
	.p15,
	.p16,
	.p17,
	.p18,
	.p19{
		width: 100%;
	}
	.p2 .upcace{bottom: 13%}
	.p2 .info{width: 25%;bottom: 4%}
	.p3 .vertical{top: 57%;}
	.nc_2 .vertical{right: 0}
	.p4{min-height: 175vw}
	.p5 .info{bottom: 3%}

	.p9 .col-odd1{padding-left: 24px;}
	.p10{padding-top: 143vw}
	.p10 .vertical{top: 6%;}
	.p13 .left{min-height: 143vw}

	.sustainable-items .headline{position: relative;top: auto;left: auto;margin-top: 48px;}
	.sustainable-items .item-2{margin-top: 0}

}
@media screen and (max-width: 600px){
	.p11 .col-evn2,
	.sustainable-items .col-evn3,
	.sustainable-items .col-evn2,
	.sustainable-items .col-evn1,
	.sustainable-items .col-odd1,
	.sustainable-items .col-odd2{
		width: 100%;
	}
	.p12 .col-odd1,
	.p13 .col-odd1{
		width: 45%;
	}
	.p12 .left, .p13 .left{background-position: -5% 40%;}
	.p12 .vertical, .p13 .vertical{right: 1%;}

	.p18 .column-reverse,
	.p19 .column-reverse{
		flex-direction: column;
	}

	.sustainable-items .item-2,
	.p19{padding: 0;}

	.p18 figcaption,
	.p19 figcaption{padding: 24px;}

	.p3 .vertical{top: 51%;}
	.p5 .vertical{bottom: 4%}
}
@media screen and (max-width: 480px){
	.header-frame .col-evn2{width:100%;}
	.header-frame .headline{padding: 4% 8% 8%}
	.header-frame h2{margin-top: 0;}

	.p3 .vertical{top: 41%;}
	.nc_2{right: 7%;}
	.nc_2 .imgBox{overflow: visible;}
	.nc_2 .vertical{top: -8%;right: -12%;}
	.p8{padding:20% 24px 60px}
	.p8 .headline{top: 0;}

	.p9 .ov_h .br{
		display: inline;
	}
	.p10 .headline{position: static;padding: 0 24px 16px;}
	.sustainable-items .headline{padding-left: 24px;padding-right: 24px;}

}
@media screen and (max-width: 380px){
	.p9 .col-odd1,
	.p9 .col-odd2,
	.p12 .col-odd1,
	.p13 .col-odd1,
	.p12 .col-odd2,
	.p13 .col-odd2{width: 100%}

	.p9 .item1 .ov_h,
	.p9 .item2 .ov_h{width: 100%;margin-left: 0;}
	.p9 .item1,
	.p9 .item2{padding-left: 24px;padding-right: 24px;}


	.p2 .vertical{top: 4%;right: 1%}
	.p3 .vertical{top: 22%;left: 2%;}
	.p4{min-height: 200vw}
	.nc_2{top: 48%;}
	.nc_2 .vertical{top: -41%;right: -17%;}
	.p5 .vertical{right: 2%}
	.p8{padding-top: 42%;}
	.p9 .col-odd1{padding-left: 0}
	.p10 .vertical{top: 2%;left: 3%;}

	.p12 .headline,
	.p13 .headline{padding-bottom: 126vw;}
	.p12 .left, .p13 .left{background-position: 70% 8%;}
	.p12 .vertical, .p13 .vertical{top: 16%;}

}
@media screen and (max-width: 320px){

}