@charset "utf-8";

/*==================================================
  TOP Page
==================================================*/

/*--------------------------------------------------
  main img
--------------------------------------------------*/
.mainImg{
	position: relative;
	width: 80%; 
	height: auto;
	margin: 0 auto;
	line-height: 0;
	z-index: 1;
}
.mainImg img{
	width: 100%;
	height: auto;
}
.mainImg p:not(:first-of-type){
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	animation-name: fadeIn01;
	animation-fill-mode: forwards;
    opacity:0;
}

@keyframes fadeIn01 {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.mainImg p:nth-of-type(2){
	animation-duration: 3s;
	animation-delay: 2s;
}


/*--------------------------------------------------
  link list
--------------------------------------------------*/
.imgLinkList{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 32px 0 40px;
}
.imgLinkList .imgLink{
	overflow: hidden;
	margin-bottom:40px;
	width: 30%; max-height: 200px;
}
.imgLinkList .imgLink img{
	width: 100%;
	height: auto;
}
.imgLinkList .imgLink a{
	display: block;
	position: relative;
}


.imgLinkList .imgLink p{
	position: relative;
}
.imgLinkList .imgLink p.pc{
	display: block;
}

/*
.imgLinkList .imgLink p:after{
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	opacity: 0;
}
.imgLinkList .imgLink:hover p:after{
	opacity: 1;
}

.imgLinkList .imgLink p.pc.img01:after{background: url("../common/images/advertising_img01_pc_on.jpg") 0 0 no-repeat;}
.imgLinkList .imgLink p.pc.img02:after{background: url("../common/images/advertising_img02_pc_on.jpg") 0 0 no-repeat;}
.imgLinkList .imgLink p.pc.img03:after{background: url("../common/images/advertising_img03_pc_on.jpg") 0 0 no-repeat;}
.imgLinkList .imgLink p.pc.img04:after{background: url("../common/images/advertising_img04_pc_on.jpg") 0 0 no-repeat;}
.imgLinkList .imgLink p.pc.img05:after{background: url("../common/images/advertising_img05_pc_on.jpg") 0 0 no-repeat;}
.imgLinkList .imgLink p.pc.img06:after{background: url("../common/images/advertising_img06_pc_on.jpg") 0 0 no-repeat;}

.imgLinkList .imgLink p.sp.img01:after{background: url("../common/images/advertising_img01_sp_on.jpg") 0 0 no-repeat;}
.imgLinkList .imgLink p.sp.img02:after{background: url("../common/images/advertising_img02_sp_on.jpg") 0 0 no-repeat;}
.imgLinkList .imgLink p.sp.img03:after{background: url("../common/images/advertising_img03_sp_on.jpg") 0 0 no-repeat;}
.imgLinkList .imgLink p.sp.img04:after{background: url("../common/images/advertising_img04_sp_on.jpg") 0 0 no-repeat;}
.imgLinkList .imgLink p.sp.img05:after{background: url("../common/images/advertising_img05_sp_on.jpg") 0 0 no-repeat;}
.imgLinkList .imgLink p.sp.img06:after{background: url("../common/images/advertising_img06_sp_on.jpg") 0 0 no-repeat;}
*/

@media screen and (min-width:751px){
	.imgLinkList .imgLink:nth-last-of-type(-n+3){
		margin-bottom: 0;
	}
}

@media screen and (max-width:750px){
	.imgLinkList{
		width: 87.5%;
		margin: 0 auto;
	}
	.imgLinkList .imgLink{
		width: 46%; height: auto;
		margin-bottom: 5%;
	}
	.imgLinkList .imgLink:nth-last-of-type(-n+2){
		margin-bottom: 0;
	}
	
	.imgLinkList .imgLink p.pc{
		display: none;
	}
	.imgLinkList .imgLink p.sp{
		display: block;
	}
}