/* ==================== import ==================== */

@import url(../../common/css/contents.css);


/* ==================== cacaoclass-qanda ==================== */

.cacaoclass-qanda {
	position: relative;
	background-color: #ffdeba;
	background-image: url(../../common/images/bg_head.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
	padding-bottom: 40px;
}


@media (max-width: 640px) {
}


@media (min-width: 641px) {

	.cacaoclass-qanda {
		width: 758px;
		margin: 0 auto;
		padding-top: 20px;
	}

}


/* ==================== cacaoclass-qanda__head ==================== */

@media (max-width: 640px) {

	.cacaoclass-qanda .head {
		padding: 3%;
		text-align: center;
	}

	.cacaoclass-qanda .head h1 {
		margin: 0;
	}

	.cacaoclass-qanda .head h1 img {
		width: 60%;
	}

	.cacaoclass-qanda .head p {
		margin: 1em auto 0;
	}

	.cacaoclass-qanda .head p img {
		transform: translateX(4%);
		width: 90%;
	}

}


@media (min-width: 641px) {

	.cacaoclass-qanda .head {
		display: table;
		table-layout: fixed;
		width: 676px;
		margin: 0 auto;
	}

	.cacaoclass-qanda .head:after {
		content: none;
	}

	.cacaoclass-qanda .head>* {
		display: table-cell;
		vertical-align: bottom;
	}

	.cacaoclass-qanda .head h1 {
		width: 231px;
	}

	.cacaoclass-qanda .head p {
		text-align: right;
	}

	.cacaoclass-qanda .head p img {
		width: 388px;
	}

}


/* ==================== cacaoclass-qanda__topics ==================== */

.cacaoclass-qanda .topics h2 {
	position: relative;
	margin: 0;
	font-size: inherit;
}
.cacaoclass-qanda .topics img {
	font-size: 1em;
}

.cacaoclass-qanda .topics .text {
	background: white;
	color: black;
}

.cacaoclass-qanda .topics .text p {
	margin: 0;
	text-align: justify;
}

.cacaoclass-qanda .topics .text p,
.cacaoclass-qanda .topics .text p * {
	font-family: 'Hiragino Maru Gothic Pro', 'Meiryo', sans-serif;
}
.cacaoclass-qanda .topics .text p strong {
	color: #c25e00;
}


@media (max-width: 375px) {
	.cacaoclass-qanda .topics {
		font-size: 4vw;
	}
}

@media (max-width: 640px) {

	.cacaoclass-qanda .topics {
		font-size: 15px;
		margin: 0 1em 2em;
	}

	.cacaoclass-qanda .topics .topic:nth-of-type(n+2) {
		margin-top: 1.5em;
	}

	.cacaoclass-qanda .topics h2 {
		text-align: center;
	}
	.cacaoclass-qanda .topics h2 img {
		width: 15em;
	}

	.cacaoclass-qanda .topics .text {
		border-radius: 2em 2em 1.5em 1.5em;
		margin-top: -3.5em;
		padding: 4.5em 1.5em 1.5em;
	}

	.cacaoclass-qanda .topics .text p {
		font-size: 90%;
	}

}


@media (min-width: 641px) {

	.cacaoclass-qanda .topics {
		font-size: 20px;
	}

	.cacaoclass-qanda .topics {
		margin: 1.5em auto 0;
		padding: 0 1.5em;
	}

	.cacaoclass-qanda .topics .topic {
		display: flex;
		align-items: center;
	}
	.cacaoclass-qanda .topics .topic::after {
		content: none;
	}

	.cacaoclass-qanda .topics .topic:nth-of-type(n+2) {
		margin-top: 1.25em;
	}

	.cacaoclass-qanda .topics h2 {
		flex-shrink: 0;
		margin-right: -0.5em;
	}

	.cacaoclass-qanda .topics .topic-1 h2 {
		align-self: flex-start;
		margin-top: 1.5em;
	}

	.cacaoclass-qanda .topics h2 img {
		width: 11em;
	}

	.cacaoclass-qanda .topics .text {
		padding: 1.25em;
		border-radius: 1.25em;
	}

	.cacaoclass-qanda .topics .text p {
		font-size: 70%;
	}

}


/* ==================== cacaoclass-qanda__topics__topic-1 ==================== */

.cacaoclass-qanda .topics .topic-1 .text figure {
	margin: 1.5em auto 0.5em;
	text-align: center;
}
.cacaoclass-qanda .topics .topic-1 .text figure img {
	width: 360px;
	max-width: 100%;
}


.cacaoclass-qanda .topics .topic-1 .movie {
	border: 1px solid #c25e00;
}


@media (max-width: 640px) {
	.cacaoclass-qanda .topics .topic-1 .movie {
		margin: 2em auto 0;
	}
}


@media (min-width: 641px) {
	.cacaoclass-qanda .topics .topic-1 .movie {
		margin: 2em 1em 1em;
	}
}