.container {
   background-attachment: fixed;
   background-size: cover;
background-color:#eaeaea;
}

.content{
background-color:#fff;

}

.topnav{
 width:80%;
 margin-left: 20%;
 height:80vh;
}
.space{
height:80vh;
}
.topnav li.active a {
   color: #000;
   font-size: 1.5em;
}
.topnav li a{
opacity:1
 animation: intro 3s linear -1s 1 alternate; 
 -webkit-animation: intro 3s linear -1s 1 alternate;
}

ul.navtop li a::after {
position: absolute;
right: 0;
top: 0;
width: 3px;
height:0%;
content: "";
z-index:-1;
display: block;
background-color:rgb(255, 225, 0);
transition: .3s ease;
}

ul.navtop li:hover a::after,
ul.navtop li:focus a::after {	
height:0%;
}
.topnav ul.navtop li:hover a,
.topnav ul.navtop li a:hover{
 font-size: 1em;
 color:#aaa;
}
.topnav div.clicks {
-webkit-animation: bounce 2s linear 0s  infinite;
animation: bounce 2s linear 0s infinite;
}

.topnav div.click,
.topnav div.clickbutton p,
.topnav div.click2 {
 animation: none; 
 -webkit-animation: none;
}

ul.navtop li.active a::after {
position: absolute;
right: 0;
top: 0;
width: 3px;
height:100%;
content: "";
z-index:-1;
display: block;
background-color:rgb(255, 225, 0);
transition: .3s ease;
-webkit-transition: .3s ease;
 animation: subintro 3s linear -1s 1 alternate; 
 -webkit-animation: subintro 3s linear -1s 1 alternate;
}

ul.topnav3{
display:none;
}


@keyframes subintro{
0%{height:0%;}
70%{height:0%;}
100%{height:100%;}
}
@-webkit-keyframes subintro{
0%{height:0%;}
70%{height:0%;}
100%{height:100%;}
}

.grids{
position: relative;
   clear: both;
   margin: 0 auto;
   padding: 1em 0 10em;
   max-width: 1000px;
   list-style: none;
   text-align: center;
}
.grid2 {
float:left;
   position: relative;
   clear: none;
   margin: 0 2%;
   padding: 1em 0 4em;
   width: 96%;
   list-style: none;
   text-align: center;
}

.grid2 .c-title {
   clear: both;
   display: block;
   color: #000;
   margin: 0;
   padding: 0;
}

.grid2 > figure{
   margin: 20px 3%;
   max-width: 800px;
   max-height: 350px;
   height: 350px;
   width: 44%;
   display: inline-block;
   background-color: transparent;
   text-align: center;
   cursor: default;
   position: relative;
   float: left;
   overflow: hidden;
}

.grid2 figure figcaption {
padding: 2em;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
 border:2em solid rgba(9, 32, 158, 0.75);
text-transform: uppercase;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.35s;
transition: all 0.35s;
   border: 2em solid rgba(225, 225, 225, 0.8);
}
.grid2 figure figcaption:hover {
   border: 2em solid rgba(255, 255, 255, 0.67);
}

/*::::effect text  $ long::::::*/

.grid2 figure.effect-text {
   background-color: transparent;
   font-family: "Sawarabi Mincho", YuMincho, serif;
   font-weight: normal;
   padding: 0 1em;
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   text-align: left;
}

.grid2 figure.effect-text.long {

   max-height: 740px;
   height: 740px;
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;

}

.grid2 figure.effect-text.slong {

   max-height: 1110px;
   height: 1110px; 
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

.grid2 figure.effect-text.xlong {

   max-height: 1520px;
   height: 1520px; 
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

.grid2 figure.effect-text div.text{
   color: #000;
   font-size: .91em;
   line-height: 2;
   letter-spacing: 1.2px;
   word-wrap: break-word;
}

.grid2 figure.effect-text.short div.text {

   padding: 1em;
}

.grid2 figure.effect-text h2{
   margin: 0;
font-size: 1.5em;
   font-weight: bold;
}

.grid2 figure.effect-text p{
   margin: .5em 1em;
}

.grid2 figure.effect-text .sns a {
   margin: 0 1em;
   color: navy;
   text-decoration: none;
   outline: none;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}

.grid2 figure.effect-text .sns a:hover {
   text-shadow: 1px 1px 1px #888;
   opacity: 0.6;
}

.grid2 figure.long-img {
  display: flex;
  justify-content: center;
  align-items: center;
   float: right;
   max-width: auto;
   width: auto;
   max-height: 740px;
   height: 740px;
   vertical-align: middle;
}

.grid2 figure.long-img img {
   width: auto !important;
   max-width: 500px;
   height: 450px !important;
   max-height: 650px;
   vertical-align: middle;
}

.grid2 figure.pc-none {
  display: none;
}

/*::::effect history::::::*/

figure.effect-history{
   font-family: "Sawarabi Mincho", YuMincho, serif;
   background-color: navy;
   color: #fff;
padding:5% 10%;
width:100%;
}

figure.effect-history .text{
   margin:0 18%;
   font-size: 1em;
   line-height: 2;
font-weight:normal;
letter-spacing:2px;
}

figure.effect-history h2{
border-bottom:2px solid rgb(255, 225, 0);
}

figure.effect-history p{
padding:3% 10% 0;
}

/*::::effect p & p company::::::*/

figure.effect-pp {
   color: #000;
   font-family: "Sawarabi Mincho", YuMincho, serif;
margin:15%;
width:70%;
   font-size: .81em;
   line-height: 2;
}

figure.effect-pp .text{
   margin:0 18% 10%;
}

figure.effect-pp h2{
padding:3% 10%;
border-bottom:2px solid navy;
}
figure.effect-pp p{
text-align:left;
padding:3% 10%;
}
figure.effect-pp span,
figure.effect-pp.info p{
text-align:center;
}

/*::::effect kiji :::::*/

figure.effect-kiji{
   position: relative;
   float: left;
   overflow: hidden;
   margin: 20px 10% 0;
   max-height: 300px;
   width: 80%;
   height: 300px;
   background-color: #fff;
   text-align: center;
   cursor: default;
}

figure.effect-kiji img {
   position: absolute;
   border: 0;
   left: 0;
   height:auto;
   bottom: 0;
}

.effect-kiji figcaption {
   padding: 1em 0 0;
   position: absolute;
   top: 0;
   right: 0;
   left:0;
   margin:0 auto;
   width: 50%;
   height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 55%);
   text-transform: uppercase;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transition: all 0.35s;
   transition: all 0.35s;
}

figure.effect-kiji h2 {
   color: #000;
   margin-bottom: 0;
   font-size:2.5em;
   font-weight:normal;
}
figure.effect-kiji h2 span {
   font-size:1.5em;
   font-weight:normal;
}
figure.effect-kiji-text {
   position: relative;
   float: left;
   overflow: hidden;
   margin: 0 10% 20px;
   width: 80%;
   height: auto;
   background-color: #fff;
   text-align: center;
   cursor: default;
}

.effect-kiji-text .text {
   font-size: 0.8em;
   padding:1em 2em;
   color: #000;
   text-align: left;
   letter-spacing: .1em;
}
figure.effect-kiji-text *{
   font-family:'Noto Sans Japanese',sans-serif;
}
/*
div#kiji-menu {
    position: fixed;
    right: 10px;
    top: 18vh;
    height: auto;
    z-index: 0;
    width: auto;
    background-color: #fff;
}
*/
div#kiji-menu {
    height: auto;
    z-index: 0;
    width: 70%;
    margin: 0 auto;
    background-color: #fff;
}
div#kiji-menu ul.nav {
    position: relative;
    margin: .2em 0;
    width: 100%;
    padding: 0;
    display: inline-block;
}
div#kiji-menu ul.nav li {
    /*display: block;*/
    
    display: inline-block;
    margin: .2em .5em;
    font-size: 1em;
    padding: 0;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    z-index: 100;
}

div#kiji-menu ul.nav li a {
    letter-spacing: 0;
    width: auto;
    position: relative;
    display: inline-block;
    padding: .2em 0;
    color: #888;
    font-size: 1em;
    font-weight: 400;
    line-height: 1;
    z-index:11;
    text-decoration: none;
    overflow: hidden;
    font-family: 'Josefin Sans', "Hannari", "Sawarabi Mincho", YuMincho, serif;
    text-transform: uppercase;
}
div#kiji-menu ul.nav li a:hover {
    color: #000;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
div#kiji-menu ul.nav li a.active {
    color: #000;
    font-weight: bold;
}

figure.effect-kiji-text .text h2 {
    margin-top: 2.5em;
}

div#kiji-menu ul.nav li a:after{
height:50%;
z-index:-1;
}
div#kiji-menu ul.nav li a.active:after{
height:50%;
z-index:-1;

-webkit-transform: translateX(0%);
transform: translateX(0%);
}


/*::::effect gallery::::::*/

figure.effect-title h2 {
   color: #fff;
   font-size: 1.5em;
   padding: .5em;
}

figure.effect-title h2 span {
   color: #fff;
   font-weight: normal;
   font-size: 1em;
}

/*::::effect Map::::::*/

#sliderSmallImages {
width: 3000px;
overflow: hidden;
/* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */
animation: slidesmall 16s infinite;-moz-animation: slide 16s infinite;
-webkit-animation: slidesmall 16s infinite;-o-animation: slide 16s infinite;}

#sliderSmallImages img {
 float: left;
 height: 350px;
 width:500px;
}

@keyframes slidesmall{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -500px;}
37%{margin-left: -500px;}
40%{margin-left: -1000px;}
57%{margin-left: -1000px;}
60%{margin-left: -1500px;}
77%{margin-left: -1500px;}
80%{margin-left: -2000px;}
97%{margin-left: -2000px;}
100%{margin-left: 0px;}
}

@-moz-keyframes slidesmall{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -500px;}
37%{margin-left: -500px;}
40%{margin-left: -1000px;}
57%{margin-left: -1000px;}
60%{margin-left: -1500px;}
77%{margin-left: -1500px;}
80%{margin-left: -2000px;}
100%{margin-left: -2000px;}
}

@-webkit-keyframes slidesmall{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -500px;}
37%{margin-left: -500px;}
40%{margin-left: -1000px;}
57%{margin-left: -1000px;}
60%{margin-left: -1500px;}
77%{margin-left: -1500px;}
80%{margin-left: -2000px;}
100%{margin-left: -2000px;}
}


figure.effect-iframe div{
width:300px;
margin:0 auto;
height:470px;
text-align:center;

    overflow-y: scroll;
}
figure.effect-iframe{
height:470px;
}

figure.effect-iframe figcaption:hover {
   display:none;
}

figure.effect-iframe figcaption {
   border: none;
}
figure.effect-iframe h2,
figure.effect-iframe img{
width:300px
}
/******  img    ******/
figure.effect-img {
    margin: 60px 3%;
    max-width: 800px;
    max-height: 270px;
    width: auto;
    height: 270px;
}

figure.h-img {
    width: 405px;
}

.grid2 figure figcaption,
.grid2 figure figcaption:hover {
    border: none;
}

figure.effect-img.map{
    margin: 20px 2%;
    height:450px;
    max-height:450px;
}
figure.effect-img.map figcaption{
    padding:0;
}


figure.effect-img.map h2{
text-align:center;
width:100%;
position: absolute;
font-size:2em;
color:#fff;
bottom: 25%;
line-height: 1.2;
padding:5px 30px ;
background-color: navy;
z-index:10;
-webkit-transition:0.3s;
transition:0.3s;
}

figure.effect-img.map:hover h2 {
-webkit-transform: translate(0,-300px);
transform: translate(0,-300px);
}


/*::::effect content :::::*/

figure.effect-content{
   position: relative;
   float: left;
   overflow: hidden;
   margin: 20px 10% 0;
   max-height: 300px;
   width: 80%;
   height: 300px;
   background-color: #fff;
   text-align: center;
   cursor: default;
}

figure.effect-content img {
   position: absolute;
   border: 0;
   left: 0;
   height:auto;
   bottom: 0;
}

.effect-content figcaption {
   padding: 1em 0 0;
   position: absolute;
   top: 0;
   right: 0;
   left:0;
   margin:0 auto;
   width: 50%;
   height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 55%);
   text-transform: uppercase;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transition: all 0.35s;
   transition: all 0.35s;
}

figure.effect-content h2 {
   color: #000;
   margin-bottom: 0;
   font-size:2.5em;
   font-weight:normal;
}
figure.effect-content h2 span {
   font-size:1.5em;
   font-weight:normal;
}
figure.effect-content-text {
   position: relative;
   float: left;
   overflow: hidden;
   margin: 0 0 100px;
   width: 100%;
   height: auto;
   background-color: #fff;
   text-align: center;
   cursor: default;
}

.effect-content-text .text {
   font-size: 1.0em;
   padding:1em 2em;
   color: #000;
   text-align: left;
   letter-spacing: .1em;
}
figure.effect-content-text *{
   font-family:"Sawarabi Mincho", YuMincho,'Noto Sans Japanese',serif;
}

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

.grid2 > figure{
   margin: 20px 2%;
   width: 46%;
   padding:0;
}

figure.effect-img {
    margin: 70px 2%;
    max-height: 250px;
    height: 250px;
    width: 46%;
}

figure.h-img {
    margin: 70px 2%;
    max-height: 100% !important;
    height: 100% !important;
    width: 94% !important;
}

figure.effect-img.map{
    margin: 20px 2%;
}

}



@media screen and (max-width: 940px) {
.topnav,
.space {
display:none;
}

figure.effect-img {
    margin: 80px 2%;
    max-height: 230px;
    height: 230px;
}



figure.effect-pp .text {
    margin: 0 0 10%;
}


}
@media screen and (max-width: 620px) {
figure.effect-history .text {
   margin:  0;
}

.grid2 figure {
   margin: 10px 15%;
   width:70%;
}
figure.effect-pp .text {
    margin: 0 0 10%;
}


.grid2 figure.effect-text{

margin:0 10%;
   width:80%;
   text-align: left;
}
.grid2 figure.effect-img,
.grid2 figure.effect-img.map{
   width: 60%;
   margin: 10px 20%;
}

.grid2 figure.effect-img img{
   width:100%;
}
.grid2 figure.effect-text.xlong,
.grid2 figure.effect-text.slong,
.grid2 figure.effect-text.long
.grid2 figure.effect-text{
   height :auto;
   max-height:none;
   padding:3em 0;
}

.grid2 figure.effect-text.xlong,
.grid2 figure.effect-text.slong,
.grid2 figure.effect-text.long
.grid2 figure.effect-text{
   height :auto;
   max-height:none;
   padding:3em 0;
}


.grid2 figure.long-img {
  display: flex;
  justify-content: center;
  align-items: center;
   max-width: 80%;
   width: 80%;
   max-height: auto;
   height: auto;
   vertical-align: middle;
   margin: 10px 10%;
}

.grid2 figure.long-img img {
   width: 80% !important;
   max-width: 80%;
   height: auto !important;
   max-height: auto;
   vertical-align: middle;
}

.grid2 figure.sp-none {
  display: none;
}

}

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

.grid2 figure {
   margin:20px 10%;
   width:80%;
}
.grid2 figure.effect-img,
.grid2 figure.effect-img.map {
   width: 80%;
   margin: 10px 10%;
}

.grid2 figure.effect-text {
   margin:20px 2.5%;
   width:95%;
   padding:1.5em 0;
   text-align: left;
}
.effect-kiji figcaption {
    background:rgba(255, 255, 255, 0.5);
    }


div#kiji-menu {
    top: 23vh;
    font-size: .8em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 65%);
}
figure.effect-kiji {
    margin: 20px 5% 0;
    width: 90%;
}
figure.effect-kiji-text{
    margin: 0 5% 20px;
    width: 90%;
}
figure.effect-kiji h2 {
    font-size: 1.7em;
 }
figure.effect-kiji h2 span{
    font-size: 1em;
 }
 

}

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

.grid2 figure.effect-img {
margin: 10px 3%;
width:94%;
}


}