@charset "utf-8";
/* ===== base ===== */
#membercp {
	overflow: hidden;
	font-size: 14px;
	color: #000;
}
#membercp img {
	width: 100%;
	height: auto;
}
#membercp p {
	color: #000;
	line-height: 1.6;
}
#membercp section {
	padding: 2em 0;
}
#membercp .inner {
	overflow: hidden;
	width: 94%;
	max-width: 960px;
	margin: 0 auto;
}
#membercp .containerInner::after { content: ''; display: block; clear: both; }
#membercp .note {
	font-size: 12px;
}
#membercp .note li {
	line-height: 1.6;
	text-indent: -1.3em;
	padding-left: 1.3em;
}
@media (max-width: 767px) {
	#membercp .pc {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	#membercp {
		font-size: 16px;
	}
	#membercp .sp {
		display: none;
	}
	#membercp section {
		padding: 3em 0;
	}
}

/* ===== #kv ===== */
#membercp #kv {
	background: #66d4ff url("../img/kv_bg1.png") left -10% bottom no-repeat;
	background-size: 40% auto;
}
#membercp #kv .bg {
	background: url("../img/kv_bg2.png") right -10% bottom no-repeat;
	background-size: 40% auto;
}
#kv h1 {
	width: 98%;
	max-width: 800px;
	margin: 0 auto;
	padding: 4vw 0;
}
@media (max-width: 767px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 1024px) {
	#membercp #kv {
		background: #66d4ff url("../img/kv_bg.png") center bottom no-repeat;
		background-size: 1350px auto;
	}
	#membercp #kv .bg {
		background: none;
	}
	#kv h1 {
		padding: .2em 0;
	}
}

/* ===== #period ===== */
#membercp #period {
	text-align: center;
	background: #e10064;
	padding: .8em 0 .5em;
}
#membercp #period p {
	font-weight: bold;
	color: #fff;
}
#membercp #period p span {
	display: inline-block;
	position: relative;
	top: -.1em;
	background: #fff;
	color: #e10064;
	border-radius: 1em;
	padding: .1em .7em;
}
@media (max-width: 767px) {
	#membercp #period p span {
		margin-bottom: .5em;
	}
}
@media screen and (min-width: 768px) {
	#membercp #period {
		padding: .8em 0;
	}
	#membercp #period p {
		font-size: 25px;
	}
	#membercp #period p span {
		font-size: 21px;
		margin-right: .5em;
	}
}

/* ===== #detail ===== */
#membercp #detail .ttl {
	text-align: center;
	background: #e10064 url("../img/detail_ttl_bg.png") left bottom no-repeat;
	background-size: 14% auto;
	border-top-left-radius: 1.5em;
	border-top-right-radius: 1.5em;
	margin-bottom: 1em;
	padding: 1.5em 0;
}
#membercp #detail .heading {
	position: relative;
	background: #f8dd4e;
	border-radius: .4em;
	text-align: center;
	font-size: 130%;
	font-weight: bold;
	margin-bottom: .5em;
	padding: .5em;
}
#membercp #detail .heading::before {
	position: absolute;
	content: '';
	display: block;
	width: 0;
	height: 0;
	bottom: -.8em;
	left: 50%;
	border-left: 1em solid transparent;
	border-right: 1em solid transparent;
	border-top: .8em solid #f8dd4e;
	margin-left: -1em;
}
#membercp #detail dl {
	padding-bottom: 1em;
}
#membercp #detail dl dt {
	position: relative;
	display: inline-block;
	top: 1em;
	left: .8em;
	color: #fff;
	font-size: 105%;
	background: #e10064;
	border-radius: .9em;
	padding: .25em 1em;
}
#membercp #detail dl dd {
	background: #f8f5f5;
	line-height: 1.8;
	border-radius: .6em;
	padding: 1em;
	padding-top: 2em;
}
#membercp #detail dl dd ul li {
	text-indent: -1.5em;
	padding-left: 1.5em;
}
#membercp #detail dl dd ul li::before {
	content: '●';
	color: #ebc216;
	padding-right: .5em;
}
#membercp #detail dl dd ul li a {
    color: #70accb;
}
@media (max-width: 767px) {
}
@media screen and (min-width: 768px) {
	#membercp #detail .ttl img {
		max-width: 500px;
		margin: 0 auto;
	}
}
@media screen and (min-width: 1024px) {
	#membercp #detail .ttl img {
		max-width: 657px;
	}
	#membercp #detail dl dt {
		top: 1.35em;
		left: 3.7em;
	}
	#membercp #detail dl dd {
		margin-top: .4em;
		margin-bottom: .4em;
		padding: 3em 4em 2em;
	}
}