/*
special
-------------------------*/

#special {
	background: url(/images/special_bg.jpg) no-repeat center top;
	background-size: cover;
	padding-top: 120px;
	padding-bottom: 260px;
}
@media (min-width: 768px) {
	#special {
		background: url(/images/special_bg.jpg) no-repeat center center;
		background-size: cover;
	}
}
@media (min-width: 1366px) {
	#special {
		padding-top: 300px;
		padding-bottom: 560px;
	}
}

@media (min-width: 768px) {
	#special .sp {
		display: none;
	}
}

#special .pc {
	display: none;
}
@media (min-width: 768px) {
	#special .pc {
		display: block;
	}
}

/* con */
#special section.con {
	background-color: #fff;
	border: 1px solid #000;
	margin-left: 30px;
	margin-right: 30px;
	padding: 25px;
}
@media (min-width: 768px) {
	#special section.con {
		width: 80%;
		padding: 30px;
		margin: 0 auto;
	}
}
@media (min-width: 1366px) {
	#special section.con {
		padding: 50px;
	}
}
@media (min-width: 1570px) {
	#special section.con {
		width: 65%;
	}
}

#special .con .text {
	padding: 20px 0;
}
@media (min-width: 1366px) {
	#special section.con .text {
		padding: 30px;
	}
}

#special .con h2 {
	text-align: left !important;
}

#special .con h2 img {
	max-width: 100%;
}

@media (min-width: 1024px) {
	#special .con h2 span {
		height: 70px;
	}

	#special .con h2 img {
		width: auto;
		height: 100%;
	}
}
@media (min-width: 1366px) {
	#special .con h2 {
		width: 80%;
	}
}

#special .con p {
	line-height: 1.6;
	margin-top: 20px;
	font-weight: 700;
}
@media (min-width: 1366px) {
	#special .con p {
		line-height: 2;
		margin-top: 40px;
		font-size: 1.2rem;
	}
}

/* logo */
#special .logo {
	text-align: center;
	width: 70%;
	margin: 60px auto 80px;
}

#special .logo img {
	max-width: 100%;
}

@media (min-width: 768px) {
	#special .logo {
		width: 430px;
		margin: 60px auto 160px;
	}
}

/* advertisement */
#special .advertisement {
	margin-top: 40px;
	border: 1px solid #000;
}

#special .advertisement .img {
	padding: 5px;
}
@media (min-width: 1366px) {
	#special .advertisement .img {
		padding: 40px;
	}
}

#special .advertisement img {
	max-width: 100%;
	width: auto;
}

#special .advertisement dl,
#special .advertisement dl dt,
#special .advertisement dl dd {
	margin: 0;
	padding: 0;
}

#special .advertisement dl {
	border-bottom: 1px solid #000;
}

#special .advertisement dl dt {
	border-bottom: 1px solid #000;
}

#special .advertisement dl dt,
#special .advertisement dl dd {
	padding: 10px;
}

@media (min-width: 1024px) {
	#special .advertisement dl {
		display: flex;
		align-items: center;
	}

	#special .advertisement dl dt {
		border-bottom: none;
		border-right: 1px solid #000;
	}
}

@media (min-width: 1366px) {
	#special .advertisement dl dt,
	#special .advertisement dl dd {
		padding: 15px 20px;
		align-self: stretch;
		line-height: 1;
	}
}

/*
ページ全体のフェードイン
-------------------------*/
body.special_load {
	opacity: 0;
	animation: pageFadeIn 1.5s ease forwards;
}

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

/*
フェードインアニメーション
-------------------------*/
.js-anime-con {
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 1.4s ease, transform 1.4s ease, visibility 1.4s ease !important;
	transition-delay: 1.5s !important;
	transform: translate(0,50px) !important;
}

.js-anime-con.is-active {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translate(0,0) !important;
}

.js-anime-text {
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 1.4s ease, transform 1.4s ease, visibility 1.4s ease !important;
	transform: translate(0,30px) !important;
}

.js-anime-text.is-active {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translate(0,0) !important;
}