@charset "utf-8";

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

/* box01
---------------------------------------------- */
#box01 .rBox .flex {align-items: flex-end;}

/* box02
---------------------------------------------- */
#box02 #dutiesWrap section .example {
	color: #EC0F85;
	font-weight: bold;
	position: relative;
}
#box02 #dutiesWrap section .example span {
	background-color: #F8F8F8;
	position: relative;
	z-index: 2;
}
#box02 #dutiesWrap section .dutiesHead {
	background-color: #EC0F85;
	color: #fff;
	text-align: center;
	border-top-left-radius: 6px;
	border-bottom-right-radius: 6px;
}
#box02 #dutiesWrap section .dutiesHead span:first-of-type {padding-right: 0.3em;}
#box02 #dutiesWrap section .dutiesHead span:last-of-type {
	font-family: "skolar-sans-latin", sans-serif;
	font-weight: 400;
	font-style: italic;
	line-height: 0.8em;
}
#box02 #dutiesWrap section .example:after {
	content: "";
	display: inline-block;
	background-color: #FFC1E2;
	width: 100%;
	height: 1px;
	vertical-align: middle;
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 1;
}

/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px){
	
	/* box01
	---------------------------------------------- */
	#box01 .lBox {margin-bottom: 0.8em;}
	#box01 .rBox .flex {justify-content: space-between;}
	#box01 .rBox #image01 {margin: 0.5em 0 1em;}
	#box01 .rBox #image02 {width: 70%;}
	#box01 .rBox #image03 {width: 25%;}
	#box01 .rBox img {width: 100%;}
	
	/* box02
	---------------------------------------------- */
	#box02 {
		margin-top: 5em;
		padding-bottom: 4em;
	}
	#box02 .grayBorder {padding: 1em;}
	#box02 #dutiesWrap {margin: 2em 0;}
	#box02 #dutiesWrap section {
		background-color: #F8F8F8;
		width: 100%;
		margin-bottom: 1em;
		padding: 1.5em;
	}
	#box02 #dutiesWrap section .dutiesHead {
		width: 70px;
		padding: 0.2em 0 0.1em;
	}
	#box02 #dutiesWrap section .dutiesHead span:last-of-type {
		font-size: 1.3em;
		line-height: 1em;
	}
	#box02 #dutiesWrap section .example span {padding-right: 0.8em;}
	#box02 #dutiesWrap section .fontChibi {
		font-size: 1.15em;
		line-height: 1.5em;
		margin: 0.8em 0 1.3em;
	}
	#box02 #dutiesWrap section .example {font-size: 1.1em;}
	#box02 #dutiesWrap section ul {margin-top: 1em;}
	#box02 #dutiesWrap section ul li {line-height: 2em;}
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px){
	
	/* box01
	---------------------------------------------- */
	#box01 .lBox {
		max-width: 600px;
		width: 66%;
	}
	#box01 .flexBox01 {justify-content: space-between;}
	#box01 .rBox {
		width: 34%;
		margin-left: 5%;
	}
	#box01 .rBox #image01 {max-width: 360px;}
	#box01 .rBox #image02 {
		max-width: 240px;
		width: 70%;
	}
	#box01 .rBox #image03 {
		max-width: 107px;
		width: 30%;
		margin: 0 -15px 0 5%;
	}
	#box01 .rBox .flex {margin-top: 8.5%;}
	
	/* box02
	---------------------------------------------- */
	#box02 {padding: 10.9em 0 8.9em;}
	#box02 #dutiesImg img {
		max-width: 913px;
		width: 100%;
	}
	#box02 .grayBorder {
		text-align: center;
		padding: 4%;
	}
	
	/* dutiesWrap */
	#box02 #dutiesWrap {margin: 3em 0 4em;}
	#box02 #dutiesWrap.flex {flex-wrap: wrap;}
	#box02 #dutiesWrap section {
		background-color: #F8F8F8;
		width: 49.1%;
		padding: 3% 3.6%;
		margin-bottom: 1.8%;
	}
	#box02 #dutiesWrap section:nth-child(odd) {margin-right: 1.8%;}
	#box02 #dutiesWrap section .dutiesHead {
		width: 78px;
		padding: 0.3em 0 0.2em;
	}
	#box02 #dutiesWrap section .dutiesHead span:first-of-type {font-size: 0.88em;}
	#box02 #dutiesWrap section .dutiesHead span:last-of-type {font-size: 1.5em;}
	#box02 #dutiesWrap section .fontChibi {
		font-size: 1.25em;
		line-height: 1.8em;
		margin: 0.5em 0 1.5em;
	}
	#box02 #dutiesWrap section .example {
		font-size: 1.13em;
		line-height: 1.1em;
	}
	#box02 #dutiesWrap section .example span {padding-right: 0.8em;}
	#box02 #dutiesWrap section ul {margin-top: 1em;}
	#box02 #dutiesWrap section ul li {line-height: 2.25em;}
}