@charset "UTF-8";

@font-face {
  font-family: "hikkitai2";
  src:url('../../font/hikkitai.otf');
}

#eyeC01w{
width:100%;	
background: url(./font/);
}

.eyeC01{
margin:0;
margin-top: calc(77px);
padding: 0;
width: 100%;
}

.eyeC01 > div{
width:100%;
}

.cont_wrap .cont_flex2{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: auto 4% 45px;
  box-sizing: border-box;
  transition: .9s;
}

.cont_wrap .cont_flex2 > div{
  flex-basis: 50%;
  max-width: 50%;
  position: relative;
}

.cont_wrap .cont_flex2 > div:nth-of-type(1){
}

.cont_wrap .cont_flex2 > div:nth-of-type(1) img{
  width: 100%;
  transform: translate(0,20px);
  opacity: 0;
  position: relative;
  /*border: none !important;*/
}


 .cont_wrap .cont_flex2 #pos_relative01{
  position: relative;
 }

.cont_wrap .cont_flex2 div.inimage01{
  width: 20%;
  position: absolute;
  right: 15px;
  bottom: 15px;
  font-size: 0;
  display: inline-block;
  padding: 0 !important;
}

#closeBtn01{
font-size: 1rem;
display: inline-block;
position: absolute;
bottom: 100%;
right: 0;
padding:5px 0;
font-weight: 700;
background: #000;
color: #fff;
line-height: 1;
padding:3px 5px;
cursor: pointer;
z-index: 2;
opacity: 0;
/*animation: fadeInBtn .8s ease-in-out 1s forwards;*/
}

.closeBtn01_JS{
height: 5px;
}

.closeBtn01_JS2{
animation: fadeInBtn .8s ease-in-out 1s forwards;
}


@keyframes fadeInBtn {
    0% {  
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

.cont_wrap .cont_flex2 .inimage01 img{
 font-size: 0;
 width: 100% !important;
border: none;
 cursor: pointer;
 padding: 0px !important;
 border: none !important;
}


.cont_wrap .cont_flex2 .inimage01:before{
position: absolute;
left:0px;
top: 0px;
display: inline-block;
width: 100%;
height: calc(100%);
background:rgba(255,255,255,.3);
content: " ";
box-shadow: 0px 0px 5px 3px rgba(255,255,255,.3);
opacity: 0;
animation: linkefinImg .8s ease-in-out 2.75s infinite forwards;
}

.cont_wrap .cont_flex2 .img001{
  font-size: 0;
}

.cont_wrap .cont_flex2 .img001 p#sup01{
position: absolute;
left: 0;
bottom: 0;
font-size: .75rem;
width: 60%;
line-height: 1.2;
color: #fff;
padding: 5px 8px 8px;
display: none;
text-shadow: #000 1px 0 10px;
}


.cont_flex2Adclass{
  animation: adphotoEF2 0.5s ease-in .5s 1 forwards; 
}


.cont_wrap .cont_flex2 > div:nth-of-type(2){
  box-sizing: border-box;
  padding: 10px 1.5rem;
}

.cont_wrap .cont_flex2 > div:nth-of-type(2) p{
  font-size: 1.2rem;
  color: #000;
}

.cont_wrap .cont_flex2 .loadmask{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 110%;
  width: 100%;
  background:#fafad2;
  background:#fff;
  /*animation: loadmaskEF .8s ease-in-out .5s infinite forwards;  */
}




.BackLink_wrap{
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
}

.BackLink{
  display: inline-block;
  position: relative;
 background: #3367FF; 
 margin: auto 4%;
 border: 1px solid rgba(51,103,255,0.8);
 border-radius: 5px;
}


.BackLink a{
  color: #fff;
  display: block;
  padding: 5px 15px;
}

.BackLink a:before{
  position: absolute;
  top:0%;
  left: 0%;
  padding:15px 0;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height:100%;
  /*border: 1px solid #FFFF00;*/
  border-radius: 5px;
  content: " ";
 z-index: -1;
 background:rgba(51,103,255,1);
 box-shadow: 0px 0px 5px 3px #3367FF;
  animation: linkef .8s ease-in-out .5s infinite forwards;  
}
/*
.BackLink a:after{
  position: absolute;
  top:0%;
  left: 5%;
  padding:15px 0;
  display: inline-block;
  box-sizing: border-box;
  width: 90%;
  height:100%;
  border: 1px solid #FFFF00;
  border-radius: 5px;
  content: " ";
 z-index: -1;
  animation: linkef 2.0s ease-in .5s infinite forwards;  
}
*/

.adphotoEF{
animation: adphotoEF 1.5s ease-in .5s 1 forwards;  
}

.adphotoEF2{
animation: adphotoEF2 0.5s ease-in .5s 1 forwards;  
}


/*css anime*/
@keyframes adphotoEF2 {
    0% {
        transform: translate(0,20px);
         opacity: 0.1;
         /*z-index: -1;*/

    }
    100% {
      transform: translate(0,0);
       opacity: 1;
       /*z-index: 1;*/
    }
}

@keyframes linkef {
    0% {  
      transform-origin: 50% 50%; 
      transform:scale(1); 
      opacity: .8;
    }
    100% {
      transform:scale(1.05);    
      opacity: 0;
    }
}

@keyframes linkefinImg {
    0% {  
      transform-origin: 50% 50%; 
      transform:scale(1); 
      opacity: .8;
    }
    100% {
      transform:scale(1.05);    
      opacity: 0;
    }
}



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


}


@media screen and (max-width: 896px){
.eyeC01{	
margin-top: calc(50px);
}

.cont_wrap .cont_flex2{
  display: flex;
  flex-wrap: wrap;
  margin: auto 4% 30px;
  box-sizing: border-box;
}

.cont_wrap .cont_flex2 > div{
  flex-basis: 100%;
  max-width:  100%;
}

.cont_wrap .cont_flex2 > div:nth-of-type(1){
}

.cont_wrap .cont_flex2 > div:nth-of-type(1) img{
  width: calc(100% - 20px);
  padding: 10px 10px 20px ;
  padding: 10px 10px 10px ;
  border: 1px solid #ccc;
}

.cont_wrap .cont_flex2 > div:nth-of-type(2){
  box-sizing: border-box;
  margin-top: 15px;
  padding: 5px 5px 15px;
}

.cont_wrap .cont_flex2 > div:nth-of-type(2) p{
  font-size: 1.0rem;
  padding: 3px 0;
  /*text-indent: 1rem;*/
}

.cont_wrap .cont_flex2 div.inimage01 {

    right: 20px;
    bottom: 20px;

}

.cont_wrap .cont_flex2 .img001 p#sup01 {
    bottom: 10px;
    left: 10px;
}


}

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


}

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

.cont_wrap .cont_flex2 > div:nth-of-type(2) p{
  font-size: .9rem;
}

#closeBtn01{
font-size: .75rem;}


}