/*
 * 全体的なリセット、基本設定
 */
:root {
	/* 基本的な色 */
	--primary-background      : #efdacf; /* h1.everypage の背景色 */
	--primary-border          : #eaa47d; /* h1.everypage のボーダー色 */
	--secondary-background    : #E6E6E7; /* div.box_noborder h2 の背景色 */
	--qa-container-border     : silver; /* div.qa_container のボーダー色 */
	--qa-question-background  : #d7f4d2; /* div#question の背景色 */
	--qa-answer-background    : #f0d7d7; /* div#answer_box の背景色 */
	--point-header-text-color : white; /* div#point h3 の文字色 */
	--mark-highlight          : #ffff66; /* mark のハイライト色 */
	--normal-header-border    : gray; /* h2.normal のボーダー色 */
	--right-control-color     : #428bca; /* span.right_control の文字色 */
	--showing-background      : #fdeaca; /* .showing の背景色 */
	--explanation-background  : #FDFFDF;

	/* テキスト強調色 */
	--text-red       : red;
	--text-yellow    : #e79708;
	--text-green     : green;
	--text-blue      : blue;
	--underline-color: #333;
}

div.header {
	padding: 0;
	margin: 0;
	background: none;
	text-align: left;
	margin-bottom: 2em;
}

div.header img#gazouqa_icon {
	border-radius: 10px;
}

@media(min-width: 768px) and (max-width: 991px) {
	div.header img#gazouqa_icon {
		border-radius: 5px;
	}
}

h1.everypage {
	background-color: var(--primary-background);
	border-color: var(--primary-border);
}

div.box_noborder {
	padding: 0px;
	margin: 2em 0;
}

div.box_noborder h2 {
	font-size: medium;
	margin-bottom: 5px;
	background-color: var(--secondary-background);
	color: var(--underline-color);
}

div.box_noborder h3 {
	font-size: large;
	margin: 0 0 5px 0;
	padding: 5px;
	font-weight: 700;
}

div.box_noborder p {
	padding: 0 0 10px 0;
	line-height: 140%;
}

div.box_noborder li:not(:last-child) {
	margin-bottom: 6px;
}

/*
 * リスト関連
 */
ul#hintlist {
	list-style-type: none;
	text-align: center;
	margin-top: 3em;
}

ul#hintlist li {
	display: inline;
	margin-right: 2em;
	font-size: large;
}

ol.answer li {
	margin-bottom: 10px;
}

ol.answer li li {
	margin-bottom: 20px;
	margin-right: 2em;
}

/*
 * タイトル、説明、質問、回答ボックス関連
 */
h2.explanation {
	background-color: var(--explanation-background);
	padding: 0;
}

div#question {
	background-color: var(--qa-question-background);
}

div#question h2 {
	background-color: var(--qa-question-background);
	color: var(--underline-color);
	margin: 0 0 10px 0;
	padding: 0;
}

div#question ol,
div#answer ol {
	list-style-type: none;
	margin: 0px;
	padding-bottom: 10px;
}

div#question ul.tohint {
	padding-bottom: 10px;
}

div#answer_box {
	background-color: var(--qa-answer-background);
	padding: 0.5em 1em;
}

div#answer_box h2 {
	background-color: var(--qa-answer-background);
}

div#answer_box ul {
	list-style: none;
	padding-bottom: 15px;
	margin: 0 10px 0 0;
}

div#answer_box ul li {
	text-indent: -2em;
	margin-left: 20px;
}

div#point {
	margin: 1em;
	border: solid 1px var(--normal-header-border);
	border-radius: 5px;
}

div#point h3 {
	background-color: var(--normal-header-border);
	color: var(--point-header-text-color);
	margin: 0 0 8px 0;
	padding: 5px;
	color: var(--point-header-text-color); /* ここも変数を使うとより統一感が出るね */
}

div#point p {
	padding: 5px 1em;
}

/*
 * テキスト強調、マークアップ
 */
span.red {
	color: var(--text-red);
}

span.yel {
	color: var(--text-yellow);
	font-weight: bold;
}

span.gre {
	color: var(--text-green);
}

span.blu {
	color: var(--text-blue);
}

span.uline {
	border-bottom: 1px solid var(--underline-color);
}

mark {
	background: linear-gradient(transparent 60%, var(--mark-highlight) 60%, var(--mark-highlight) 90%, transparent 90%);
}

/*
 * その他
 */
div.profile {
	margin-bottom: 2em;
}

ul.contentslist {
	padding-left: 2em;
}

ul.contentslist li ul {
	padding-left: 1em;
}

ul.contentslist li ul li {
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 0;
}

.tnks {
	margin-bottom: 2em;
}

.tnks li:not(:last-child) {
	margin-bottom: .4em;
}

ul.bigimgcomp {
	text-align: center;
	margin: 1em;
	font-weight: bold;
	list-style: none;
	padding-left: 0;
}

h2.normal {
	margin-top: 20px;
	padding: 3px;
	background-color: var(--secondary-background);
	font-size: large;
	border: 1px solid var(--normal-header-border);
	border-left: 1em solid var(--normal-header-border);
}

div.qa_container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px;
	margin: 24px 8% 24px;
	border-bottom: 1px solid var(--qa-container-border);
	border-top: 1px solid var(--qa-container-border);
}

div.qa_container div img {
	max-height: 70px;
	max-width: 15vw;
	margin: 4px;
}

/* スライダー用CSS */
div.left_box {
	margin-bottom: 12px;
}

p.caption {
	margin-top: 8px;
	font-weight: bold;
}

div.left_box p.caption2 {
	margin-top: 8px;
}

div.left_box + div.left_box {
	margin-top: 12px;
	padding-top: 12px;
}

span.right_control {
	color: var(--right-control-color);
	text-decoration: none;
	cursor: pointer;
}

.forMember {
	margin: 2em 0;
}

.forMember > img {
	width: 550px;
}

.showing {
	margin-right: 5px;
	font-size: 12px;
	background: var(--showing-background);
	color: var(--text-red);
	padding: 4px 0px 2px 4px;
	border-radius: 3px;
}

dl.history,
dl.history_new {
	margin: 0;
	padding: 0 15px 10px 15px;
}

dl.history dt {
	float: left;
	margin: 0;
	padding: 0px;
	text-align: right;
	white-space: nowrap;
}

dl.history dd {
	margin: 0 0 6px 4.65em;
	padding: 0px;
}

dl.history_new dt {
	font-weight: bold;
	margin-top: 8px;
}