@charset "utf-8";
/* CSS Document */
.ans_body{
  position: relative;
  padding-top: 20px;
  padding-bottom: 40px;
  background: url(../img/il_bg.jpg) center top no-repeat;
  background-size: cover;
}



.ans_bg{
  position: absolute;
  height:min(48vw, 820px);
  width: 100%;
  max-width: 1500px;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.ans_bg div{
  position: absolute;
  bottom: 0;
  z-index: 10;
}
/*画像位置は基本中央基準*/
  .ans_bg div:nth-of-type(1){left: 3.8%;   bottom: 8.3vw;}
  .ans_bg div:nth-of-type(2){left: 15.9%;  bottom: 8.3vw;}
  .ans_bg div:nth-of-type(3){left: 29.4%;  bottom: 8.3vw;}
  .ans_bg div:nth-of-type(4){left: 43%;    bottom: 8.3vw;}
  .ans_bg div:nth-of-type(5){left: 58%;    bottom: 8.3vw;}
  .ans_bg div:nth-of-type(6){left: 71.8%;  bottom: 8.3vw;}
  .ans_bg div:nth-of-type(7){left: 0.54%;  z-index: 11;}
  .ans_bg div:nth-of-type(8){left: 16.9%;  z-index: 15;}
  .ans_bg div:nth-of-type(9){left: 33%;    z-index: 15;}
  .ans_bg div:nth-of-type(10){left: 47.7%; z-index: 15;}
  .ans_bg div:nth-of-type(11){left: 62.4%; z-index: 15;}
  .ans_bg div:nth-of-type(12){left: 77.4%; z-index: 15;}
  
  .ans_bg div:nth-of-type(1) picture{left: -6.2%;}
  .ans_bg div:nth-of-type(2) picture{left: -9.2%;}
  .ans_bg div:nth-of-type(4) picture{left: -14.7%;}
  .ans_bg div:nth-of-type(5) picture{left: -8.9%;}
  .ans_bg div:nth-of-type(6) picture{left: -9.5%;}
  .ans_bg div:nth-of-type(7) picture{left: -10.4%;}
  .ans_bg div:nth-of-type(8) picture{left: -10.9%;}
  .ans_bg div:nth-of-type(9) picture{left: -9.4%;}
  .ans_bg div:nth-of-type(10) picture{left: -11%;}
  .ans_bg div:nth-of-type(11) picture{left: -6.8%;}
  .ans_bg div:nth-of-type(12) picture{left: -6.8%;}

.ans_bg div picture{
  position: absolute;
  left: 0;
  bottom: 0;
}
.ans_bg div picture img{max-width:320px;}

.ans_bg div picture:nth-of-type(1){animation: fadeout 12s linear infinite;}
.ans_bg div picture:nth-of-type(2){
  opacity: 0;
  animation: fadein 12s linear infinite;
}
.ans_bg div.ans_anmdly00 picture{animation-delay: 0;}
.ans_bg div.ans_anmdly01 picture{animation-delay: 1s;}
.ans_bg div.ans_anmdly02 picture{animation-delay: 2s;}
.ans_bg div.ans_anmdly03 picture{animation-delay: 3s;}
.ans_bg div.ans_anmdly04 picture{animation-delay: 4s;}
.ans_bg div.ans_anmdly05 picture{animation-delay: 5s;}
.ans_bg div.ans_anmdly06 picture{animation-delay: 6s;}
.ans_bg div.ans_anmdly07 picture{animation-delay: 7s;}
.ans_bg div.ans_anmdly08 picture{animation-delay: 8s;}
.ans_bg div.ans_anmdly09 picture{animation-delay: 9s;}
@keyframes fadeout{
  0%{opacity: 1;}
  45%{opacity: 1;}
  50%{opacity: 0;}
  95%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes fadein{
  0%{opacity: 0;}
  45%{opacity: 0;}
  50%{opacity: 1;}
  95%{opacity: 1;}
  100%{opacity: 0;}
}




.ans_maincontents{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

h1{
  margin-bottom: 412px;
  text-align: center;
}

.ans_topics{
  position: relative;
  width:98%;
  max-width: 940px;
  margin: auto;
  background: url(../img/il_blackboard.webp) center top no-repeat;
  padding-bottom: 4vw;
  background-size: 100% auto;
}
.ans_topics h2{
  position: absolute;
  left: calc(50% - 59px);
  top: -19px;
}
.ans_topicsbox{
  display: flex;
  width: 100%;
  padding: 13px 0 0 16px;
}
.ans_topicsbox div:first-of-type{
  width: 53.2%;
  padding: 40px 32px;
}
.ans_topicsbox div:first-of-type iframe{
  width: 100%;
  height: 5.5em;
  overflow-y: scroll;
}
/*ここはiframe内の指定*/
.ans_topicsboxul li:nth-last-of-type(n+2){margin-bottom: 20px;}
.ans_topicsboxul li a{color: #FFFFFF;}
.ans_topicsbox div{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 43.3%;
  padding: 0 3.5% 0 0;
}
.ans_topicsbox div p{width: 354px;}
.ans_topicsbox div a{display: block;width:100%;}
.ans_topicsbox div a img{max-width:100%;width:100%;}



.ans_annalist{
  display: flex;
  flex-wrap: wrap;
  gap: 32px 24px;
  max-width: 1384px;
  margin: auto;
  padding: 0 16px;
}
.ans_annalist li{
  position: relative;
  width: 320px;
  aspect-ratio: 1;
  background-color: #FFF;
}
.ans_annalist li a a{
  position: absolute;
  display: block;
  width: 72px;
  height: 72px;
  bottom: 10px;
}
.ans_annalist li a a img{width: 100%;}
.ans_annalist li > a >img{max-width: 100%;}
.ans_linkdetail{
  display: block;
  aspect-ratio:1/1;
}
.ans_annalist li > a > img{
  position:absolute;
  top:0;
  left:0;
  transition: 0.25s;
}

.ans_linkblog{
  right: 10px;
  z-index:99;
}


.tss_gotop{width: 80px;}
.tss_gotop img{max-width: 100%;}
.tss_footer{background-color: #FFFFFF;}
.tss_footer a{color: #A1A1A1;}


@media screen and (min-width:801px){
  .ans_topicsbox ul li a:hover{text-decoration: none;}
  .ans_topicsbox div a:hover{opacity: 0.5;}
  .ans_annalist li > a >img{max-width: 100%;}
  .ans_annalist li > a >img:hover{opacity:0;}
}

@media screen and (max-width:1850px){
  .ans_bg{height:min(61.5vw,840px);}
  .ans_bg div picture img{width: 24.8vw;}

  h1{
    width: 50.4vw;
    margin: 0 auto 27.5vw;
  }
  h1 img{width: 100%;}

}




@media screen and (max-width:1400px){
  .ans_annalist{gap: 32px 1.67%;}
  .ans_annalist li{
    width: 23.74%;
    background-color:#FFF;
    position:relative;
   }
  .ans_annalist li a a{
    width: 5.5vw;
    height: 5.5vw;
  }
}



@media screen and (max-width:800px){
  .ans_body{padding-bottom: calc(17.5vw + 120px);}
  .ans_bg {
    height: 76vw;
  }
    
  .ans_bg div picture img {
    width: 32.8vw;
  }

  h1{
    width: 55.4vw;
    margin: 0 auto 43.5vw;
  }
  h1 img{width: 100%;}
  .ans_topics{
    width:100%;
    background-image: url(../img/il_blackboard_sp.webp);
    padding-bottom:0;
  }
  
  .ans_topicsbox{
    display: block;
    height:auto;
    padding: 4vw 4vw 76px 5vw;
  }
  .ans_topicsbox div:first-of-type iframe{
    height: 7.5em;
  }
  .ans_topicsbox ul{
    width: 100%;
    height: 35vw;
    margin-bottom: 9.6vw;
    padding: 4vw 4vw 3vw;
  }
  .ans_topicsbox div{
    width: 76%;
    margin: auto;
    padding:0;
  }
  .ans_topicsbox div:first-of-type{
    width: 100%;
    padding: 32px 32px;
  }
  .ans_topicsbox div p{width: 100%;}
  
  .ans_bg div:nth-of-type(1){left:-5.2%;}
  .ans_bg div:nth-of-type(2) {left:7%;}
  .ans_bg div:nth-of-type(3) {left:22.4%;bottom: 6.3vw;}
  .ans_bg div:nth-of-type(4) {left:40%;bottom: 6.3vw;}
  .ans_bg div:nth-of-type(5){left: 58%;bottom: 6.3vw;}
  .ans_bg div:nth-of-type(6){left: 71.8%;bottom: 6.3vw;}
  .ans_bg div:nth-of-type(7){left: 0;}
  .ans_bg div:nth-of-type(8){left: 18%;}
  .ans_bg div:nth-of-type(9){left: 37.4%;}
  .ans_bg div:nth-of-type(10){left: 51.7%;}
  .ans_bg div:nth-of-type(11){left: 67.4%;}


}
@media screen and (max-width:640px){
   .ans_bg {
     height: 86.5vw;
   }
  .ans_topicsbox div:first-of-type iframe{
    height: 31vw;
  }
  .ans_bg div:nth-of-type(1){left:-7.2%;bottom: 6.3vw;}
  .ans_bg div:nth-of-type(2){left:7%;bottom: 6.3vw;}
  .ans_bg div:nth-of-type(3){left:22.4%;bottom: 6.3vw;}
  .ans_bg div:nth-of-type(4){left:38%;bottom: 6.3vw;}
  .ans_bg div:nth-of-type(5){left:58%;bottom: 6.3vw;}
  .ans_bg div:nth-of-type(6){left:71.8%;bottom: 6.3vw;}
  .ans_bg div:nth-of-type(7){left:-7.4%;bottom:-8vw;}
  .ans_bg div:nth-of-type(8){left:8.9%;bottom:-8vw;}
  .ans_bg div:nth-of-type(9){left:28.4%;bottom:-8vw;}
  .ans_bg div:nth-of-type(10){left:42.7%;bottom:-8vw;}
  .ans_bg div:nth-of-type(11){left:58.4%;bottom:-8vw;}
  .ans_bg div:nth-of-type(12){left:72.4%;bottom:-8vw;}
  .ans_bg div picture img{width:36.8vw;}
  .ans_annalist{
    gap: 24px 0;
    justify-content: space-between;
  }
  .ans_topicsbox{padding: 4vw 4vw 32px 5vw;}
  .ans_annalist li{width: 46.6%;}
  .ans_annalist li a a{
    width: 11.5vw;
    height: 11.5vw;
    bottom: 8px;
  }
  .ans_linkblog{right: 6px;}
  .ans_linkdetail{right: 10vw;}
  
  
  
  .tss_gotop{bottom: 120px;}
}