/* ===================================
	File Name   : module.css
	Description : Etc Contents CSS
	Editor      : Bface Chiba
	Last Editor : Bface Chiba
	
	Update Description 
	[2025/11/20] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Index page
	2. Download page

====================================== */



/*===== ■1. Index page =====*/

/* dl_download */
#dl_download #logo figure{
  box-shadow: 1rem 1rem 0 0 #191d69;
  border: 0.1rem solid #191d69;
  margin-bottom: 4rem;
}

#dl_download #logo figure + div a{
  display: block;
  border: 0.1rem solid #191d69;
  text-align: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  outline: none;
  transition: ease .2s;
  pointer-events: all;
}
#dl_download #logo figure + div a span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color: #191d69;
}
#dl_download #logo figure + div a:hover span{
  color:#fff;
}
#dl_download #logo figure + div a.bgskew::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  background:#191d69;
  width:120%;
  height: 100%;
  transform: skewX(-25deg);
}
#dl_download #logo figure + div a.bgskew:hover::before {
  animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}
#dl_download #logo figure + div a::after{
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  clip-path: polygon(0 0, 0% 100%, 70% 50%);
  background-color: #191d69;
}
#dl_download #banner figcaption{
  border: 0.1rem #ccc solid;
}
#dl_download #banner input{
font-family: 'Poppins';
  color: #333;
  font-size: 1.6rem;
}

@keyframes skewanime {
  100% {
    left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
  }
}


@media (max-width: 768px){
  #dl_download #logo > div:first-of-type{
    margin-bottom: 3rem;
  }
  
  #dl_download #logo figure{
    box-shadow: 0.5rem 0.5rem 0 0 #191d69;
    padding: 1rem;
    margin-bottom: 2rem;
  }
  
  #dl_download #logo figure + div a{
    padding: 1rem;
  }
}




/*===== ■2. Download page =====*/

.doc_dl a {
  display: inline-block;
  overflow: hidden;
	border:#000 solid 0.1rem;
}
.doc_dl a:hover{
	opacity: 1;
}
.doc_dl a img {
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	vertical-align: bottom;
}
 
.doc_dl a img:hover {
  -webkit-transform: rotate(18deg) scale(1.2);
  transform: rotate(18deg) scale(1.2);
	opacity: 0.9;
	
}

.doc_dl a p{
	position: relative;
	z-index: 2;
}