@charset "shift_jis";

body{
	font-family: 'Heebo', 'Noto Sans CJK JP', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333;
	overflow-x: hidden;
}
/* layout
------------------------------------------------------ */
a:visited,
a:link{
	color: #333;
}
p,ul,ol,div {
	color: #333;
}
@media screen and (min-width: 751px) {
	/* override
	------------------------------------------------------ */
	body {
		min-width: 1230px;
		font-size: 1.6rem;
		background-color: #fff;
		overflow-x: hidden;
	}
	/* header
	------------------------------------------------------ */
	#header {
		position: relative;
		width: 100%;
		margin: 0 auto;
		padding: 0;
		background-color: #fff;
		border: none;
		z-index: 1;
	}
	#headerLogo {
		width: 1230px;
		margin: 0 auto;
		padding: 13px 15px;
	}
	#header #headerLogo img {
		height: 28px;
	}
	/* layout
	------------------------------------------------------ */
	#mainContainer {
		position: relative;
		margin-top: 0;
	}
	#mainContents{
		width: 1230px;
		padding: 0 15px;
	}
	/* footer
	------------------------------------------------------ */
	#footer {
		width: 100%;
		margin-top: 0;
		padding: 0;
		border: none;
		background-color: #fff;
		text-align: center;
		
	}
	#footer .footerInner {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 60px;
		text-align: center;
	}
	#copyright {
		font-size: 1.4rem;
	}
	/* mainVisual
	------------------------------------------------------ */
	.mainVisual >:first-child {
		margin-top: 0 !important;
	}
	.mainVisual .mainVisualInner {
		background: url("/gecard/mirrativ_cardlineup/img-files/index_bg01_pc.webp") #fff no-repeat center top / auto 100%;
	}
	.mainVisual .mainVisualContent {
		width: 1230px;
		margin: 0 auto;
		padding: 40px 15px 70px;
	}
	.mainVisual .mainVisualContent >:first-child {
		margin-top: 0 !important;
	}
	.mainVisual .mainVisualTitle {
		margin-top: 15px;
		text-align: center;
	}
	.mainVisual .mainVisualText01 {
		text-align: center;
		margin-top: 15px;
		padding: 60px 0;
		background-image: linear-gradient(to right,#27cbb3 0%,#14bdcc 100%);
	}
	.mainVisual .mainVisualText02 {
		margin-top: 10px;
		text-align: center;
		font-size: 3rem;
		line-height: 1.2
	}
	.mainVisual .mainVisualText03 {
		margin-top: 30px;
		text-align: center;
		font-size: 2.4rem;
	}
	.mainVisual .mainVisualLead01 {
		margin-top: 20px;
		text-align: center;
		font-size: 3.4rem;
		font-weight: bold;
	}
	.mainVisual .mainVisualCardWrap {
		display: flex;
		justify-content: center;
		flex-flow:  row-reverse wrap-reverse;
		gap: 16px 20px;
		width: 1018px;
		margin: 23px auto 0;
	}
	.mainVisual .mainVisualCard {
		width: 326px;
	}
	/* module
	------------------------------------------------------ */
	/* section */
	.cardlineup-section01 {
		margin: 0 min(-15px, calc((100vw - 100%) / 2* -1));
		padding: 125px max(15px, calc((100vw - 100%) / 2)) 60px;
		background: linear-gradient(90deg, #29ccb1, #14bdcc) no-repeat 0 0 / 100%;
	}
	.cardlineup-section01 >:first-child {
		margin-top: 0 !important;
	}
	/* card */
	.cardlineup-card {
		width: 1140px;
		margin: 20px auto 0;
		padding: 40px;
		border-radius: 5px;
		background-color: rgba(255,255,255,0.7);
	}
	.cardlineup-card .cardlineup-cardTitle {
		margin-top: -107px;
		text-align: center;
	}
	.cardlineup-card .cardlineup-cardText01 {
		margin-top: 12px;
		text-align: center;
		font-size: 3.2rem;
	}
	.cardlineup-card .cardlineup-cardImage {
		margin-top: -14px;
		padding-top: 30px;
		padding-bottom: 2px;
		background: url("/gecard/mirrativ_cardlineup/img-files/index_bg02_pc.webp") no-repeat 45% top / 735px;
		text-align: center;
	}
	/* button */
	.cardlineup-button01 {
		position: relative;
		margin: 33px auto 0;
		width: fit-content;
		height: fit-content;
		text-align: center;
		border-radius: 50px;
	}
	.cardlineup-button01::before {
		content: '';
		position: absolute;
		top: 10px;
		left: 6px;
		width: 100%;
		height: 100%;
		border-radius: 50px;
		background-color: #cbf8f4;
		z-index: 0;
	}
	.cardlineup-button01 a {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		position: relative;
		min-width: 750px;
		min-height: 90px;
		padding: 5px 75px;
		border-radius: 50px;
		background-image: linear-gradient(90deg,#ff4ac1,#8727f3);
		text-align: center;
		font-size: 4rem;
		color: #fff;
		text-decoration: none;
		transition: 0.3s transform ease-out;
	}
	.cardlineup-button01 a::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 30px;
		width: 40px;
		height: 40px;
		margin-top: -20px;
		background: url("/gecard/mirrativ_cardlineup/img-files/index_ic01.webp") no-repeat 0 0 / contain;
	}
	.cardlineup-button01:hover a {
		transform: translate(6px,10px);
	}
	.cardlineup-button02 {
		margin-top: 42px;
		text-align: center;
	}
	.cardlineup-button02 a {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		position: relative;
		min-width: 750px;
		min-height: 90px;
		padding: 5px 80px;
		border-radius: 50px;
		background-image: linear-gradient(to right,#ff0052 0%,#ffce00 100%);
		background-position: 1% 100%;
		background-size: 100% auto;
		text-align: center;
		font-size: 4rem;
		color: #fff;
		text-decoration: none;
		transition: 0.3s transform ease-out;
	}
	.cardlineup-button02 a:hover {
		background-position: 1% 100%;
	}
	.cardlineup-button02 a::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50px;
		background: linear-gradient(to right, #ffce00 0%, #ff0052 100%);
		transition: 0.5s all ease;
		opacity: 1;
	}
	.cardlineup-button02 a:hover::before {
		opacity: 0;
	}
	.cardlineup-button02 a::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 30px;
		width: 40px;
		height: 40px;
		margin-top: -20px;
		background: url("/gecard/mirrativ_cardlineup/img-files/index_ic02.webp") no-repeat 0 0 / contain;
	}
	.cardlineup-button02 a .text {
		position: relative;
	}
}
@media screen and (max-width: 750px) {
	/* override
	------------------------------------------------------ */
	body {
		font-size: 1.3rem;
		background-color: #fff;
	}
	/* header
	------------------------------------------------------ */
	#header {
		padding: 0;
		background-color: #fff;
		border: none;
	}
	#headerLogo {
		padding: 7px 10px 8px;
	}
	#header #headerLogo img {
		width: auto;
		height: 20px;
	}
	/* layout
	------------------------------------------------------ */
	#mainContainer {
		margin-top: 0;
	}
	#mainContents{
		padding: 0 10px;
	}
	/* footer
	------------------------------------------------------ */
	#footer {
		width: 100%;
		margin-top: 0;
		padding: 0;
		border: none;
		background-color: #fff;
		text-align: center;
	}
	#footer .footerInner {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 28px;
		text-align: center;
	}
	#copyright {
		font-size: 0.8rem;
	}
	/* mainVisual
	------------------------------------------------------ */
	.mainVisual {
	}
	.mainVisual >:first-child {
		margin-top: 0 !important;
	}
	.mainVisual .mainVisualInner {
		background: url("/gecard/mirrativ_cardlineup/img-files/index_bg01_sp.webp") #fff no-repeat center top / 100%;
	}
	.mainVisual .mainVisualContent {
		padding: 28px 10px 40px;
	}
	.mainVisual .mainVisualContent >:first-child {
		margin-top: 0 !important;
	}
	.mainVisual .mainVisualTitle {
		margin-top: 15px;
		text-align: center;
	}
	.mainVisual .mainVisualText01 {
		text-align: center;
		margin-top: 15px;
		padding: 20px 10px;
		background-image: linear-gradient(to right,#27cbb3 0%,#14bdcc 100%);
	}
	.mainVisual .mainVisualText02 {
		margin-top: 5px;
		text-align: center;
		font-size: 1.4rem;
		line-height: 1.4;
	}
	.mainVisual .mainVisualText03 {
		margin-top: 11px;
		text-align: center;
		font-size: 1.2rem;
		line-height: 1.5;
	}
	.mainVisual .mainVisualLead01 {
		margin-top: 10px;
		text-align: center;
		font-size: 2.1rem;
		font-weight: bold;
	}
	.mainVisual .mainVisualCardWrap {
		display: flex;
		justify-content: center;
		flex-flow:  row-reverse wrap-reverse;
		gap: 4px 5px;
		width: 241px;
		margin: 10px auto 0;
	}
	.mainVisual .mainVisualCard {
		width: 77px;
	}

	/* module
	------------------------------------------------------ */
	/* section */
	.cardlineup-section01 {
		margin: 0 -10px;
		padding: 54px 10px 30px;
		background: linear-gradient(90deg, #29ccb1, #14bdcc) no-repeat 0 0 / 100%;
	}
	.cardlineup-section01 >:first-child {
		margin-top: 0 !important;
	}
	/* card */
	.cardlineup-card {
		margin-top: 15px;
		padding: 1px 0 20px;
		border-radius: 5px;
		background-color: rgba(255,255,255,0.7);
	}
	.cardlineup-card .cardlineup-cardTitle {
		margin-top: -30px;
		padding: 0 10px;
		text-align: center;
	}
	.cardlineup-card .cardlineup-cardText01 {
		margin-top: 15px;
		padding: 0 10px;
		text-align: center;
		font-size: 1.9rem;
		line-height: 1.1;
	}
	.cardlineup-card .cardlineup-cardImage {
		margin-top: 2px;
		padding: 15px 10px 1px;
		background: url("/gecard/mirrativ_cardlineup/img-files/index_bg02_sp.webp") no-repeat 50% 50% / contain;
		text-align: center;
	}
	/* button */
	.cardlineup-button01 {
		position: relative;
		margin: 17px 10px 0;
		text-align: center;
		border-radius: 50px;
	}
	.cardlineup-button01::before {
		content: '';
		position: absolute;
		top: 5px;
		left: 3px;
		width: 100%;
		height: 100%;
		border-radius: 50px;
		background-color: #cbf8f4;
		z-index: 0;
	}
	.cardlineup-button01 a {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		min-height: 45px;
		padding: 3px 35px;
		border-radius: 50px;
		background-image: linear-gradient(90deg,#ff4ac1,#8727f3);
		text-align: center;
		font-size: 2rem;
		color: #fff;
		text-decoration: none;
	}
	.cardlineup-button01 a::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 10px;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		background: url("/gecard/mirrativ_cardlineup/img-files/index_ic01.webp") no-repeat 0 0 / contain;
	}
	.cardlineup-button02 {
		margin: 18px 10px 0;
		text-align: center;
	}
	.cardlineup-button02 a {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		min-height: 45px;
		padding: 5px 35px;
		border-radius: 50px;
		background-image: linear-gradient(to right,#ffce00 0%,#ff0052 100%);
		background-position: 1% 100%;
		background-size: 100% auto;
		text-align: center;
		font-size: 2rem;
		color: #fff;
		text-decoration: none;
	}
	.cardlineup-button02 a::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 10px;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		background: url("/gecard/mirrativ_cardlineup/img-files/index_ic02.webp") no-repeat 0 0 / contain;
	}
	.cardlineup-button02 a .text {
		position: relative;
	}
}