@charset "utf-8";

/*===============================================
●共通
===============================================*/

.tit02 h2 {margin-bottom: 0.2em;}

/* exampleWrap
---------------------------------------------- */
#exampleWrap #karinImg {
	max-width: 73px;
	text-align: center;
	margin: -3.5em auto 1em;
}
#exampleWrap #exampleBox {
	display: flex;
	text-align: center;
}
#exampleWrap #exampleBox section h3 {
	font-family: "tbchibirgothicplusk-pro", sans-serif;
	font-style: normal;
	font-weight: 400;
}

/* startWrap
---------------------------------------------- */
.startWrap .startPala:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
}

/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px){
	
	/* topArea
	---------------------------------------------- */
	#topArea {padding-bottom: 2em;}
	
	/* exampleWrap
	---------------------------------------------- */
	#exampleWrap #exampleBox {
		flex-wrap: wrap;
		justify-content: center;
		padding: 0 1em 2em 1em;
	}
	#exampleWrap #karinImg {margin: -3.8em auto 1em;}
	#exampleWrap #exampleBox section {width: 47%;}
	#exampleWrap #exampleBox section:not(:last-of-type) {margin-bottom: 1.5em;}
	#exampleWrap #exampleBox section:nth-child(even) {margin-left: 6%;}
	#exampleWrap #exampleBox section h3 {
		font-size: 1.15em;
		margin-top: 0.5em;
	}
	#exampleWrap #exampleBox,
	#structureWrap div {
		max-width: 500px;
		margin: 0 auto;
	}
	
	/* structureWrap
	---------------------------------------------- */
	#structureWrap {
		margin-top: 2.5em;
		padding: 1.5em 1em;
	}
	
	/* IntroductionWrap
	---------------------------------------------- */
	#IntroductionWrap {margin: 4em 0 5em;}
	#IntroductionWrap section {margin: 2.5em 0 0;}
	#IntroductionWrap .imgFlexBox div p {margin-top: 0.5em;}
	#IntroductionWrap .imgFlexBox img {width: 100%;}
	
	/* startWrap
	---------------------------------------------- */
	.startWrap {margin-bottom: 4em;}
	.startWrap .startPala {max-width: 360px;}
	.startWrap .startPala:before {
		margin-left: -7px;
		border: 7px solid  transparent;
		border-top: 10px solid  #EC0F85;
	}
	.startWrap p {margin-bottom: 2em;}
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px){
	
	/* activityWrap
	---------------------------------------------- */
	#activityWrap {padding-bottom: 5.4em;}
	
	/* topArea
	---------------------------------------------- */
	#topArea {padding-bottom: 2.7em;}
	
	/* exampleWrap
	---------------------------------------------- */
	#exampleWrap #karinImg {
		max-width: 73px;
		text-align: center;
		margin: -3.5em auto 1em;
	}
	#exampleWrap #exampleBox {
		max-width: 940px;
		margin: 0 auto;
		display: flex;
		padding: 0 4% 4% 4%;
	}
	#exampleWrap #exampleBox section {width: 100%;}
	#exampleWrap #exampleBox section:not(:last-of-type){margin-right: 1%;}
	#exampleWrap #exampleBox section h3 {
		font-size: 1.3em;
		line-height: 1.25em;
		margin-top: 0.5em;
	}
	
	/* structureWrap
	---------------------------------------------- */
	#structureWrap {
		margin-top: 3.75em;
		padding: 5%;
	}
	#structureWrap div {
		max-width: 669px;
		margin: 0 auto;
	}
	
	/* IntroductionWrap
	---------------------------------------------- */
	#IntroductionWrap {margin: 8em 0;}
	#IntroductionWrap section {margin: 2.5em 0 3em;}
	#IntroductionWrap .imgFlexBox p {
		margin-top: 0.5em;
		line-height: 1.5em;
	}
	
	/* startWrap
	---------------------------------------------- */
	.startWrap {padding: 1.8em 3.1em 2.5em;}
	.startWrap .startPala {
		width: 500px;
		margin-top: -2.3em;
	}
	.startWrap .startPala:before {
		margin-left: -10px;
		border: 8px solid  transparent;
		border-top: 15px solid  #EC0F85;
	}
	.startWrap .tit02 h2 {
		line-height: 1.5em;
		margin-top: -0.2em;
		margin-bottom: 0.5em;
	}
	.startWrap p {margin-bottom: 1.7em;}
}