@charset 'utf-8';


#contentblock {
	position: relative;
}

#contentblock:before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	opacity: .3;
	background-image: url(../image/course/img-back-elementary-school-contentblock-features.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding-top: 50px;
	position: absolute;
	top: 0;
}

body.pc #contentblock:before {
	background-attachment: fixed;
}

.presentationgroup {
	position: relative;
}

.presentationgroup.header > .blockheader {
	padding-top: 50px;
}

.blockheader .shoulder {
	color: #e94553;
	font-size: 1.6em;
	font-family: 'Helvetica Neue', Helvetica, Avenir, san-serif;
	font-weight: 700;
}

.presentation > .inner > .brick {
	padding: 20px;
}


/* 
.presentation .toggleelem .sentence:not(:last-child) {
	padding-bottom: 5px;
}
 */

.presentation.toggleblock .girdblock > .sentence {
	padding-bottom: 5px;
}

.presentation .togglehead {
	border: none;
	background: #e7ce52;
}

.presentation.narrow > .inner {
	max-width: 1000px;
}

#resultsblock {
	background: #fff;
}

#resultsblock > .inner {
	padding-left: 30px;
	padding-right: 30px;
}


.presentation .brick .columns {
	display: flex;
	flex-direction: column;
}

.presentation .brick .columns:not(:last-child) {
	margin-bottom: 50px;
}

.presentation .brick .column.media {
	display: block;
	width: 100%;
	margin-bottom: 30px;
	padding: 0;
}

.presentation .brick .column.enclosed {
	display: block;
	width: 100%;
	padding: 0;
}

.presentation .column.media figure {
	width: 100%;
	padding-top: 50%;
	text-align: center;
	overflow: hidden;
	position: relative;
}

.presentation .column.media figure > span {
	display: block;
	overflow: hidden;
	transform: translateY(0);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.presentation .media figure img {
	display: block;
	width: 100%;
	height: auto;
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
	left: 0;
}

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

	.presentation .brick .columns {
		flex-direction: row;
/* 		align-items: center; */
	}

	.presentation .brick .column.media {
		width: 35%;
		margin-bottom: 0;
	}

	.presentation .brick .column.enclosed {
		width: 65%;
		padding-left: 50px;
	}

/* 
	.presentation .brick .columns:nth-child(even) .column.media {
		order: 2;
	}

	.presentation .brick .columns:nth-child(even) .column.enclosed {
		order: 1;
		padding-left: 0;
		padding-right: 50px;
		text-align: right;
	}
 */

	.presentation .column.media figure {
		width: 100%;
		padding-top: 0;
		text-align: center;
		overflow: hidden;
		position: relative;
	}

	.presentation .column.media figure > span {
		display: inline-block;
		width: 100%;
		padding: 0;
		transform: translateY(0);
		position: relative;
		top: auto;
		left: auto;
	}

	.presentation .column.media figure img {
		display: inline;
		transform: translateY(0);
		position: relative;
		top: auto;
		left: auto;
	}
}



.presentationgroup.content {
/* 	background: rgba(251,246,224,.7); */
	background: rgba(253,250,237,.8);
}

.presentationgroup.content .chapter:nth-child(even) {
	background: rgba(255,255,255,.5);
}

.presentation.chapter.toggleblock {
	background: #fff;
}

.presentation.chapter.plan {
	background: rgba(255,255,255,.7);
}

.presentation .sect:not(:last-child) {
	margin-bottom: 5em;
}

.presentation .sect h3 {
	border-bottom: 1px solid #e7ce52;
}

.presentation .sect h3 span {
	display: inline-block;
	padding-bottom: .5em;
	position: relative;
}

.presentation .sect h3 span:after {
	display: inline-block;
	content: '';
	width: 100%;
	height: 5px;
	background: #e7ce52;
	position: absolute;
	left: 0;
	bottom: -5px;
}

.presentation .sect p {
	font-size: 1.2em;
}

.presentation .sect .voice .sentence {
	padding-bottom: 2em;
	border-bottom: 1px solid #d8caf3
}

.presentation .sect .voice .sentence:not(:last-child) {
	margin-bottom: 2em;
}

#contentblock .lead {
	padding: 0;
	padding-bottom: 5em;
}

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

	.presentationgroup.header {
		text-align: center;
	}

	.chapter .sentence.lead {
		text-align: center;
	}
}


.pageindex li a {
	color: #000;
}

.pageindex li a:hover,
.pageindex li a.hover {
	color: #666;
	text-decoration: none;
}


/* 
body#middle-school .pageindex li a {
	color: #f26d8c;
}

body#middle-school .pageindex li a:hover,
body#middle-school .pageindex li a.hover {
	color: #ff9db4;
}
 */

body#middle-school #contentblock:before {
	opacity: .2;
	background-image: url(../image/course/img-back-middle-school-contentblock-features.jpg);
	background-position: 70% center;
}

body#middle-school .presentationgroup.content {
	background: rgba(255,241,244,.8);
}

body#middle-school .presentation .togglehead {
	background: #ff7394;
	color: #fff;
}

body#middle-school .presentation .sect h3 {
	border-bottom-color: #ff7394;
}

body#middle-school .presentation .sect h3 span:after {
	background: #ff7394;
}

/* 
body#high-school .pageindex li a {
	color: #b198dd;
}

body#high-school .pageindex li a:hover,
body#high-school .pageindex li a.hover {
	color: #cfbcf0;
}
 */

body#high-school #contentblock:before {
	opacity: .2;
	background-image: url(../image/course/img-back-high-school-contentblock-features.jpg);
	background-position: 80% center;
}

body#high-school .presentationgroup.content {
	background: rgba(248,245,253,.8);
}

body#high-school .presentation .togglehead {
	background: #baa0e9;
	color: #fff;
}

body#high-school .presentation .sect h3 {
	border-bottom-color: #baa0e9;
}

body#high-school .presentation .sect h3 span:after {
	background: #baa0e9;
}


.presentation .sect .resultsblock {
	font-size: .65rem;
}

.presentation .sect .togglebtn {
	margin-top: 20px;
	margin-bottom: 20px;
	background: #baa0e9;
}

.presentation .sect .togglebtn.show,
.presentation .sect .togglebtn.hover {
	background: #d8caf3;
}


.presentation .balloonitems .balloon {
	display: flex;
	padding: 5px 0;
	font-size: 1em;
}

.presentation .balloonitems .balloon > div:first-child {
	width: 48px;
	height: 48px;
	position: relative;
}

.presentation .balloonitems .balloon > div:last-child {
	width: calc(100% - 48px);
	padding-left: 20px;
	position: relative;
}

.presentation .balloonitems .balloon .foto {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 3px;
	border-radius: 99px;
	background: #f2f2f2;
	overflow: hidden;
}

.presentation .balloonitems .balloon .foto span.icon {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px;
	border-radius: 99px;
	background: #f8f8f8;
	overflow: hidden;
}

.presentation .balloonitems .balloon .foto span.icon span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 99px;
}

.presentation .balloonitems .balloon .foto span img {
	width: 100%;
	height: auto;
}

.presentation .balloonitems .balloon .speech {
	width: 100%;
	background: #eaeaea;
	padding: 10px 20px;
}

.presentation .balloonitems .balloon .speech p {
}

.presentation .balloonitems .balloon .speech:before {
	display: block;
	content: '';
	width: 0;
	height: 0;
	margin: 0 auto;
	border-style: solid;
	border-width: 10px 20px 10px 0;
	border-color: transparent #eaeaea transparent transparent;
	position: absolute;
	top: 14px;
	left: 5px;
}

.presentation .balloonitems .balloon:nth-child(even) .speech {
	background: #f8f8f8;
}

.presentation .balloonitems .balloon:nth-child(even) .speech:before {
	border-right-color: #f8f8f8;
}


.presentation .balloonitems .balloon .speech {
	background: #eae2f8;
}

.presentation .balloonitems .balloon .speech:before {
	border-right-color: #eae2f8;
}

.presentation .balloonitems .balloon:nth-child(even) .speech {
	background: #f2eefb;
}

.presentation .balloonitems .balloon:nth-child(even) .speech:before {
	border-right-color: #f2eefb;
}

.presentation .balloonitems .balloon .foto {
	background: #d8caf3;
}

.presentation .balloonitems .balloon .foto span.icon {
	background: #eae2f8;
}

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

	.presentation .balloonitems .balloon {
		width: 90%;
		padding: 10px 0;
		font-size: 1.1em;
	}

	.presentation .balloonitems .balloon:nth-child(even) {
		margin-left: 10%;
	}

	.presentation .balloonitems .balloon > div:first-child {
		width: 60px;
		height: 60px;
	}

	.presentation .balloonitems .balloon > div:last-child {
		width: calc(100% - 60px);
		padding-left: 20px;
	}

	.presentation .balloonitems .balloon .speech {
	}

	.presentation .balloonitems .balloon .speech p {
		font-size: 1em;
	}

	.presentation .balloonitems .balloon .speech:before {
		top: 20px;
	}
}