@charset "UTF-8";

._hide{
	display: none;
}

.sec01 {
	position: relative;
	background: #fff1a2;
	border-bottom: 4px solid #fff;
	padding: 2em;
}

.accd:hover img {
	opacity: 0.6;
	transition: .3s;
}

.accd img {
	opacity: 1;
	transition: .3s;
}

.sec01:before,
.sec01:after,
.sec02:before,
.sec02:after {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 1;
}

.sec02 {
	padding: 2em;
	position: relative;
	background: #fae9ec;
	border-bottom: 4px solid #fff;
}

.sec03 {
	padding: 2em;
	position: relative;
	background: #d3e8c4;
	border-bottom: 4px solid #fff;
}

.sec04 {
	padding: 2em;
	position: relative;
	background: #fef0a2;
	border-bottom: 4px solid #fff;
}

.sec01:after {
	background: #fff1a2;
}

.sec02:after {
	background: #fae9ec;
}

.sec01:after {
	content: "";
	width: 30px;
	height: 30px;
	transform: rotate(-45deg) translateY(-50%);
	bottom: -25px;
}

.sec01:before {
	content: "";
	width: 33px;
	height: 33px;
	background: #fff;
	transform: rotate(-45deg) translateY(-50%);
	bottom: -31px;
}

.sec02_list li {
	background: url(/msppoint/kidsclub/common/image/20230401/join/arrow.png) no-repeat center bottom;
	background-size: 4em;
}

.sec01_list li:last-child,
.sec02_list li:last-child {
	background: none;
}

.sec01_list li img,
.sec02_list li img {
	max-width: 580px;
	width: 100%;
	margin: 0 auto;
}

.sec01 .join_title01,
.sec02 .join_title01,
.sec04 .join_title01 {
	position: relative;
}

.sec01 .join_title01:after {
	background: url(/msppoint/kidsclub/common/image/20230401/join/join_icon01.png);
	background-size: contain;
	content: "";
	width: 2em;
	height: 2em;
	display: inline-block;
	transform: rotateX(0);
	transition: .3s;
	position: absolute;
	right: 0;
}

.sec02 .join_title01:after {
	background: url(/msppoint/kidsclub/common/image/20230401/join/join_icon02.png);
	background-size: contain;
	content: "";
	width: 2em;
	height: 2em;
	display: inline-block;
	transform: rotateY(0);
	transition: .3s;
	position: absolute;
	right: 0;
}

.sec04 .join_title01:after {
	background: url(/msppoint/kidsclub/common/image/20200331/join/join_icon04.png);
	background-size: contain;
	content: "";
	width: 2em;
	height: 2em;
	display: inline-block;
	transform: rotateY(0);
	transition: .3s;
	position: absolute;
	right: 0;
}

.sec01 .join_title01.selected:after,
.sec02 .join_title01.selected:after,
.sec04 .join_title01.selected:after {
	transform: rotateZ(180deg);
	transition: .3s;
}

dl.sec_lead {
	margin: 0 auto 2em;
	position: relative;
	overflow: hidden;
	width: 560px;
}

dl.sec_lead dt {
	width: 20%;
	float: left;
}

dl.sec_lead dt img {
	width: 90%;
	display: block;
}

dl.sec_lead dd {
	float: left;
	width: 80%;
}

p.title {
	background: #f7e07b;
	max-width: 480px;
	text-align: center;
	padding: 0.5em;
	border-radius: 0.5em;
	font-weight: bold;
	line-height: 1.1;
	margin: 1em auto;
}

.sec02_list li a {
	background: #e7869f;
	padding: 0.5em;
	border-radius: 0.5em;
	margin: 0 auto 0;
	color: #fff;
	font-weight: bold;
	display: block;
	max-width: 360px;
	width: 100%;
	opacity: 1;
	transition: .3s;
}

.sec02_list li a:hover {
	opacity: 0.5;
	transition: .3s;
}

@media screen and (min-width: 768px) {

	dl.sec_lead dd p {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	._sp {
		display: none !important;
	}

	.join_title01 img {
		width: 40%;
	}

	.join_title01 img.long {
		width: 80%;
	}

	.sec01_title img,
	.sec02_title img,
	.sec04_title img {
		width: 40%;
		cursor: pointer;
		vertical-align: bottom;
		opacity: 1;
		transition: .3s;
	}

	.sec01_title:hover img,
	.sec02_title:hover img,
	.sec04_title:hover img {
		opacity: 0.6;
		transition: .3s;
	}

	.sec01_list {
		padding-top: 2em;
	}

	.sec02_list {
		padding-top: 2em;
	}

	.sec01_list li {
		text-align: center;
		padding: 1em 0 2em;
	}

	.sec02_list li {
		text-align: center;
		padding: 1em 0 4em;
	}

	.sec01_list li:last-child,
	.sec02_list li:last-child {
		padding-bottom: 2em;
	}


	.sec03Wrap {
		margin: 2em 0;
		overflow: hidden;
		position: relative;
	}

	.sec01_list p.app {
		position: relative;
	}

	.sec03Wrap p img {
		width: 90%;
		margin: 0 auto;
		display: block;
	}

	.sec01_list p.app a {
		position: absolute;
		display: block;
	}

	.sec01_list p.app small {
		margin: 0.5em 1.5em;
	}

	.sec01_list p.app a.ios {
		top: 46%;
		left: 51.2%;
		width: 19.5%;
		height: 47%;
	}

	.sec01_list p.app a.and {
		top: 46%;
		left: 15.5%;
		width: 19.5%;
		height: 47%;
	}

	.sec04 p {
		margin: 4em 0 2em;
		overflow: hidden;
		position: relative;
	}

	.sec04 p img {
		width: 55%;
		display: block;
		margin: 0 auto;
	}

	.sec01_list li a,
	.sec02_list li a {
		font-size: 150%;
	}

	.sec01_list li p.left {
		text-align: left;
		width: 70%;
		display: block;
		margin: 0 auto;
	}

	.sec01_list li p img.small {
		width: 55%;
		display: block;
		margin: 0 auto;
	}

}

@media screen and (max-width: 768px) {

	._pc {
		display: none !important;
	}

	.join-section {
		max-width: 100%;
		width: auto;
	}

	.join_title01 {
		margin: 0.75em 0;
	}

	.join_title01 img {
		width: 90%;
	}

	.sec01, .sec02, .sec03, .sec04 {
		padding: 0.5em;
	}

	.sec01_title img,
	.sec02_title img,
	.sec04_title img {
		width: 50%;
		vertical-align: bottom;
	}


	.sec01_list,
	.sec02_list {
		padding: 1em;
	}


	.sec01_list {
		padding-top: 0em;
	}

	.sec02_list {
		padding-top: 0em;
	}

	.sec01_list li {
		padding: 0.5em 0;
	}

	.sec02_list li {
		padding: 0.5em 0 2em;
	}

	.sec01_list li {
		background-size: 2em;
	}

	.sec02_list li {
		background-size: 2em;
	}

	.sec01_list li:last-child,
	.sec02_list li:last-child {
		padding: 0.5em 0;
	}

	.sec01_list li a,
	.sec02_list li a {
		font-size:110%;
		text-align: center;
		margin-top: 0.5em;
		box-sizing: border-box;
	}

	.sec03Wrap p {
		margin: 1em 2em;
		position: relative;
	}

	.sec03Wrap p:last-child {
		margin: 1em 0;
	}

	.sec01_list p.app {
		position: relative;
	}

	.sec01_list p.app a {
		position: absolute;
		display: block;
	}

	.sec01_list p.app a.ios {
		top: 72%;
		left: 0;
		width: 59%;
		height: 22%;
	}

	.sec01_list p.app a.and {
		top: 18%;
		left: 0;
		width: 58%;
		height: 23%;
	}

	.sec01_list p.app small {
		font-size: 50%;
	}

	.sec01 .join_title01:after,
	.sec02 .join_title01:after,
	.sec04 .join_title01:after {
		width: 1em;
		height: 1em;
		top: 50%;
		transform: translateY(-50%);
	}

	.sec01 .join_title01.selected:after,
	.sec02 .join_title01.selected:after,
	.sec04 .join_title01.selected:after {
		transform: translateY(-50%) rotateZ(180deg);
	}

	.sec04 p {
		padding: 1em;
	}

	dl.sec_lead {
		margin: 1em;
		font-size: 70%;
		width: auto;
		max-width: auto;
	}

	p.title {
		font-size: 80%;
		margin: 1em;
	}

	.sec01_list li p {
		font-size: 60%;
	}

}

.sec01_list li p strong {
	color: #522906;
	font-weight: 700;
}

.sec01_list li p.app {
}