@charset "UTF-8";

h2 span {
	color: #E75B8E;
	font-size: 115%;
}

#toha .subContents > div {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
#toha .subContents > div figure {
	width: 360px;
}
#toha .subContents > div figure img {
	width: 100%;
}
#toha .subContents > div .text {
	font-size: 1.067rem;
	width: 670px;
}

#merit ol {
	width: 45em;
	margin: 40px auto 50px;
	counter-reset: index 0;
}
#merit ol li {
	font-size: 1.3rem;
	margin: 0 0 1em;
	padding: 0 0 0 8em;
	position:relative;
}
#merit ol li span {
	color: #E75B8E;
	font-weight: bold;
	font-size: 120%;
}
#merit ol li::after {
	counter-increment: index 1;
	content: 'メリット0'counter(index);
	color: #FFF;
	font-size: 87.5%;
	background: #E75B8E;
	border-radius: 2em;
	padding: 3px 1.5em;
	position: absolute;
	top: 3px;
	left: 0;
}
#merit .text {
	margin: 0 70px;
}

#points .subContents > ul {
	margin: 50px 70px 0;
}
#points .subContents > ul > li:not(:last-child) {
	margin: 0 0 80px;
}
#points h3 {
	font-size: 2rem;
	margin: 0 0 30px;
	padding-left: 64px;
	position: relative;
}
#points h3::after {
	content: " ";
	width: 42px;
	height: 42px;
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	top: 0;
	left: 0;
}
#points .subContents > ul > li.mitsukaru h3::after {
    background-image: url(/App_Contents/images/about/points_s_01.png);
}
#points .subContents > ul > li.chance h3::after {
    background-image: url(/App_Contents/images/about/points_s_02.png);
}
#points .subContents > ul > li.taisei h3 { padding-left: 50px; }
    #points .subContents > ul > li.taisei h3::after {
        width: 28px;
        background-image: url(/App_Contents/images/about/points_s_03.png);
    }

#points .subContents > ul > li .nara {
	background: #fff6f9;
	border: solid 1px #EEE;
	margin: 50px 0 0 0;
	padding: 50px 30px 30px;
	position: relative;
}
#points .subContents > ul > li .nara::after {
	content: "フィオーレパーティーなら";
	color: #FFF;
	font-size: 1.06rem;
	font-weight: bold;
	background: #E75B8E;
	border-radius: 2em;
	padding: 5px 3em;
	position: absolute;
	top: -1.2em;
	left: 50%;
	transform: translateX(-50%);
}
#points .subContents > ul > li .nara li {
	font-size: 1.25rem;
}
#points .subContents > ul > li .nara li span {
	color: #E75B8E;
	font-weight: bold;
	font-size: 120%;
}

#points .subContents > ul > li.mitsukaru .nara ul {
	display: flex;
	justify-content: center;
}
#points .subContents > ul > li.mitsukaru .nara ul li {
	margin: 0 1em;
}
#points .subContents > ul > li.chance .nara ul {
	width: 38em;
	margin: 0 auto;
}
#points .subContents > ul > li.chance .nara ul li:not(:last-child) {
	margin: 0 0 15px;
}
#points .subContents > ul > li.chance .nara ul li:first-child {
	position: relative;
}
    #points .subContents > ul > li.chance .nara ul li:first-child::after {
        content: " ";
        width: 48px;
        height: 42px;
        background: url(/App_Contents/images/about/s_hatsu.png) no-repeat;
        position: absolute;
        top: -2px;
        left: -58px;
    }
#points .subContents > ul > li.taisei .nara ul {
	width: 36em;
	margin: 0 auto;
}
#points .subContents > ul > li.taisei .nara ul li:not(:last-child) {
	margin: 0 0 15px;
}



/* FOR smartphone landscape
***************************************************************************/
@media screen and (max-width:899px) {

	h2 span {
	}

	#toha .subContents > div {
		display: block;
	}
	#toha .subContents > div figure {
		width: 80%;
		margin: 0 auto 3vw;
	}
	#toha .subContents > div figure img {
	}
	#toha .subContents > div .text {
		font-size: 1.067rem;
		width: 100%;
	}

	#merit ol {
		width: 100%;
		margin: 10vw 0 0;
	}
	#merit ol li {
		font-size: 1.1rem;
		margin: 0 0 1.5em;
		padding: 1.8em 0 0 0;
		position:relative;
	}
	#merit ol li span {
	}
	#merit ol li::after {
		top: 0;
	}
	#merit .text {
		border-top: solid 1px #DDD;
		margin: 0;
		padding: 5vw 0 0 0;
	}

	#points .subContents > ul {
		margin: 10vw 0 0;
	}
	#points .subContents > ul > li:not(:last-child) {
		margin: 0 0 13vw;
	}
	#points h3 {
		font-size: 1.5rem;
		margin: 0 0 3vw;
		padding-left: 40px;
		position: relative;
	}
	#points h3::after {
		content: " ";
		width: 30px;
		height: 30px;
		background-size: 100% auto;
	}
	#points .subContents > ul > li.mitsukaru h3::after { }
	#points .subContents > ul > li.chance h3::after {  }
	#points .subContents > ul > li.taisei h3 { padding-left: 38px; }
	#points .subContents > ul > li.taisei h3::after { width: 22px; }

	#points .subContents > ul > li .nara {
		margin: 10vw 0 0 0;
		padding: 10vw 5vw 5vw;
	}
	#points .subContents > ul > li .nara::after {
		font-size: .9rem;
		width: 13em;
		padding: 5px 2em;
		position: absolute;
	}
	#points .subContents > ul > li .nara li {
		font-size: 1.1rem;
	}
	#points .subContents > ul > li .nara li span {
	}

	#points .subContents > ul > li.mitsukaru .nara ul {
		display: block;
	}
	#points .subContents > ul > li.mitsukaru .nara ul li {
		margin: 0;
	}
	#points .subContents > ul > li.mitsukaru .nara ul li:not(:last-child) {
		margin: 0 0 .5em;
	}
	#points .subContents > ul > li.chance .nara ul {
		width: auto;
		margin: 0;
	}
	#points .subContents > ul > li.chance .nara ul li:not(:last-child) {
		margin: 0 0 .5em;
	}
	#points .subContents > ul > li.chance .nara ul li:first-child {
	}
	#points .subContents > ul > li.chance .nara ul li:first-child::after {
		width: 34px;
		height: 28px;
		background-size: 100% auto;
		top: -25px;
		left: -20px;
		transform: rotate(-10deg);
	}
	#points .subContents > ul > li.taisei .nara ul {
		width: auto;
		margin: 0;
	}
	#points .subContents > ul > li.taisei .nara ul li:not(:last-child) {
		margin: 0 0 .5em;
	}

}