/* Y'S GEAR : /mc/wear/suzuka8h/css/suzuka8h.css */


.contentsWidth {
	overflow: hidden;
	font-size: 1.6rem;
	font-family:
		"游ゴシック体", "Yu Gothic", YuGothic, 
		"メイリオ", Meiryo, 
		"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 
		"ＭＳ Ｐゴシック", "MS PGothic", 
		sans-serif;
	font-weight: 500;
	overflow: hidden;
}

.contentsWidth * {
	box-sizing: border-box;
}

.contentsWidth a,
.contentsWidth a img,
.contentsWidth a div { transition: all ease .5s; }

@media screen and (max-width: 980px) {
	.contentsWidth {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
} /* */

/*======================================================================*
 *  [ s8hMain ] 
 *======================================================================*/

.s8hMain {
	position: relative;
}
.s8hMain .txt {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
}

/*======================================================================*
 *  [ s8hOutline ] 
 *======================================================================*/

.s8hOutline {
	display: flex;
	align-items: center;
	padding: 0 0 50px;
}

/* [ テキスト ] */
.s8hOutline .txt {
	width: 61.22%;
	padding: 0 30px;
}
.s8hOutline .txt h2 {
	margin-bottom: 30px;
	font-size: 2rem;
}
.s8hOutline .txt h2 b {
	color: #C5242B;
	font-size: 3rem;
}
.s8hOutline .txt p {
	line-height: 1.8;
}
.s8hOutline .txt p b {
	color: #C5242B;
}

/* [ 画像と回転文字 ] */
.s8hOutline .img {
	position: relative;
	width: min(380px, 38.78%);
}
.s8hOutline .img img[src*="_txt"] {
	position: absolute;
    animation: rotate 40s infinite linear;
	z-index: 1;
}
.s8hOutline .img img[src*="_img"] {
	position: relative;
	z-index: 2;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 768px) {
	.s8hOutline {
		flex-direction: column;
		padding: 30px 30px 50px;
	}

	/* [ テキスト ] */
	.s8hOutline .txt {
		width: 100%;
		margin-bottom: 30px;
		padding: 0;
	}

	/* [ 画像と回転文字 ] */
	.s8hOutline .img {
		width: min(315px, 100%);
	}
} /* */

@media screen and (max-width: 568px) {
	/* [ テキスト ] */
	.s8hOutline .txt h2 {
		font-size: 1.8rem;
	}
	.s8hOutline .txt h2 b {
		font-size: 2.2rem;
	}

	/* [ 画像と回転文字 ] */
} /* */

/*======================================================================*
 *  [ s8hLineup ] 
 *======================================================================*/

.s8hLineup {
	position: relative;
	padding: 0 30px 26.5%;
	background: #FEF8F8;
	background: linear-gradient(to bottom, #fff 0%, #fff min(80px, calc(100vw * 0.08)), #FEF8F8 min(80px, calc(100vw * 0.08)),#FEF8F8 100%);
	text-align: center;
}
.s8hLineup::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1 / 0.265;
	background: url(../img/lineup_bg.png) center bottom / 100% auto no-repeat;
	content: "";
}

.s8hLineup h2 {
	margin: 0 -30px 40px;
}

.s8hLineup h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 50px;
}
.s8hLineup h3 img[src*="icon_limited"] {
	animation: poyopoyo 2.8s ease-out infinite;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.85);
  }
}
.s8hLineup h3 + p {
	margin-bottom: 30px;
	font-size: 1.4rem;
	font-weight: bold;
}

/* [ リスト ] */
.s8hLineup .list {
	display: flex;
	flex-wrap: wrap;
	gap: 50px 30px;
}
.s8hLineup .list section {
	display: flex;
	width: calc(50% - 15px);
}
.s8hLineup .list a {
	position: relative;
	width: 100%;
	padding-bottom: 65px;
}
.s8hLineup .list b {
	display: block;
	position: relative;
}
.s8hLineup .list img[src*="icon_"] {
	position: absolute;
	bottom: 0;
	left: 10px;
	animation: kurukuru 2.8s ease-out infinite;
}
@keyframes kurukuru {
	0%{
		transform: rotateY(0);
	}
	50%{
		transform: rotateY(0);
	}
	100%{
		transform: rotateY(360deg);
	}
}
.s8hLineup .list h4 {
	margin: 30px 0 20px;
	font-size: 3rem;
	color: #C5242B;
}
.s8hLineup .list p {
	color: #000;
	line-height: 1.8;
}
.s8hLineup .list p + p {
	margin-top: 15px;
	padding-left: 1em;
	font-size: 1.4rem;
	text-indent: -1em;
}
.s8hLineup .list div {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	gap: 0 10px;
	position: absolute;
	bottom: 0;
	left: calc(50% - 90px);
	width: 180px;
	height: 45px;
	background: #000;
	color: #fff;
	font-weight: bold;
	overflow: hidden;
}
.s8hLineup .list div::before {
	width: 10px;
	height: 16px;
	background: url(../img/icon_arrow.svg) center center / contain no-repeat;
	content: "";
}
.s8hLineup .list div::after {
	content: "";
	display: block;
	width: 30px;
	height: 100%;
	position: absolute;
	top: -180px;
	left: 0;
	background: rgba(255,255,255,0.5);
	opacity: 0;
	transform: rotate(45deg);
	animation: reflect 2.8s ease-in-out infinite;
}
@keyframes reflect {
	0% { transform: scale(0) rotate(45deg); opacity: 0; }
	80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { transform: scale(4) rotate(45deg); opacity: 1; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

/* オンマウス */
.s8hLineup .list a:hover, 
.s8hLineup .list a:active {
	transform: translateY(-10px);
}
.s8hLineup .list a:hover div, 
.s8hLineup .list a:active div {
	background: #C5242B;
	color: #fff;
}
.s8hLineup .list a:hover img, 
.s8hLineup .list a:active img {
	opacity: 1;
}


@media screen and (max-width: 568px) {
	.s8hLineup h2 {
		margin-bottom: 35px;
	}

	.s8hLineup h3 {
		margin-bottom: 35px;
	}
	.s8hLineup h3 img[src*="lineup_sttl"] {
		width: min(315px, 100%);
	}
	.s8hLineup h3 + p {
		margin-bottom: 50px;
	}

	/* [ リスト ] */
	.s8hLineup .list {
		flex-direction: column;
		align-items: center;
		gap: 40px 0;
		margin-bottom: 40px;
	}
	.s8hLineup .list section {
		width: min(315px, 100%);
	}
	.s8hLineup .list a {
		padding-bottom: 60px;
	}
	.s8hLineup .list h4 {
		margin: 20px 0 15px;
		font-size: 2.8rem;
	}
	.s8hLineup .list img[src*="icon_"] {
		left: 0;
	}
} /* */

/*======================================================================*
 *  [ s8hLink ] 
 *======================================================================*/

.s8hLink {
	position: relative;
	margin-top: -5px;
	padding: 30px;
	z-index: 1;
	background: #000;
}
.s8hLink h2 {
	margin-bottom: 20px;
	padding: 5px 0 5px 10px;
	border-left: 10px solid #fff;
	color: #fff;
	font-size: 2.4rem;
	line-height: 1.2;
}
.s8hLink h2 b {
	display: inline-block;
}
.s8hLink a {
	display: block;
	background: #fff;
}
.s8hLink img {
	width: 100%;
}

@media screen and (max-width: 568px) {
	.s8hLink {
		padding: 20px;
	}
	.s8hLink h2 {
		margin-bottom: 15px;
		font-size: 1.8rem;
	}
} /* */