@charset "utf-8";




/* CSS RESET */

html,body,div,.padder,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,acronym,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,img,object,embed{display:block}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
nav ul,nav li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;width:auto}
q:before,q:after{content:"";}
abbr,acronym {font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
legend{color:#000;}
a,.no-touch a:hover,.no-touch a:visited:hover,a:active,.no-touch a:active:hover{outline:none}
/* a,.no-touch a:hover,.no-touch a:visited:hover,a:visited{text-decoration: none} */
a {outline: none;}

::selection { background: #000; color: #fff; text-shadow: none; }
::-moz-selection { background: #000; color: #fff; text-shadow: none; }
::-webkit-selection { background: #000; color: #fff; text-shadow: none; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


img {
  color: transparent;
  font-size: 0;
  border:none;
  outline:none;
  /* max-width: 100%; */
/*
  For IE.
  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
*/
  -ms-interpolation-mode: bicubic;
}

img.maximg {
  max-width: 100%;
}

ul {
  list-style: none;
}



/* __Body
---------------------------------------------------------------- */

* { -webkit-text-size-adjust:100%; }



html, body {
     height: 100%;
     -webkit-backface-visibility:hidden;
     backface-visibility:hidden;
     background-color: #dedede;
}


body {
	font-family: 'Helvetica W01', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 62.5%; /* Base 10px */
    line-height: 1.6;
    font-weight: 400;
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
    background-color: #899391;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
    -webkit-overflow-scrolling: touch;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
    /* min-width: 1330px; */
    overflow-x: hidden;
}


body:lang(en) {
  font-family: 'Helvetica W01', sans-serif;
}


.win body {
	-webkit-font-feature-settings: 'pkna';
          font-feature-settings: 'pkna';
}


.chrome body {
	font-weight: 400;
}


body.txt-color-change {
}



.js_box {
    width: 100%;
    height: 100%;
}




/* __Fonts
---------------------------------------------------------------- */

@font-face {
  font-family: 'icon';
  src:  url('fonts/icon.eot?l2icxb');
  src:  url('fonts/icon.eot?l2icxb#iefix') format('embedded-opentype'),
    url('fonts/icon.ttf?l2icxb') format('truetype'),
    url('fonts/icon.woff?l2icxb') format('woff'),
    url('fonts/icon.svg?l2icxb#icon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow1-right:before {
  content: "\e900";
}
.icon-arrow2-right:before {
  content: "\e901";
}
.icon-b:before {
  content: "\e902";
}
.icon-c1:before {
  content: "\e903";
}
.icon-arrow1-left:before {
  content: "\e904";
}
.icon-arrow1-down:before {
  content: "\e905";
}
.icon-check:before {
  content: "\e906";
}
.icon-c2:before {
  content: "\e907";
}
.icon-arrow1-up:before {
  content: "\e908";
}
.icon-arrow2-down:before {
  content: "\e909";
}
.icon-arrow2-up:before {
  content: "\e90a";
}
.icon-circle1:before {
  content: "\e90b";
}
.icon-business:before {
  content: "\e90c";
}
.icon-circle2:before {
  content: "\e90d";
}
.icon-arrow2-left:before {
  content: "\e90e";
}
.icon-clock:before {
  content: "\e90f";
}
.icon-close:before {
  content: "\e910";
}
.icon-community:before {
  content: "\e911";
}
.icon-company:before {
  content: "\e912";
}
.icon-f:before {
  content: "\e913";
}
.icon-facebook:before {
  content: "\e914";
}
.icon-file:before {
  content: "\e915";
}
.icon-future:before {
  content: "\e916";
}
.icon-instagram:before {
  content: "\e917";
}
.icon-link:before {
  content: "\e918";
}
.icon-logo-en:before {
  content: "\e919";
}
.icon-logo-jp:before {
  content: "\e91a";
}
.icon-mail:before {
  content: "\e91b";
}
.icon-map1:before {
  content: "\e91c";
}
.icon-map2:before {
  content: "\e91d";
}
.icon-menu:before {
  content: "\e91e";
}
.icon-minus:before {
  content: "\e91f";
}
.icon-multiple:before {
  content: "\e920";
}
.icon-twitter:before {
  content: "\e921";
}
.icon-plus:before {
  content: "\e922";
}


.font span {
	display: none;
}

.font0 {
	font-size: 0;
}





/*__H1 H2 H3 H4 H5 P
----------------------------------------------------------------------*/

/*__H1
------------------------------------*/	

.logo h1,
.home .nav .layer2,
.home .nav .layer1,
.page .title .layer2 {
	font-size: 13vw;
	line-height: 1.0;
	color: #fff;
}


/*__H2
------------------------------------*/	

.home .layer2 h2,
.page .layer2 h2 {
	font-size: 3vw;
	line-height: 1.0;
	color: #fff;
	font-weight: bold;
	margin-top: -0.4em;
	}
	

.home.isIe .layer2 h2,
.page.isIe .layer2 h2 {
	margin-top: -1.0em;
	}
	
	
		
/*__H3
------------------------------------*/

h3 {
	font-size: 1.6vw;
	line-height: 1.4;
}


/*__P
------------------------------------*/

p,
li {
	font-size: 1.4vw;
	line-height: 2.0;
	font-weight: normal;
	font-weight: bold;
	word-wrap:break-word;
	}


/*__P__Custom
------------------------------------*/

.name-wrap p {
	font-size: 2vw;
	line-height: 1;
	font-weight: bold;
	white-space: nowrap;
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	margin-top: 0.3em;
}

.name-wrap p,
.sub-name-wrap p {
	margin-top: 0.3em;
}

.mt-none p {
	margin-top: 0;
}

.read-text p {
	font-size: 2vw;
	line-height: 2.0;
	}	

.sub-name-wrap p {
	font-size: 1.6vw;
	line-height: 1;
	white-space: nowrap;
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.box-text p,
.text p {
	font-size: 1.6vw;
	line-height: 1;
}

.text p {
	line-height: 2.0;
}

.access-title p {
	line-height: 1.4;
	font-weight: bold;
	border-left: 2px solid;
	padding-left: 0.5em;
	}
	
.access-text p {
	font-size: 1.2vw;
	line-height: 1.8;
	}

.quality-title p,
.conservation-title p {
	line-height: 1.4;
	font-weight: bold;
	}

.quality-text p {
	font-size: 1.2vw;
	line-height: 2.0;
	}


/*__span
------------------------------------*/

span.remark {
	font-size: 0.8em;
	line-height: 1.6;
	display: inline-block;
	}

/*__A
------------------------------------*/
a {
	color: #fff;
	text-decoration: underline;
	opacity: 1.0;
	text-underline-position: below;
	-webkit-text-underline-position: left;
	-moz-text-underline-position: left;
	-ms-text-underline-position: left;
	text-underline-position: left;
	}
	
a.noline {
	text-decoration: none;
	}


a.fade {
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease; 
    transition: all 0.3s ease;
}

a:hover {
	text-decoration: none;
	opacity: 0.6;
	}
	
a.current i {
	text-decoration: none;
	border-bottom: 3px solid;
}
	

a.fade:hover img {
	text-decoration: none;
	opacity: 0.6;
	}

a.nofade:hover {
	opacity: 1.0;
	}


/*__A__Custom
------------------------------------*/
.page .nav a {
	font-size: 3vw;
	line-height: 1;
	color: #fff;
	margin-left: 0;
	display: inline-block;
	position: relative;
}

.page .header_right .nav a {
	margin-left: 0.2em;
}


.page .footer .nav a {
	font-size: 2vw;
	line-height: 1.8;
	margin-right: 1em;
}

.page .footer .nav a h1 {
	font-size: 1.0em;
	margin-bottom: 0.5em;
}

.top-control a,
.bottom-control a {
	font-size: 3vw;
	cursor: pointer;
}



/*__Top Control__Bottom Control
----------------------------------------------------------------------*/

.top-control {
	position: fixed;
	bottom: 5%;
	left: 5%;
	z-index: 20;
}

.top-control {
  -webkit-animation: arrowdown 2s infinite;
  animation: arrowdown 2s infinite;
}
@-webkit-keyframes arrowdown {
  0% { -webkit-transform: translate(0, 0);}
  20% { -webkit-transform: translate(0, 10px);}
  40% { -webkit-transform: translate(0, 0);}
}
@keyframes arrowdown {
  0% { transform: translate(0, 0);}
  20% { transform: translate(0, 10px);}
  40% { transform: translate(0, 0);}
}




/*__Wrap
----------------------------------------------------------------------*/

.wrap {
	width: 100%;
	position: relative;
}


/* ----------------------------------------------------------------------
/* __Home
---------------------------------------------------------------------- */


/*__GD
------------------------------------*/

.gd {
	position: fixed;
	top: 3em;
	right: 3em;
	width: 7%;
	z-index: 100;
}

.gd a {
	display: block;
}

.gd a img {
	max-width: 100%;
}



/*__Hero text
------------------------------------*/

.hero-text {
	width: 90%;
	height: 24vw;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 20;
	margin: auto;
}

.logo {
	display: inline-block;
}

.home .nav,
.page .title {
	position: relative;
}

.home .nav a {
	display: block;
	margin-right: 0.1em;
}

.layer1,
.layer2 {
	z-index: 10;
	transition: all 0.3s ease-out;
}

.layer2 {
	opacity: 0;
}

.home .company-link .layer1,
.home .company-link .layer2,
.page-company .layer2 {
	position: absolute;
	top: 0;
	left: 0;
}

.home .business-link .layer1,
.home .business-link .layer2,
.page-business .layer2 {
	position: absolute;
	top: 0;
	left: 0.75em;
}

.home .community-link .layer1,
.home .community-link .layer2,
.page-community .layer2 {
	position: absolute;
	top: 0;
	left: 1.5em;
}

.home .future-link .layer1,
.home .future-link .layer2,
.page-future .layer2 {
	position: absolute;
	top: 0;
	left: 2.25em;
}

.home .layer1 i:after {
	content: '';
	border-bottom: 12px solid;
	width: 100%;
	position: absolute;
	bottom: 6%;
	left: 0;
	animation: flash 0.5s infinite linear;
    -webkit-animation: flash 0.5s infinite linear;
    -moz-animation: flash 0.5s infinite linear;
}

.home .layer-c1 i:after {
	animation: flash 4.8s infinite linear;
    -webkit-animation: flash 4.8s infinite linear;
    -moz-animation: flash 4.8s infinite linear;
}

.home .layer-b i:after {
	animation: flash 3.0s infinite linear;
    -webkit-animation: flash 3.0s infinite linear;
    -moz-animation: flash 3.0s infinite linear;
}

.home .layer-c2 i:after {
	animation: flash 3.6s infinite linear;
    -webkit-animation: flash 3.6s infinite linear;
    -moz-animation: flash 3.6s infinite linear;
}

.home .layer-f i:after {
	animation: flash 4.0s infinite linear;
    -webkit-animation: flash 4.0s infinite linear;
    -moz-animation: flash 4.0s infinite linear;
}
       
@keyframes flash { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }
@-webkit-keyframes flash { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }
@-moz-keyframes flash { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }




/*__Hero image
------------------------------------*/

.hero-image {
	width: 100%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 10;
}


.hero-image a {
  height: 100vh;
  width: 100%;
  z-index: 20;
}


.default-bg,
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: all 0.3s ease-out;
  z-index: 1;
}

.home .default-bg {
  background-image: url('img/w2000/_KYP6951_re.jpg');
  background-image: url('img/w2000/_KYP7168.jpg');
  background-image: url('img/w2000/04_top_04.jpg');
  background-image: url('img/w2000/05_top_06.jpg');
  background-image: url('img/w2000/_KYP6902_re.jpg');
}

.home.portrait-image .default-bg {
  background-image: url('img/w2000/_KYP6951_re_p.jpg');
  background-image: url('img/w2000/_KYP7168_p.jpg');
  background-image: url('img/w2000/04_top_04_p.jpg');
  background-image: url('img/w2000/05_top_06_p.jpg');
  background-image: url('img/w2000/_KYP6902_re_p.jpg');
}

.bg {
	z-index: 2;
	opacity: 0;
}

.bg.bg-show {
  opacity: 1;
}

.bg-show a:hover {
  z-index: 2;
}


.bg-overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.2);
	z-index: 3;
}

.bg-overlay-link {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 1;
}





/* ----------------------------------------------------------------------
/* __Page
---------------------------------------------------------------------- */

/*__Nav
------------------------------------*/

.page .header_right {
	position: fixed;
	top: 5%;
	right: 4%;
	z-index: 200;
}

.page .header_left {
	position: fixed;
	top: 5%;
	left: 4%;
	z-index: 200;
}

.page .nav {
	display: inline-block;
}

a.nav-home {
	padding-right: 0.4em;
}

a.nav-home:after {
	position: absolute;
	top: 0;
	right: 0;
	content: "";
	height: 80%;
	width: 4px;
	/* background-color: #fff; */
}

.header .nav_1 {
	display: none;
	opacity: 0;
}

.header.sticky .nav_1 {
	display: inline-block;
	opacity: 1;
    animation-duration: 0.5s;
    animation-name: fade-in;
    -moz-animation-duration: 0.5s;
    -moz-animation-name: fade-in;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: fade-in;
}

@keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }
      1% {
        display: block;
        opacity: 0;
      }
      100% {
        display: block;
        opacity: 1;
      }
    }
    @-moz-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }
      1% {
        display: block;
        opacity: 0;
      }
      100% {
        display: block;
        opacity: 1;
      }
    }
    @-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }
      1% {
        display: block;
        opacity: 0;
      }
      100% {
        display: block;
        opacity: 1;
      }
    }
    

/*__Hero text
------------------------------------*/

.page .layer2 {
	opacity: 1;
}

.hero-text .title {
	position: relative;
}

.hero-text .title p {
	position: absolute;
	bottom: -1em;
	left: 0.2em;
}


/*__Hero image
------------------------------------*/

.page .bg {
  opacity: 1;
}

.page-company .bg { background-image: url('img/w2000/_KYP6951_re.jpg'); }
.page-business .bg { background-image: url('img/w2000/_KYP7168.jpg'); }
.page-community .bg { background-image: url('img/w2000/04_top_04.jpg'); }
.page-future .bg { background-image: url('img/w2000/05_top_06.jpg'); }

.portrait-image.page-company .bg { background-image: url('img/w2000/_KYP6951_re_p.jpg'); }
.portrait-image.page-business .bg { background-image: url('img/w2000/_KYP7168_p.jpg'); }
.portrait-image.page-community .bg { background-image: url('img/w2000/04_top_04_p.jpg'); }
.portrait-image.page-future .bg { background-image: url('img/w2000/05_top_06_p.jpg'); }




/*__Container
------------------------------------*/

.container {
	position: relative;
	position: absolute;
	z-index: 100;
	width: 100%;
	background-color: #fff;
}

.page-company .container { background-color: #899391; }
.page-business .container { background-color: #9b9894; }
.page-community .container { background-color: #6c8f9f; }
.page-future .container { background-color: #4593ba; }



/* __Section
------------------------------------*/

.section,
.sub-section {
	width: 100%;
	margin: auto;
	margin-top: 20em;
	position: relative;
}

.section:first-of-type {
	margin-top: 15em;
}


/* __Wrap
------------------------------------*/

.full-wrap {
	position: relative;
	width: 75%;
	margin: auto;
}

.sub-full-wrap {
	padding-left: 7%;
}

#department .sub-full-wrap,
#activity .sub-full-wrap {
	width: 94%;
}

#project .sub-full-wrap {
	margin-top: 2em;
}

#project .sub-full-wrap:first-of-type {
	margin-top: 0;
}


.name-wrap {
	position: absolute;
	top: 0;
	left: 5%;
}

.sub-name-wrap {
	position: absolute;
	top: 0;
	left: 0;
}


.read-text.pc {
	display: block;
}

.read-text.mobile {
	display: none;
}


/* __Col
------------------------------------*/

.col-1 {
	width: 100%;
	position: relative;
}

/* __Slider
------------------------------------*/

.slider,
.slider2 {
	width: 100%;
	margin-top: 10em;
}




/* __Page__Company
------------------------------------*/

.list {
	font-size: 0;
  } 

p.list-left {
	display: inline-block;
	width: 13%;
	margin-right: 2%;
	vertical-align: top;
}

p.list-right {
	display: inline-block;
	width: 85%;
	vertical-align: top;
}

.map-wrap {
	height: 50vw;
}

#map-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.gm-style-pbc {
	transition: opacity ease-in-out;
	background-color: rgba(0,0,0,0) !important;
	text-align: center;
}



#access .col-3 {
	display: inline-block;
	vertical-align: top;
	width: 33.3333%;
	margin-top: 2em;
	padding-right: 3%;
}

.access-title {
	margin-bottom: 6%;
}



/* __Page__Business
------------------------------------*/

#service .col-1,
#management .col-1,
#project .col-1 {
	margin-top: 6em;
}

#department .col-1,
#activity .col-1 {
	margin-top: 2em;
}

.box-text {
	display: inline-block;
	vertical-align: top;
	margin: 0 1.5em 1.5em 0;
}

#management .box-text,
#project .box-text {
	width: 100%;
	display: block;
	vertical-align: top;
}

.box-text p {
	padding: 0.5em;
	display: inline-block;
	vertical-align: top;
	border: 3px solid;
}

.project-position.box-text p {
	background-color: #fff;
	color: #4593ba;
	border: 3px solid #fff;
}

#management .box-text p,
#project .box-text p {
	padding: 0.5em;
	display: block;
	text-align: center;
}

#service .col-2,
#management .col-2,
#conservation .col-2 {
	width: 48.5%;
	display: inline-block;
	vertical-align: top;
	margin-right: 3%;
}

#conservation .col-2 {
	margin-top: 3em;
}

#service .col-2:nth-of-type(even),
#management .col-2:nth-of-type(even),
#conservation .col-2:nth-of-type(even) {
	margin-right: 0;
}


.quality-title,
.quality-image {
	width: 47%;
	display: inline-block;
	vertical-align: top;
	margin-right: 6%;
}

.quality-title {
	margin-right: 0;
}

.quality-text {
	margin-top: 4em;
}



/* __Slider
------------------------------------*/

.slider .col-slider {
	width: 100%;
	display: inline-block;
	padding: 0 1%;
}


.bg-image {
	height: 0;
    padding-top: 66.6666%; /* 2:3 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.department-01-slider .image-01 { background-image: url('img/w1000/_KYP7506.jpg'); }
.department-01-slider .image-02 { background-image: url('img/w1000/_KYP7524_re.jpg'); }
.department-01-slider .image-03 { background-image: url('img/w1000/_KYP6516.jpg'); }

.department-02-slider .image-01 { background-image: url('img/w1000/_KYP6557_re.jpg'); }
.department-02-slider .image-02 { background-image: url('img/w1000/_KYP6634_re.jpg'); }
.department-02-slider .image-03 { background-image: url('img/w1000/_KYP6844.jpg'); }
.department-02-slider .image-04 { background-image: url('img/w1000/_KYP6889.jpg'); }
.department-02-slider .image-05 { background-image: url('img/w1000/_KYP6568.jpg'); }
.department-02-slider .image-06 { background-image: url('img/w1000/_KYP6677.jpg'); }
.department-02-slider .image-06 { background-image: url('img/w1000/_KYP7588.jpg'); }

.department-03-slider .image-01 { background-image: url('img/w1000/_KYP7255.jpg'); }
.department-03-slider .image-02 { background-image: url('img/w1000/_KYP7268.jpg'); }
.department-03-slider .image-03 { background-image: url('img/w1000/_KYP7274.jpg'); }
.department-03-slider .image-04 { background-image: url('img/w1000/_KYP7395.jpg'); }
.department-03-slider .image-05 { background-image: url('img/w1000/_KYP7302.jpg'); }

.department-04-slider .image-01 { background-image: url('img/w1000/_KYP7704.jpg'); }
.department-04-slider .image-02 { background-image: url('img/w1000/_KYP7163.jpg'); }
.department-04-slider .image-03 { background-image: url('img/w1000/_KYP7111.jpg'); }



/* __Page__Community
------------------------------------*/

.management-title {
	margin-right: 0;
}

.management-text {
	margin-top: 2em;
}

.conservation-title {
	margin-top: 0.5em;
}

.conservation-01-slider .image-01 { background-image: url('img/04_community/01_activities/01_activities_01.jpg'); }
.conservation-01-slider .image-02 { background-image: url('img/04_community/01_activities/01_activities_02.jpg'); }
.conservation-01-slider .image-03 { background-image: url('img/04_community/01_activities/01_activities_03.jpg'); }
.conservation-01-slider .image-04 { background-image: url('img/04_community/01_activities/01_activities_04.jpg'); }
.conservation-01-slider .image-05 { background-image: url('img/04_community/01_activities/01_activities_05.jpg'); }
.conservation-01-slider .image-06 { background-image: url('img/04_community/01_activities/01_activities_06.jpg'); }

.activity-01-slider .image-01 { background-image: url('img/04_community/02_activities/02_activities_01.jpg'); }
.activity-01-slider .image-02 { background-image: url('img/04_community/02_activities/02_activities_02.jpg'); }
.activity-01-slider .image-03 { background-image: url('img/04_community/02_activities/02_activities_03.jpg'); }
.activity-01-slider .image-04 { background-image: url('img/04_community/02_activities/02_activities_04.jpg'); }
.activity-01-slider .image-05 { background-image: url('img/04_community/02_activities/02_activities_05.jpg'); }

.activity-02-slider .image-01 { background-image: url('img/04_community/03_activities/03_activities_01.jpg'); }
.activity-02-slider .image-02 { background-image: url('img/04_community/03_activities/03_activities_02.jpg'); }
.activity-02-slider .image-03 { background-image: url('img/04_community/03_activities/03_activities_03.jpg'); }
.activity-02-slider .image-04 { background-image: url('img/04_community/03_activities/03_activities_04.jpg'); }
.activity-02-slider .image-05 { background-image: url('img/04_community/03_activities/03_activities_05.jpg'); }
.activity-02-slider .image-06 { background-image: url('img/04_community/03_activities/03_activities_06.jpg'); }

.activity-03-slider .image-01 { background-image: url('img/04_community/04_activities/04_activities_01.jpg'); }
.activity-03-slider .image-02 { background-image: url('img/04_community/04_activities/04_activities_02.jpg'); }
.activity-03-slider .image-03 { background-image: url('img/04_community/04_activities/04_activities_03.jpg'); }
.activity-03-slider .image-04 { background-image: url('img/04_community/04_activities/04_activities_04.jpg'); }
.activity-03-slider .image-05 { background-image: url('img/04_community/04_activities/04_activities_05.jpg'); }


.ayase-wrap {
	margin-top: 2em;
}

.ayase-img {
	display: inline-block;
	vertical-align: middle;
	width: 10%;
	margin-right: 2%;
}

.ayase-img img {
	max-width: 100%;
}

.ayase-remark {
	display: inline-block;
	vertical-align: middle;
	width: 60%;
}



/* __Page__Future
------------------------------------*/

#project .col-3 {
	width: 31.3333%;
	display: inline-block;
	vertical-align: top;
	margin-right: 3%;
}

#project .col-3:last-of-type { /* 3つおきに選択 */
	margin-right: 0;
}


.project-01-slider .image-01 { background-image: url('img/05_future/01_projects/01_projects_09.jpg'); }
.project-01-slider .image-02 { background-image: url('img/05_future/01_projects/01_projects_08.jpg'); }
.project-01-slider .image-03 { background-image: url('img/05_future/01_projects/01_projects_06.jpg'); }
.project-01-slider .image-04 { background-image: url('img/05_future/01_projects/01_projects_01.jpg'); }
.project-01-slider .image-05 { background-image: url('img/05_future/01_projects/01_projects_02.jpg'); }
.project-01-slider .image-06 { background-image: url('img/05_future/01_projects/01_projects_04.jpg'); }


.project-02-slider .image-01 { background-image: url('img/05_future/02_projects/02_projects_01.jpg'); }
.project-02-slider .image-02 { background-image: url('img/05_future/02_projects/02_projects_02.jpg'); }
.project-02-slider .image-03 { background-image: url('img/05_future/02_projects/02_projects_03.jpg'); }
.project-02-slider .image-04 { background-image: url('img/05_future/02_projects/02_projects_04.jpg'); }


.partner-wrap {
	text-align: right;
}


.partner-left {
	display: inline-block;
	vertical-align: middle;
	margin-right: 2%;
}

.partner-right {
	width: 150px;
	display: inline-block;
	vertical-align: middle;
}

.partner-right img {
	width: 150px;
	opacity: 1.0;
}

.partner-right a {
	display: block;
}


/* ----------------------------------------------------------------------
Footer
---------------------------------------------------------------------- */

.footer {
	width: 100%;
	margin: 20% auto 1% auto;
	position: relative;
}

.bottom-control {
	position: absolute;
	top: -0.7em;
	left: 5%;
}


.footer .nav_1,
.footer .nav_3 {
	display: block;
}

.footer .nav_3 {
	margin-top: 5%;
}






/* ----------------------------------------------------------------------
__Effect
---------------------------------------------------------------------- */


/* __Slick Arrows
------------------------------------*/

.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 200;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: .25;
}

.slick-prev:before,
.slick-next:before {
    font-family: 'icon';
    font-size: 40px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: 25px;
}

[dir='rtl'] .slick-prev {
    right: 25px;
    left: auto;
}

.slick-prev:before {
    content: '\e90e';
}

[dir='rtl'] .slick-prev:before {
    content: '\e901';
}

.slick-next {
    right: 25px;
}

[dir='rtl'] .slick-next {
    right: auto;
    left: 25px;
}

.slick-next:before {
    content: '\e901';
}

[dir='rtl'] .slick-next:before {
    content: '\e90e';
}



/* __Line
------------------------------------*/

hr {
	height: 0px;
	margin: 0;
	padding: 0;
	border: none;
}

hr.line {
	margin: 8% 0 0 0;
	width: 100%;
	border-top: 2px solid;
}

hr.line-bottom {
	margin: 7% 0 0 0;
}

hr.event-line {
	margin: 3% 0;
	color: #bbbbbb;
}



/* __Animate
------------------------------------*/

.fix-header-show {
	opacity: 0;
  }
  
.fix-header-hide {
	opacity: 1;
  }
  
.animate img.ani-img {
	position: relative;
	opacity: 0;
	bottom: 40px;
  }

.animate p {
	position: relative;
	opacity: 0;
	bottom: 60px;
  }
  
.animate-left p {
	position: relative;
	opacity: 0;
	left: -60px;
  }

.animate .ani-title {
	position: relative;
	opacity: 0;
	bottom: 20px;
  } 
  
.ani-footer-col {
	position: relative;
	opacity: 0;
	top: 40px;
  } 







/* ----------------------------------------------------------------------
Media Queries
---------------------------------------------------------------------- */





@media (max-width: 1280px) {

}	







/* Tablet (Landscape) yoko
---------------------------------------------------------------------- */
@media (max-width: 1024px) {

/*__H1 H2 H3 H4 H5 P
----------------------------------------------------------------------*/

/*__H1
------------------------------------*/	
.logo h1,
.home .nav .layer2,
.home .nav .layer1,
.page .title .layer2 {
	font-size: 13.5vw;
	line-height: 1.0;
}

/*__H2
------------------------------------*/	
.home .layer2 h2,
.page .layer2 h2 {
	font-size: 3.3vw;
	margin-top: -0.45em;
	}
	
		
/*__H3
------------------------------------*/
h3 {
	font-size: 1.76vw;
	line-height: 1.4;
}


/*__P
------------------------------------*/
p,
li {
	font-size: 1.54vw;
	line-height: 2.0;
	}


/*__P__Custom
------------------------------------*/
.name-wrap p {
	font-size: 2.1vw;
}

.name-wrap p,
.sub-name-wrap p {
	margin-top: 0.4em;
}

.mt-none p {
	margin-top: 0;
}

.read-text p {
	font-size: 2.1vw;
	line-height: 2.0;
	}	

.sub-name-wrap p {
	font-size: 1.76vw;
	line-height: 1;
}

.box-text p,
.text p {
	font-size: 1.76vw;
}
	
.access-text p {
	font-size: 1.2vw;
	line-height: 1.8;
	}

.quality-text p {
	font-size: 1.32vw;
	line-height: 2.0;
	}


/*__A__Custom
------------------------------------*/
.page .nav a {
	font-size: 3.3vw;
	line-height: 1;
}

.page .header_right .nav a {
	margin-left: 0.5em;
}

.page .footer .nav a {
	font-size: 2.1vw;
	line-height: 1.8;
	margin-right: 1em;
}

.page .footer .nav a h1 {
	font-size: 1.0em;
	margin-bottom: 0.6em;
}

.top-control a,
.bottom-control a {
	font-size: 3.3vw;
}


/* __Page__Company
------------------------------------*/

p.list-left {
	width: 16%;
	margin-right: 2%;
}

p.list-right {
	width: 82%;
}


/* __Page__Future
------------------------------------*/

.partner-right,
.partner-right img {
	width: 120px;
}


/*__span
------------------------------------*/

span.remark {
	font-size: 0.85em;
	}
	
	

}	







/* Tablet (Portrait) tate
---------------------------------------------------------------------- */
@media (max-width: 768px) and (orientation: portrait) {

/*__H1 H2 H3 H4 H5 P
----------------------------------------------------------------------*/

/*__H1
------------------------------------*/	
.logo h1,
.home .nav .layer2,
.home .nav .layer1,
.page .title .layer2 {
	font-size: 14vw;
	line-height: 1.0;
}

/*__H2
------------------------------------*/	
.home .layer2 h2,
.page .layer2 h2 {
	font-size: 3.9vw;
	margin-top: -0.2em;
	}
	
		
/*__H3
------------------------------------*/
h3 {
	font-size: 2.08vw;
	line-height: 1.4;
}


/*__P
------------------------------------*/
p,
li {
	font-size: 1.82vw;
	line-height: 2.0;
	}


/*__P__Custom
------------------------------------*/
.name-wrap p {
	font-size: 2.8vw;
}

.name-wrap p,
.sub-name-wrap p {
	margin-top: 0.4em;
}

.mt-none p {
	margin-top: 0;
}

.read-text p {
	font-size: 2.2vw;
	line-height: 2.0;
	}	

.sub-name-wrap p {
	font-size: 2.4vw;
	line-height: 1;
}

.box-text p,
.text p {
	font-size: 1.82vw;
}
	
.access-text p {
	font-size: 1.44vw;
	line-height: 1.8;
	}

.quality-text p {
	font-size: 1.56vw;
	line-height: 2.0;
	}


/*__A__Custom
------------------------------------*/
.page .nav a,
.top-control a,
.bottom-control a {
	font-size: 4.5vw;
}

.page .header_right .nav a {
	margin-left: 0.5em;
}

.page .footer .nav a {
	font-size: 3.0vw;
	line-height: 1.8;
	margin-right: 1em;
}

.page .footer .nav a h1 {
	font-size: 1.0em;
	margin-bottom: 0.6em;
}


/* ----------------------------------------------------------------------
/* __Home
---------------------------------------------------------------------- */

/*__GD
------------------------------------*/

.gd {
	top: 3em;
	right: 3em;
	width: 12%;
}

/*__Hero text
------------------------------------*/

.hero-text {
	width: 90%;
	height: auto;
	display: table;
}

.logo {
	display: block;
}

.home .layer1 {
	opacity: 0 !important;
	display: none !important;
}

.home .layer2 {
	opacity: 1 !important;
}

.home .layer2 h2 {
	display: none !important;
}

.home .company-link .layer1,
.home .company-link .layer2,
.page-company .layer2,
.home .business-link .layer1,
.home .business-link .layer2,
.page-business .layer2,
.home .community-link .layer1,
.home .community-link .layer2,
.page-community .layer2,
.home .future-link .layer1,
.home .future-link .layer2,
.page-future .layer2 {
	position: relative;
	top: auto;
	left: auto;
}


/* ----------------------------------------------------------------------
/* __Page
---------------------------------------------------------------------- */

/*__Nav
------------------------------------*/

.page .header_right {
	top: 4%;
	right: 3%;
}

.page .header_left {
	top: 4%;
	left: 3%;
}


/* __Page__Company
------------------------------------*/

p.list-left {
	width: 18%;
	margin-right: 2%;
}

p.list-right {
	width: 80%;
}


/* __Page__Community
------------------------------------*/


/* __Page__Future
------------------------------------*/

.partner-right,
.partner-right img {
	width: 100px;
}





}	







/* Mobile (Landscape) yoko
---------------------------------------------------------------------- */
@media (max-width: 768px) and (orientation: landscape) {

/*__H1 H2 H3 H4 H5 P
----------------------------------------------------------------------*/

/*__H1
------------------------------------*/	
.logo h1,
.home .nav .layer2,
.home .nav .layer1,
.page .title .layer2 {
	font-size: 13vw;
	line-height: 1.0;
}

/*__H2
------------------------------------*/	
.home .layer2 h2,
.page .layer2 h2 {
	font-size: 3.3vw;
	margin-top: 0;
	}
	
		
/*__H3
------------------------------------*/
h3 {
	font-size: 2.08vw;
	line-height: 1.4;
}


/*__P
------------------------------------*/
p,
li {
	font-size: 1.82vw;
	line-height: 2.0;
	}


/*__P__Custom
------------------------------------*/
.name-wrap p {
	font-size: 2.8vw;
}

.name-wrap p,
.sub-name-wrap p {
	margin-top: 0.4em;
}

.mt-none p {
	margin-top: 0;
}

.read-text p {
	font-size: 2.1vw;
	line-height: 2.0;
	}	

.sub-name-wrap p {
	font-size: 2.4vw;
	line-height: 1;
}

.box-text p,
.text p {
	font-size: 1.82vw;
}
	
.access-text p {
	font-size: 1.44vw;
	line-height: 1.8;
	}

.quality-text p {
	font-size: 1.56vw;
	line-height: 1.8;
	}


/*__A__Custom
------------------------------------*/
.page .nav a,
.top-control a,
.bottom-control a {
	font-size: 4.5vw;
}

.page .header_right .nav a {
	margin-left: 0.5em;
}

.page .footer .nav a {
	font-size: 3.0vw;
	line-height: 1.8;
	margin-right: 1em;
}

.page .footer .nav a h1 {
	font-size: 1.0em;
	margin-bottom: 0.6em;
}


/* ----------------------------------------------------------------------
/* __Home
---------------------------------------------------------------------- */

/*__GD
------------------------------------*/

.gd {
	top: 2em;
	right: 2em;
	width: 8%;
}

/*__Hero Text
------------------------------------*/

.home .layer1 i:after {
	border-bottom: 8px solid;
	bottom: 5%;
}



/* ----------------------------------------------------------------------
/* __Page
---------------------------------------------------------------------- */

/*__Nav
------------------------------------*/

.page .header_right {
	top: 4%;
	right: 3%;
}

.page .header_left {
	top: 4%;
	left: 3%;
}

/* __Section
------------------------------------*/

.section,
.sub-section {
	margin-top: 15em;
}

.section:first-of-type {
	margin-top: 10em;
}


/* __Page__Company
------------------------------------*/

p.list-left {
	width: 18%;
	margin-right: 2%;
}

p.list-right {
	width: 80%;
}

#access .col-3 {
	width: 100%;
	margin-top: 2em;
	padding-right: 0;
	border-bottom: 1px dotted;
}

#access .col-3:last-of-type {
	border-bottom: none;
}

.access-title {
	display: inline-block;
	vertical-align: top;
	padding-right: 2em;
	width: 33%;
}

.access-text-1 {
	display: inline-block;
	vertical-align: top;
	padding-right: 2em;
	width: 40%;
}

.access-text-2 {
	display: inline-block;
	vertical-align: top;
	width: 27%;
}



/* __Page__Business
------------------------------------*/

.box-text p {
	padding: 0.7em 0.5em;
	border: 2px solid;
}

/* __Page__Community
------------------------------------*/



/* __Page__Future
------------------------------------*/

.partner-right,
.partner-right img {
	width: 100px;
}



/* __Line
------------------------------------*/

hr.line {
	border-top: 1px solid;
}




}	







/* Mobile (Landscape) yoko
---------------------------------------------------------------------- */
@media (max-width: 600px) {
	
}







/* Mobile (Portrait) tate
---------------------------------------------------------------------- */
@media (max-width: 480px) {

/*__H1 H2 H3 H4 H5 P
----------------------------------------------------------------------*/

/*__H1
------------------------------------*/	
.logo h1,
.home .nav .layer2,
.home .nav .layer1,
.page .title .layer2 {
	font-size: 16vw;
	line-height: 1.1;
}

/*__H2
------------------------------------*/	
.home .layer2 h2,
.page .layer2 h2 {
	font-size: 5.4vw;
	margin-top: 0;
	}
	
		
/*__H3
------------------------------------*/
h3 {
	font-size: 3.2vw;
	line-height: 1.4;
}


/*__P
------------------------------------*/
p,
li,
.box-text p,
.text p,
.access-text p,
.quality-text p {
	font-size: 3.2vw;
	line-height: 1.8;
	}


/*__P__Custom
------------------------------------*/
.name-wrap p {
	font-size: 4.5vw;
}

.name-wrap p,
.sub-name-wrap p {
	margin-top: 0.4em;
}

.mt-none p {
	margin-top: 0;
}

.read-text p {
	font-size: 3.8vw;
	line-height: 2.0;
	}	
  
.sub-name-wrap p {
	font-size: 4.0vw;
	line-height: 1;
}


/*__A__Custom
------------------------------------*/
.page .nav a,
.top-control a,
.bottom-control a {
	font-size: 7.5vw;
}

.page .header_right .nav a {
	margin-left: 0.5em;
}

.page .footer .nav a {
	font-size: 6vw;
	line-height: 1.8;
	margin-right: 1em;
	display: block;
}

.page .footer .nav a h1 {
	font-size: 1.0em;
	margin-bottom: 1.0em;
}


a.current i {
	border-bottom: 2px solid;
}


/* ----------------------------------------------------------------------
/* __Home
---------------------------------------------------------------------- */

/*__GD
------------------------------------*/

.gd {
	top: 2em;
	right: 2em;
	width: 16%;
}



/* ----------------------------------------------------------------------
/* __Page
---------------------------------------------------------------------- */

/* __Wrap
------------------------------------*/

.full-wrap {
	width: 84%;
	margin: 0 3% 0 13%;
}

.name-wrap {
	left: 4.5%;
}

/*__Nav
------------------------------------*/

.page .header_right {
	top: 3%;
	right: 3%;
}

.page .header_left {
	top: 3%;
	left: 3%;
}

/* __Section
------------------------------------*/

.section,
.sub-section {
	margin-top: 10em;
}

.section:first-of-type {
	margin-top: 7.5em;
}


.read-text.pc {
	display: none;
}

.read-text.mobile {
	display: block;
}


/* __Slider
------------------------------------*/

.slider,
.slider2 {
	margin-top: 6em;
}


.slider .col-slider {
	padding: 0 2%;
}


/* __Page__Company
------------------------------------*/

p.list-left {
	width: 28%;
	margin-right: 2%;
}

p.list-right {
	width: 70%;
}

.map-wrap {
	height: 100vw;
}


#access .col-3 {
	width: 100%;
	margin-top: 2em;
	padding-right: 0;
	border-bottom: 1px dotted;
	padding-bottom: 2em;
}

#access .col-3:last-of-type {
	border-bottom: none;
}

.access-title {
	display: inline-block;
	vertical-align: top;
	padding-right: 0;
	width: 100%;
}

.access-text-1 {
	display: inline-block;
	vertical-align: top;
	padding-right: 0;
	width: 100%;
}

.access-text-2 {
	display: inline-block;
	vertical-align: top;
	width: 100%;
}



/* __Page__Business
------------------------------------*/

#service .col-1,
#management .col-1,
#management .col-2,
#project .col-1 {
	margin-top: 4em;
}


#management .col-2:first-of-type {
	margin-top: 0;
}

#service .col-2,
#management .col-2,
#conservation .col-2 {
	width: 100%;
	margin-right: 0;
}

.col-2.col-quality:last-of-type {
	border-top: 1px dotted;
	margin-top: 3em;
	padding-top: 3em;
}


#department .sub-full-wrap,
#activity .sub-full-wrap {
	width: 100%;
}


.sub-full-wrap {
	padding-left: 10%;
}

.box-text {
	margin: 0 1.0em 1.0em 0;
}

.box-text p {
	padding: 0.6em !important;
	border: 1px solid;
}


.quality-image {
	width: 35%;
	margin-right: 5%;
}

.quality-title {
	width: 60%;
}

.quality-text {
	margin-top: 2em;
}


/* __Page__Community
------------------------------------*/

.management-text {
	margin-top: 1em;
}

.ayase-wrap {
	margin-top: 2em;
}

.ayase-img {
	width: 20%;
	margin-right: 4%;
}

.ayase-remark {
	width: 76%;
}


/* __Page__Future
------------------------------------*/

#project .col-3 {
	width: 100%;
	margin-right: 0;
}

#project .sub-full-wrap {
	margin-top: 1em;
}

.partner-right,
.partner-right img {
	width: 100px;
}


.partner-right,
.partner-left {
	display: block;
	margin-right: 0;
	margin-left: auto;
}



/* ----------------------------------------------------------------------
Footer
---------------------------------------------------------------------- */

.footer {
	margin: 30% auto 3% auto;
}

.bottom-control {
	left: 3%;
	top: -0.5em;
}

.footer .nav_3 {
	margin-top: 10%;
}





/* ----------------------------------------------------------------------
__Effect
---------------------------------------------------------------------- */


/* __Slick Arrows
------------------------------------*/

.slick-prev,
.slick-next {
    width: 7.5vw;
    height: 7.5vw;
}

.slick-prev:before,
.slick-next:before {
    font-size: 7.5vw;
}

.slick-prev {
    left: 3%;
}

[dir='rtl'] .slick-prev {
    right: 3%;
    left: auto;
}

.slick-next {
    right: 3%;
}

[dir='rtl'] .slick-next {
    right: auto;
    left: 3%;
}






/* __Line
------------------------------------*/

hr.line {
	border-top: 1px solid;
}



}	







	
/* Mobile small (Portrait) tate
---------------------------------------------------------------------- */
@media (max-width: 320px) {

}	




	
	


/* __Loading indicator
---------------------------------------------------------------- */

.loading-wrap {
    width: 100%;
	height: 100%;
	background:  #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}


.home .loading-wrap { background-color: #635a4b; }
.page-company .loading-wrap { background-color: #899391; }
.page-business .loading-wrap { background-color: #9b9894; }
.page-community .loading-wrap { background-color: #6c8f9f; }
.page-future .loading-wrap { background-color: #4593ba; }



.loading-img {
  border: 2px solid rgba(0, 0, 0, 0.8);
  border-top: 2px solid rgba(255, 255, 255, 1);
  border-radius: 100%;
  height: 40px;
  width: 40px;
  -webkit-animation: loading-rotate .8s infinite linear;
  animation: loading-rotate .8s infinite linear;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  z-index: 99999;
 }
 
.home .loading-img {
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-top: 2px solid rgba(99, 90, 75, 1);
}
.page-company .loading-img {
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-top: 2px solid rgba(137, 147, 145, 1);
}
.page-business .loading-img {
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-top: 2px solid rgba(155, 152, 148, 1);
}
.page-community .loading-img {
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-top: 2px solid rgba(108, 143, 159, 1);
}
.page-future .loading-img {
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-top: 2px solid rgba(69, 147, 186, 1);
}

 .loading-img {
  border: 2px solid rgba(0, 0, 0, 0.8);
  border-top: 2px solid rgba(255, 255, 255, 1);
  border-radius: 100%;
  height: 40px;
  width: 40px;
  -webkit-animation: loading-rotate .8s infinite linear;
  animation: loading-rotate .8s infinite linear;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  z-index: 99999;
 }

@-webkit-keyframes loading-rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }

@keyframes loading-rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }





/* __Clearing
--------------------------------------------------------------------- */

.hidden {
	opacity: 0;
	}

.cf:before,
.cf:after {
    content: " ";
    display: table;
	}
.cf:after {
    clear: both;
	}

/* For IE 6/7 (trigger hasLayout) */
.cf { *zoom: 1; }