/* Forsythia.jp TOPPAGE FadeIn/Out slideshow[3images]
* 
* Multiple bgIMG animation
* by https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
* 
*/

/******************************
***** multi bgIMG Animation ****
*******************************/
.cb-slideshow{/*ul  constraint to .container overwritten below*/
list-style:none;
position: absolute;/*constraint to .container(which is overwritten below)*/
top: 0;
left: 0;
width:100%;
height:100%;
overflow:hidden;
}
.cb-slideshow:after {/*shrinkwrap bgimages*/
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
}
.cb-slideshow li div.bgg {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 18s linear infinite 0s;
    -moz-animation: imageAnimation 18s linear infinite 0s;
    -o-animation: imageAnimation 18s linear infinite 0s;
    -ms-animation: imageAnimation 18s linear infinite 0s;
    animation: imageAnimation 18s linear infinite 0s; 
}

/*.cb-slideshow li div.bgg img {default=window is portrait imgSrcTMP
position: absolute;
width:auto;
min-width:100%;
height:100%;
min-height:100%;
top:0;
bottom:0;
left:auto;
right:auto;
opacity: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 18s linear infinite 0s;
    -moz-animation: imageAnimation 18s linear infinite 0s;
    -o-animation: imageAnimation 18s linear infinite 0s;
    -ms-animation: imageAnimation 18s linear infinite 0s;
    animation: imageAnimation 18s linear infinite 0s; 
}*/
/*@media (orientation:landscape) {
.cb-slideshow li div.bgg img { overwrite
width:100%; <--auto@initial
height:auto;<--100%@initial
top:auto;<--0@initial
bottom:auto;/*<--0@initial
left:0;<--auto@initial
right:0;<--auto@initial
}
}/orientation:landscape */

.cb-slideshow li:nth-child(1) div.bgg { /*1st img*/
background: url(../img/top01.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.cb-slideshow li:nth-child(2) div.bgg { /*2nd img*/
background: url(../img/top02.jpg) no-repeat center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div.bgg { /*3rd img*/
background: url(../img/top03.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}

.lte-ie9 .cb-slideshow li div.bgg {/*fallback for ie9*/
opacity: 1;/* shows the last(3rd)background-image w/o animation*/
}
.cb-slideshow li div.bgg.print { /*4th for @print */
display:none;/*hide by default*/
}


/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    16% { opacity: 1; /*6img=8%*/
         -webkit-animation-timing-function: ease-out; }
    34% { opacity: 1; /*6img=17%*/  }
    50% { opacity: 0; /*6img=25%*/ }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    16% { opacity: 1;/*6img=8%*/
         -moz-animation-timing-function: ease-out; }
    34% { opacity: 1; /*6img=17%*/  }
    50% { opacity: 0; /*6img=25%*/ }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    16% { opacity: 1;/*6img=8%*/
         -o-animation-timing-function: ease-out; }
    34% { opacity: 1; /*6img=17%*/}
    50% { opacity: 0; /*6img=25%*/ }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    16% { opacity: 1;/*6img=8%*/
         -ms-animation-timing-function: ease-out; }
    34% { opacity: 1; /*6img=17%*/ }
    50% { opacity: 0; /*6img=25%*/ }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    16% { opacity: 1;/*6img=8%*/
         animation-timing-function: ease-out; }
    34% { opacity: 1;/*6img=17%*/ }
    50% { opacity: 0; /*6img=25%*/ }
    100% { opacity: 0 }
}
/* Animation for the title - default for modernBrowser - colorChangeAnim w/fill */
@-webkit-keyframes titleAnimation { 
    0% { color: #fff; fill: #fff; }
    18% { color: #4b4b4b; fill: #4b4b4b; /*<--16%*/ }
    38% { color: #4b4b4b; fill: #4b4b4b; /*<--34%*/}
    50% { color: #fff; fill: #fff;}
    100% { color: #fff; fill: #fff; }
}
@-moz-keyframes titleAnimation { 
    0% { color: #fff; fill: #fff; }
    18% { color: #4b4b4b; fill: #4b4b4b; /*<--16%*/ }
    38% { color: #4b4b4b; fill: #4b4b4b; /*<--34%*/}
    50% { color: #fff; fill: #fff;}
    100% { color: #fff; fill: #fff; }
}
@-o-keyframes titleAnimation { 
    0% { color: #fff; fill: #fff; }
    18% { color: #4b4b4b; fill: #4b4b4b; /*<--16%*/ }
    38% { color: #4b4b4b; fill: #4b4b4b; /*<--34%*/}
    50% { color: #fff; fill: #fff;}
    100% { color: #fff; fill: #fff; }
}
@-ms-keyframes titleAnimation { 
    0% { color: #fff; fill: #fff; }
    18% { color: #4b4b4b; fill: #4b4b4b; /*<--16%*/ }
    38% { color: #4b4b4b; fill: #4b4b4b; /*<--34%*/}
    50% { color: #fff; fill: #fff;}
    100% { color: #fff; fill: #fff; }
}
@keyframes titleAnimation { 
    0% { color: #fff; fill: #fff; }
    18% { color: #4b4b4b; fill: #4b4b4b; /*<--16%*/ }
    38% { color: #4b4b4b; fill: #4b4b4b; /*<--34%*/}
    50% { color: #fff; fill: #fff;}
    100% { color: #fff; fill: #fff; }
}
/* Animation for the title - fallback for oldBrowser - BrownLOGO to show when3rdImage - opacityChangeAnim */
@-webkit-keyframes titleAnimationOpacity { 
    0% { opacity:0; }
    18% { opacity:1; }
    38% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:0; }
}
@-moz-keyframes titleAnimationOpacity { 
    0% { opacity:0; }
    18% { opacity:1; }
    38% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:0; }
}
@-o-keyframes titleAnimationOpacity { 
    0% { opacity:0; }
    18% { opacity:1; }
    38% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:0; }
}
@-ms-keyframes titleAnimationOpacity { 
    0% { opacity:0; }
    18% { opacity:1; }
    38% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:0; }
}
@keyframes titleAnimationOpacity { 
    0% { opacity:0; }
    18% { opacity:1; }
    38% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:0; }
}

/* Animation for span.update - for modernBrowser - NoNeed toCover olderBrowser or .lte-ie9 */
@-webkit-keyframes titleAnimation_update { 
    0% { color: #bee0c2; /*sky green<--#fff */ }
    18% { color: #37a34a;  /*parrot green 55/163/74  <--16%*/ }
    38% { color: #37a34a;  /*parrot green 55/163/74  <--34%*/}
    50% { color: #bee0c2; /*sky green<--#fff */ }
    100% { color: #bee0c2; /*sky green<--#fff */ }
}
@-moz-keyframes titleAnimation_update { 
    0% { color: #bee0c2; /*sky green<--#fff */ }
    18% { color: #37a34a; /*parrot green 55/163/74  <--16%*/ }
    38% { color: #37a34a; /*parrot green 55/163/74  <--34%*/}
    50% { color: #bee0c2; /*sky green<--#fff */ }
    100% { color: #bee0c2; /*sky green<--#fff */ }
}
@-o-keyframes titleAnimation_update { 
    0% { color: #bee0c2; /*sky green<--#fff */ }
    18% { color: #37a34a; /*parrot green 55/163/74  <--16%*/ }
    38% { color: #37a34a; /*parrot green 55/163/74  <--34%*/}
    50% { color: #bee0c2; /*sky green<--#fff */ }
    100% { color: #bee0c2; /*sky green<--#fff */ }
}
@-ms-keyframes titleAnimation_update { 
    0% { color: #bee0c2; /*sky green<--#fff */ }
    18% { color: #37a34a; /*parrot green 55/163/74  <--16%*/ }
    38% { color: #37a34a; /*parrot green 55/163/74  <--34%*/}
    50% { color: #bee0c2; /*sky green<--#fff */ }
    100% { color: #bee0c2; /*sky green<--#fff */ }
}
@keyframes titleAnimation_update { 
    0% { color: #bee0c2; /*sky green<--#fff */ }
    18% { color: #37a34a; /*parrot green 55/163/74  <--16%*/ }
    38% { color: #37a34a; /*parrot green 55/163/74  <--34%*/}
    50% { color: #bee0c2; /*sky green<--#fff */ }
    100% { color: #bee0c2; /*sky green<--#fff */ }
}



/* Overwrite style.css for Toppage */
/* ---------------------------------------------------------
   SVG
   ---------------------------------------------------------*/
/*--------- SVG COLOR&Effect ---------*/
.efflogo{/*Profusion of Flowers - default for modernBrowser - colorChangeAnim w/fill*/
fill: #fff;/*<--#4b4b4b forsythia-black(logo) 75/75/75 @initial */
    -webkit-animation: titleAnimation 18s linear infinite 0s;
    -moz-animation: titleAnimation 18s linear infinite 0s;
    -o-animation: titleAnimation 18s linear infinite 0s;
    -ms-animation: titleAnimation 18s linear infinite 0s;
    animation: titleAnimation 18s linear infinite 0s; 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.efflogo-br{/*ADDED for toppage - fallback for oldBrowser - BrownLOGO to show when3rdImage - opacityChangeAnim */
display:block;/*<--0  overwrite style.css to show */
position: absolute;/*constraint to .logo-box@style.css*/
width:100%;
height:100%;
top: 0;
left: 0;
fill: #4b4b4b;/* forsythia-black(logo) 75/75/75 @initial */
    -webkit-animation: titleAnimationOpacity 18s linear infinite 0s;
    -moz-animation: titleAnimationOpacity 18s linear infinite 0s;
    -o-animation: titleAnimationOpacity 18s linear infinite 0s;
    -ms-animation: titleAnimationOpacity 18s linear infinite 0s;
    animation: titleAnimationOpacity 18s linear infinite 0s; 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
opacity:0;
}
.lte-ie9 .efflogo{
fill: #4b4b4b;/*with 3rd bgimage*/
}
/*--------end of SVG----------*/

/*:::::::::::::::::::::::
::::::::: Menu :::::::::
:::::::::::::::::::::::::*/
.header{
position: relative;/*<--sticky@initial-style.css*/
top:auto;/*null<--6rem@initial-style.css*/
color:#fff;/*<--#333333@initial*/
/*noNeed for @768 as defined in style.css*/
    -webkit-animation: titleAnimation 18s linear infinite 0s;
    -moz-animation: titleAnimation 18s linear infinite 0s;
    -o-animation: titleAnimation 18s linear infinite 0s;
    -ms-animation: titleAnimation 18s linear infinite 0s;
    animation: titleAnimation 18s linear infinite 0s; 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.update{/*span apply Anim to Toppage*/
color:#bee0c2 ;/*default sky green 190/224/194 */
    -webkit-animation: titleAnimation_update 18s linear infinite 0s;
    -moz-animation: titleAnimation_update 18s linear infinite 0s;
    -o-animation: titleAnimation_update 18s linear infinite 0s;
    -ms-animation: titleAnimation_update 18s linear infinite 0s;
    animation: titleAnimation_update 18s linear infinite 0s; 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.lte-ie9 .header{
color:#333333;/*with 3rd bgimage*/
	-webkit-animation: none;/*null*/
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none; 
}
.lte-ie9 .update{/*span apply Anim to Toppage*/
color:#37a34a ;/*parrot green 55/163/74 with 3rd bgimage*/ 
	-webkit-animation: none;/*null*/
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none; 
}
/*--- Language SwitchBTN ---*/
.langbtn ul li{
text-shadow: 1px 1px 2px #a9a9a9;/*<--overwrite for Toppage(PC)*/
}
.langbtn ul li.lang-en a,/* EN*/
.langbtn ul li.lang-ja a{/* JA*/
background-color: rgba(255, 255, 255, 0.1); /*<--*/
}
.langbtn ul li.lang-ja a{/* JA ovrewrite*/
border-radius: 0 3px 3px 0; /* Ltop-Rtop-Rbtm-Lbtm */
}
.langbtn ul li.lang-en a:hover,/* EN*/
.langbtn ul li.lang-ja a:hover{/* JA*/
/*color:#1a1a1a;forsythia-black 26/26/26*/
background-color: rgba(255, 255, 255, 0.4);
}
.lang-selected a,
.lang-selected a:hover{
/*color:#1a1a1a !important;forsythia-black 26/26/26*/
background-color: rgba(255, 255, 255, 0.4) !important; 
}

body, html {
  height: 100%;/*for .container height to work*/
}
.container{/*wrap everything overwrite for Top*/
/*margin:0 auto; in style.css
margin-top:3em;
width:90%;
max-width:1400px;*/
padding:5em;/*<--0@initial overwrite when Toppage*/
position: relative; /*ADD when Toppage -  constrain .cb-slideshow*/
height: calc(100% - 6em);/*ADD when Toppage*/
min-height:720px;/*ADD so that PC menu doesn't exceed bgg img when Toppage*/
}
.footer{
/*padding:0.5em 4em 1em 4em;  in style.css*/
margin:0 auto;/*ADD when Toppage*/
width:90%;/*ADD when Toppage*/
max-width:1400px;/*ADD when Toppage*/
}
/* ---------------------------------------------------------
  TABLET styles 
   ---------------------------------------------------------*/
@media (max-width: 768px) {/* based on WP bones GRID(d-5of7 m-all) */
.container{/*wrap everything*/
/*margin:0 auto; in style.css
max-width:1400px;*/
margin-top:1em;/*<--3em  overwrite*/
width:calc(100% - 2em);/*<--90%  overwrite*/
/*padding:5em;<--0@initial overwrite when Toppage*/
/*position: relative; ADD when Toppage -  constrain .cb-slideshow*/
height: calc(100% - 2em);/*<--calc(100% - 6em)  overwrite*/
min-height:none;/*<---720px */
}
.update{/*span overwrite Anim@initial*/
color:#37a34a ;/*parrot green 55/163/74*/ 
	-webkit-animation: none;/*null*/
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none; 
}
.footer{
padding:2em 4em 1em 4em;/* so that it's out of Viewport<---0.5em 4em 1em 4em in style.css*/
/*margin:0 auto;ADD when Toppage*/
/*width:90%;ADD when Toppage*/
/*max-width:1400px;ADD when Toppage*/
}
.logo-g {
    /*margin-bottom: 2em;*/
	margin-top: 6em;/*ADDED --->2em@768landscape*/
}
/*--- Language SwitchBTN -Re-define for Toppage ---*/
.langbtn ul li{
text-shadow: none;/*back to default<--1px 1px 2px #a9a9a9@initial for Toppage*/
}
.langbtn ul li.lang-en a,/* EN*/
.langbtn ul li.lang-ja a{/* JA*/
background-color: rgba(169, 169, 169, 0.2); /*#a9a9a9*/
}
.langbtn ul li.lang-en a:hover,/* EN*/
.langbtn ul li.lang-ja a:hover{/* JA*/
background-color: rgba(169, 169, 169, 0.4);/*#a9a9a9*/
}
.lang-selected a,
.lang-selected a:hover{
background-color: rgba(169, 169, 169, 0.4) !important; /*#a9a9a9*/
}
.container{/*wrap everything*/
padding:5em 0;/*left/right is back to initial<--5em for topInitial<--0@initial overwrite when Toppage*/
min-height:auto;/*null<--720px@initial-Toppage*/
}
}/* /@768 */

@media (max-width: 768px) and (orientation:landscape) {
.logo-g {
    /*margin-bottom: 2em;*/
	margin-top: 2em;/*ADDED*/
}
}

@media print {
	.container{/*wrap everything*/
		margin-top:0;/*<--3em@initial*/
		height:90% ;/*<--calc(100% - 6em) Toppage*/
	}
	.cb-slideshow li div.bgg {
		opacity:1;/*<--0@initial*/
    	-webkit-animation: none;/*null*/
    	-moz-animation: none;
    	-o-animation: none;
    	-ms-animation: none;
    	animation: none; 
	}
	.cb-slideshow li:nth-child(1) div.bgg, 
	.cb-slideshow li:nth-child(2) div.bgg, 
	.cb-slideshow li:nth-child(3) div.bgg{
		display:none;/*hide animation @print*/
	}
	.cb-slideshow li div.bgg.print { /*4th for @print */
		display:block;/*<--none@initial*/
		opacity:1;
	}
	.cb-slideshow li div.bgg.print img { /*4th for @print */
		position: absolute;
		width:auto;
		min-width:100%;
		height:100%;
		min-height:100%;
		top:0;
		bottom:0;
		left:auto;
		right:auto;
	}
	.menu-trigger-box{/*bg for hamburgerBars*/
		display: none;/*<---block@768<--none@initial Hide @print*/
	}
}