.first-link__wrap {
  position: relative;
  z-index: 0;
  overflow: hidden
}


.first-link {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%)
}
.first-link__bg-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .4s, transform .4s;
  transform: translate(-50%, -50%) scale(1.1)
}
.first-link__bg-img.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1)
}
.first-link {
  display: block
}

.first-link__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  margin: 0 auto;
  transition: padding .3s ease
}
.first-link__inner dt{
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 0.2em;
}
.first-link__inner dd{
	line-height: 1.5;
}
.first-link-btn {
  display: flex;
  align-items: center;
  transition: right .3s ease, bottom .3s ease, transform .3s ease;
  transform-origin: right bottom
}

.first-link-btn__more {
  font-family: 'Roboto', cursive;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #000 !important;
  letter-spacing: 0;
		padding-bottom: 0 !important;
}
.first-link-btn__arrow {
  width: calc(47 * var(--base-font, 1) / 10);
  margin-left: calc(6 * var(--base-font, 1) / 10);
  overflow: hidden;
  background-image: linear-gradient(90deg, #fd8686, #fd8686 23%, #fd8686 34%, #fff0 66%, #fff0);
  background-repeat: no-repeat;
  background-position: 100% center;
  background-size: 300% 100%;
  border-radius: calc(30 * var(--base-font, 1) / 10);
  transition: background-position .3s ease
}
.first-link-btn__arrow svg, .first-link-btn__arrow img {
  display: block;
  overflow: hidden;
	width: 100%;
	height: auto;
}
.first-link__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(100% + 2px);
  opacity: 0;
  transition: opacity .4s
}
.first-link__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}
.first-link__sm-bg-img {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .4s;
  transform: translate(-50%, -50%) scale(1)
}
.first-link__sm-bg-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}
.first-link__item {
  position: relative;
  z-index: 0;
  display: block;
  max-width: calc(1280 * var(--base-font, 1) / 10);
  height: calc(120 * var(--base-font, 1) / 10);
  margin: 0 auto;
  color: #000 !important;
  background-repeat: no-repeat;
  background-position: 100% center;
  background-size: 300% 100%;
  transition: background-position .3s ease, opacity .3s ease, transform .3s ease
}

@media (min-width: 768px) {
	.first-link__wrap {
    height: calc(min(23vw, 180px)*5);
    background-color: #fff
  }
  .first-link__item {
    height: min(23vw, 180px);  
		background-color: #fff;
		transition: .3s ease
  }
	.first-link__item:after {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		display: block;
		width: 100%;
		height: 8px;
		content: "";
		background-color: #f7f7f7;
		transition: opacity .1s ease
	}
	.first-link__item:last-child:after{
		display: none;
	}
  .first-link__item:hover .first-link-btn__arrow {
    background-position: 0% center
  }
  .first-link__inner {
    max-width: 1190px;		
		box-sizing: border-box;
		padding: 0 30px;
		transition: .3s ease
  }
	.first-link__inner dl{
		max-width: 810px;
		box-sizing: border-box;
		padding-left: 15px;
		transition: .3s ease
	}
	.first-link__inner dt{
		font-size: 32px;
		transition: .3s ease
	}
	.first-link__inner dd{
		font-size: 16px;
		padding-bottom: 5px;
		transition: .3s ease
	}
	.first-link__inner .first-link-btn{
		transition: .3s ease
	}
	.first-link-btn__arrow {
    width: 74px;
		height: 36px;
    margin-left: min(.859375vw, 11px);
    border-radius: min(3.90625vw, 50px)
  }	
	/*.first-link__wrap:hover .first-link__item{
		max-width: 930px;
		height: 144px;
		margin-bottom: 20px;
	}
	.first-link__wrap:hover .first-link__item:last-child{
		margin-bottom: 0;
	}
	.first-link__wrap:hover .first-link__item:after {
    opacity: 0
  }
	.first-link__wrap:hover .first-link__inner dt{
		font-size: 30px;
	}
	
  .first-link__wrap:hover .first-link__bg {
    opacity: 1
  }*/
	.first-link__item:hover{
		background: #e5e5e5;
	}
	.first-link__item--5, .first-link__item--4{
		pointer-events: none;
	}
}
@media only screen and (max-width: 1000px) and (min-width:768px){
	.first-link__inner dl{
		padding-left: 0;
		width: calc(100% - 225px);
	}
	.first-link__item{
		
	}
}
@media (max-width: 767px) {
	.first-link{
		position: static;
		transform: translate(0, 0);
	}
	.first-link__item{
		width: 100%;
		height: auto;
		padding: 2vw 5.3%;
	}
	/*.first-link__item--1{
		background: url("../images/images/sec1_bg1_sp.jpg") no-repeat center / cover;
	}
	.first-link__item--2{
		background: url("../images/images/sec1_bg2_sp.jpg") no-repeat center / cover;
	}
	.first-link__item--3{
		background: url("../images/images/sec1_bg3_sp.jpg") no-repeat center / cover;
	}
	.first-link__item--4{
		background: url("../images/images/sec1_bg4_sp.jpg") no-repeat center / cover;
	}
	.first-link__item--5{
		background: url("../images/images/sec1_bg5_sp.jpg") no-repeat center / cover;
	}*/
	.first-link__inner{
		background: #fff;
		box-sizing: border-box;
		padding: 4vw 6% 5vw;
		display: block;
		min-height: 48vw;
	}
	.first-link__inner dt{
		font-size: 20px;
		margin-bottom: 8px;
	}
	.first-link__inner dd{
		font-size: 14px;
		line-height: 21px;
	}
	.first-link-btn{
		justify-content: flex-end;
	}
	.first-link-btn__more{
		font-size: 10px !important;		
	}
	.first-link-btn__arrow{
		width: 48px;
		height: 24px;
		margin-left: 5px;
	}
}
@media (max-width: 480px) {
	.first-link__inner dt{
		font-size: 19px;
		letter-spacing: 1px;
	}
}