.jspsych-content-wrapper {
	/* 引っ張って更新を無効化 */
	/* 一画面に全て表示されるように調整が必要 */
	overscroll-behavior-y: none;
	overscroll-behavior-x: none;
	/* 全体のWebフォント設定 */
	font-family: 'BIZ UDPGothic', sans-serif;
}

/* マウスカーソルを持っていく円 */
.circle-fix {
	width: 200px;
	height: 200px;
	line-height: 200px;
	font-size: 60px;
	margin: 0 0 450px 0;
	font-weight: 900;
	background-color: rgb(53, 53, 53);
	border-radius: 50%;
	color: #fff;
	text-align: center;
}

/* 説明用の小さい円 */
.circle-fix-explain {
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 30px;
	margin: 0 5px 0 5px;
	font-weight: 900;
	background-color: rgb(53, 53, 53);
	border-radius: 50%;
	color: #fff;
	text-align: center;
	display: inline-block;
	_display: inline;
}

/* 説明画面でのボタン（押しやすく見やすくする） */
.jspsych-btn-instruction {
	display: inline-block;
	padding: 6px 12px;
	margin: 0px;
	font-size: 25px;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.4;
	text-align: center;
	vertical-align: middle;
	border: 3px solid;
	color: #fff;
	background-color: hsl(147, 100%, 30%);
	transition: 0.3s;
	border-radius: 10px;
}
.jspsych-btn-instruction:hover {
	color: hsl(147, 100%, 30%);
	background: #fff;
	border-color: hsl(147, 100%, 30%);
}

.jspsych-btn-instruction#finish {
	background-color: hsl(19, 83%, 50%);
}

.jspsych-btn-instruction#finish:hover {
	color: hsl(19, 83%, 50%);
	background: #fff;
	border-color: hsl(19, 83%, 50%);
}

#jspsych-survey-multi-choice-next {
	display: inline-block;
	padding: 6px 12px;
	margin: 0px;
	font-size: 25px;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.4;
	text-align: center;
	vertical-align: middle;
	border: 3px solid;
	color: #fff;
	background-color: hsl(147, 100%, 30%);
	transition: 0.3s;
	border-radius: 10px;
}

#jspsych-survey-multi-choice-next:hover {
	color: hsl(147, 100%, 30%);
	background: #fff;
	border-color: hsl(147, 100%, 30%);
}
/* ------------------------------------------------ */
/* 回答用のボタンに関する設定 */

/* binaryのボタン */
.jspsych-mybtn_binary {
	display: inline-block;
	position: relative;
	padding: 0px;
	margin: 0px;
	font-size: 30px;
	top: 0px;
	left: 0px;
	width: 395px;
	height: 80px;
	font-weight: 900;
	font-family: 'Open Sans', 'Arial', sans-serif;
	cursor: pointer;
	line-height: 1.4;
	text-align: center;
	white-space: normal;
	vertical-align: middle;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
	border: solid 2px #333;
	border-radius: 20px;
}

/* カーソルが来たら少し色を変える */
.jspsych-mybtn_binary:hover {
	opacity: 0.7;
}

/* 背景色をABで変える */
.jspsych-mybtn_binary#binary_A {
	background-color: #8faadc;
}
.jspsych-mybtn_binary#binary_B {
	background-color: #f4b183;
}

/* 6択のボタン */
/* 色はidを使って変える */
.jspsych-mybtn {
	display: inline-block;
	position: relative;
	padding: 0px;
	margin: 0px;
	font-size: 16px;
	top: 0px;
	left: 0px;
	/* width: 120px; */
	height: 80px;
	font-weight: 900;
	font-family: 'Open Sans', 'Arial', sans-serif;
	cursor: pointer;
	line-height: 1.4;
	text-align: center;
	white-space: normal;
	vertical-align: middle;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
	border: solid 2px #333;
	border-radius: 20px;
}

/* カーソルが来たら少し色を変える */
.jspsych-mybtn:hover {
	opacity: 0.7;
}

/* ordinalのボタン */
/* 背景色をABCDで変える */
.jspsych-mybtn#ordinal_A {
	background-color: #8faadc;
}
.jspsych-mybtn#ordinal_B {
	background-color: #a3abca;
}
.jspsych-mybtn#ordinal_C {
	background-color: #b7adb8;
}
.jspsych-mybtn#ordinal_D {
	background-color: #ccaea7;
}
.jspsych-mybtn#ordinal_E {
	background-color: #e0b095;
}
.jspsych-mybtn#ordinal_F {
	background-color: #f4b183;
}

/* リッカートの色（薄いみどり） */
.jspsych-mybtn#likert {
	background-color: #a4d3a8;
}
/* 答えやすさの色（薄いグレー） */
.jspsych-mybtn#survey_easy {
	background-color: #cccccc;
}

/* 教示用: marginを追加など */
.jspsych-mybtn#survey_easy_instruct {
	background-color: #cccccc;
	margin: 0 9px;
	cursor: default;
}
/* カーソルが来ても色を変えない */
.jspsych-mybtn#survey_easy_instruct:hover {
	opacity: 1;
}

/* 再表示用のちいさいボタン */
/* 色はidを使って変える */
.jspsych-mybtn_small {
	display: inline-block;
	position: relative;
	padding: 0px;
	margin: 0px 8px;
	font-size: 12px;
	top: 0px;
	left: 0px;
	width: 90px;
	height: 64px;
	font-weight: 900;
	cursor: default;
	line-height: 1.4;
	text-align: center;
	white-space: normal;
	vertical-align: middle;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
	border: solid 2px #333;
	border-radius: 16px;
}

/* ordinalのボタン */
/* 背景色をABCDで変える */
.jspsych-mybtn_small#ordinal_A {
	background-color: #8faadc;
}
.jspsych-mybtn_small#ordinal_B {
	background-color: #a3abca;
}
.jspsych-mybtn_small#ordinal_C {
	background-color: #b7adb8;
}
.jspsych-mybtn_small#ordinal_D {
	background-color: #ccaea7;
}
.jspsych-mybtn_small#ordinal_E {
	background-color: #e0b095;
}
.jspsych-mybtn_small#ordinal_F {
	background-color: #f4b183;
}

/* リッカートの色（薄いみどり） */
.jspsych-mybtn_small#likert {
	background-color: #a4d3a8;
}

/* ---------------------------------------------------- */
/* 文の表示に関する設定 */

/* 再表示の枠 */
.frame_survey {
	position: relative;
	border: #333333 double 2px;
	background-color: #e1fde0;
	font-size: 100%;
	width: 720px;
	padding: 15px;
	margin: auto;
	box-shadow: 0 10px 14px 0 #c0c0c0;
}

/* 文全体の枠 */
.stimframe {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	width: 900px;
	height: 80px;
	text-align: center;
	/* border: solid 2px; */
}

/* 再表示用（少し小さめ） */
.stimframe_small {
	position: relative;
	margin: 0 auto;
	left: 0;
	right: 0;
	width: 720px;
	height: 64px;
	text-align: center;
	/* border: solid 2px; */
}

/* それぞれの文の枠 */
.stimframe_AB {
	flex-basis: auto;
	font-size: 26px;
	font-weight: 600;
	top: 0px;
	max-width: 400px;
	min-width: 100px;
	height: 80px;
	word-wrap: break-word;
	text-align: center;
	color: #fff;
	/* border: solid 1px #333; */
	border-radius: 0px;
	padding: 10px 10px 0 15px;
}

/* ぼかし */
/* 基本的にぼかすテキストにつけるclass */
.blurtext {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

/* 実際にぼかされているときにだけつくclass */
.blurring {
	filter: blur(5px) brightness(85%);
}

/* 文の設定 */
.stimframe_AB div#stimtext {
	position: absolute;
	width: inherit;
	height: 70px;
	margin: 10px auto;
	padding: 0;
	/* border: solid 2px #333; */
}

/* 再表示用（少し小さめ） */
.stimframe_AB_small {
	display: inline-block;
	position: absolute;
	font-size: 22px;
	font-weight: 600;
	top: 0px;
	width: 180px;
	height: 64px;
	word-wrap: break-word;
	text-align: center;
	color: #fff;
	/* border: solid 1px #333; */
	border-radius: 0px;
	margin: 0px auto;
}
.stimframe_AB_small#A {
	left: 0px;
	background-color: #007bff;
}
.stimframe_AB_small#B {
	right: 0px;
	background-color: #ed7d31;
}

/* 文の設定 */
.stimframe_AB_small div#stimtext {
	position: absolute;
	width: 180px;
	height: 64px;
	margin: 8px auto;
	padding: 0;
	/* border: solid 2px #333; */
}

/* 矢印 */
.arrow {
	display: inline-block;
	height: 80px;
	width: 50px;
	border-bottom: solid 1px;
	clip-path: polygon(25% 0, 75% 0, 75% 60%, 100% 60%, 50% 100%, 0 60%, 25% 60%);
}

/* 再表示用 */
.arrowframe_small {
	display: block;
	position: relative;
	margin: 0 auto;
	width: 720px;
	height: 20px;
	text-align: center;
	/* border: solid 2px; */
}

/* 矢印 */
.arrow_small {
	height: inherit;
	width: 10px;
	position: absolute;
	top: 0px;
	border-bottom: solid 1px;
}

/* 矢印の三角形の部分 */
.arrow_small::before {
	content: '';
	width: 30px;
	height: 15px;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	background-color: inherit;
	position: absolute;
	top: 100%;
	left: -10px; /* beforeのwidthの半分からarrowのwidthの半分を引いた値 */
}

/* ordinalのAの矢印 */
.arrow_small#ordinal-A {
	background-color: #007bff;
	border-color: #007bff;
	left: 40px;
}
/* ordinalのAの矢印 */
.arrow_small#ordinal-B {
	background-color: #ed7d31;
	border-color: #ed7d31;
	right: 40px;
}

/* リッカートは一文だけ表示する */
.stimframe_likert {
	position: relative;
	font-size: 26px;
	font-weight: 600;
	top: 0px;
	padding: 0 auto;
	margin: 0 auto;
	width: 700px;
	height: 80px;
	word-wrap: break-word;
	text-align: left;
	color: #fff;
	/* color: #000; */
	/* border: double 2px #333; */
	border-radius: 0px;
	background-color: #0e9e1a;
	/* background-color: none; */
}

/* 文の設定 */
.stimframe_likert div#stimtext {
	position: absolute;
	width: 680px;
	height: 70px;
	inset: 0;
	margin: 10px auto;
	text-align: center;
	padding: 0px 0px 0px 10px;
	/* border: solid 2px #333; */
}

/* リッカート：再表示用 */
.stimframe_likert_small {
	display: inline-block;
	position: absolute;
	font-size: 22px;
	font-weight: 600;
	top: 0px;
	left: 0;
	right: 0;
	padding: 0 auto;
	margin: 0 auto;
	width: 560px;
	height: 64px;
	word-wrap: break-word;
	text-align: left;
	color: #fff;
	/* border: solid 1px #333; */
	border-radius: 0px;
	background-color: #0e9e1a;
}

/* 文の設定 */
.stimframe_likert_small div#stimtext {
	position: absolute;
	width: 544px;
	height: 56px;
	inset: 0;
	margin: 8px auto;
	text-align: center;
	padding: 0px 0px 0px 8px;
	/* border: solid 2px #333; */
}

/* 教示画面用の枠 */
.frame_instruct {
	position: relative;
	border: 5px double #333333;
	background-color: #ffffff;
	width: 900px;
	padding: 10px;
	margin-bottom: 10px;
	box-shadow: 0 10px 14px 0 #c0c0c0;
}

.instruct_word {
	position: relative;
	width: inherit;
	height: 90px;
	margin: 0 auto;
	/* border: solid 2px #333; */
}

/* 単語の前に赤文字で「単語」 */
.instruct_word div#character {
	position: absolute;
	display: inline;
	height: 60px;
	width: 60px;
	top: 0;
	bottom: 0;
	left: -10px;
	margin: auto 0;
	font-size: 30px;
	font-weight: 700;
	color: #ff0000;
	text-align: right;
	/* border: solid 2px #333; */
}

/* 単語の周りに赤い枠 */
.instruct_word div#frame {
	display: inline-block;
	padding: 5px 10px;
	width: 600px;
	border: 3px solid #ff0000;
}

/* 選択肢 */
.instruct_choice {
	position: relative;
	width: inherit;
	margin: 0 auto;
	/* border: solid 2px #333; */
}

/* 選択肢の前に青文字で「選択肢」 */
.instruct_choice div#character {
	position: absolute;
	display: inline;
	height: 60px;
	width: 90px;
	top: 0;
	bottom: 0;
	left: 25px;
	margin: auto 0;
	font-size: 40px;
	font-weight: 700;
	color: #0000ff;
	text-align: right;
	/* border: solid 2px #333; */
}

/* 単語の周りに青の枠 */
.instruct_choice div#frame {
	display: inline-block;
	padding: 5px 0;
	width: 650px;
	border: 3px solid #0000ff;
}

/* スライダーの調整 */
.jspsych-slider {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	height: 90px;
	margin: 0;
	padding: -10px;
	background: transparent;
}

/* スライダーのバー */
.jspsych-slider::-webkit-slider-runnable-track {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 80px;
	cursor: pointer;
	background: linear-gradient(90deg, #8faadc, #f4b183);
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	border-radius: 2px;
	border: 2px solid #222;
}

.jspsych-slider::-moz-range-track {
	appearance: none;
	width: 100%;
	height: 80px;
	cursor: pointer;
	background: linear-gradient(90deg, #8faadc, #f4b183);
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	border-radius: 2px;
	border: 2px solid #222;
}

.jspsych-slider::-ms-track {
	appearance: none;
	width: 99%;
	height: 80px;
	cursor: pointer;
	background: linear-gradient(90deg, #8faadc, #f4b183);
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	border-radius: 2px;
	border: 2px solid #222;
}

/* スライダーのツマミ */
.jspsych-slider::-webkit-slider-thumb {
	border: 2px solid #333333;
	height: 90px;
	width: 10px;
	border-radius: 5px;
	background: #76df8d;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -9px;
	opacity: 0;
}

.jspsych-slider:active::-webkit-slider-thumb {
	opacity: 1;
}

.jspsych-slider::-moz-range-thumb {
	border: 2px solid #333;
	height: 90px;
	width: 10px;
	border-radius: 5px;
	background: #76df8d;
	box-sizing: border-box;
	cursor: pointer;
	opacity: 0;
}

.jspsych-slider:active::-moz-range-thumb {
	opacity: 1;
}

.jspsych-slider::-ms-thumb {
	border: 2px solid #333;
	height: 90px;
	width: 10px;
	border-radius: 5px;
	background: #76df8d;
	box-sizing: border-box;
	cursor: pointer;
	margin-top: -2px;
	opacity: 0;
}

.jspsych-slider:active::-ms-thumb {
	opacity: 1;
}

/* 進捗バー，最大でも900pxにする */
#jspsych-progressbar-outer {
	width: min(50%, 900px);
}

/* ドラック可能なオブジェクト，スマホでも軌跡が取れるように */
.drag-and-drop {
	cursor: grab;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 15px;
	font-weight: 900;
	background-color: rgb(53, 53, 53);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 200px auto;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	display: inline-block;
	_display: inline;
	z-index: 1000;
}

.drag {
	cursor: grabbing;
	border: 1px solid;
	border-color: #000000;
	color: transparent;
	z-index: 1001;
}

/* ポインターを持っている状態でもhoverが効くようにclass化 */
.hover {
	opacity: 0.7;
}

.jspsych-survey-likert-matrix-opt-label {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.jspsych-survey-likert-matrix-opt-radio {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 20px;
}

/* survey-likert-matrixの設定 */
table.jspsych-survey-likert-matrix-table {
	width: 900px;
	position: relative;
	display: inline-block;
	border-collapse: collapse;
	/* border: 1px solid #999; */
}

/* 各選択肢の左にだけ薄く区切りを入れる */
/* tr.jspsych-survey-likert-matrix-opts th, */
tr.jspsych-survey-likert-matrix-opts td {
	padding: 5px;
	border-left: 1px solid #999;
}

/* tableの行ごとに色を変える */
tr.jspsych-survey-likert-matrix-opts:nth-child(odd) {
	background: #fff;
}
tr.jspsych-survey-likert-matrix-opts:nth-child(even) {
	background: #ddd;
}

tr.jspsych-survey-likert-matrix-opts:hover td,
tr.jspsych-survey-likert-matrix-opts:hover th {
	background-color: #cdffd1;
}

tr.jspsych-survey-likert-matrix-opts td:hover {
	background-color: #fd9595;
}

/* consent_blockの見栄えをきれいにしたい */
div.consent_block {
	text-align: left;
}
div.consent_block h1 {
	position: relative;
	padding: 0 65px;
	text-align: center;
	font-weight: 700;
}

div.consent_block h1:before {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background: #000;
}

div.consent_block h1 span {
	position: relative;
	padding: 0 1em;
	background: #fff;
}

div.consent_block h2 {
	padding: 1rem 2rem;
	border-bottom: 3px solid #008106;
	background: #affaaf;
}

div.consent_block .consent_text {
	width: 800px;
	margin: 18px auto;
}

div.consent_block .center {
	text-align: center;
}

div.consent_block h3 {
	padding: 0 1rem;
	border-left: 6px solid #000;
}

.under {
	font-weight: 700;
	background: linear-gradient(transparent 70%, #ff99ab 70%);
}

ul li {
	padding-top: 7px;
	padding-bottom: 7px;
}

div.kakomi-box2 {
	margin: 2em auto;
	padding: 0 1em;
	width: 600px;
	color: #666; /* 文字色 */
	background-color: #f7f7f7; /* 背景色 */
	border: 1px solid #ccc; /* 枠線 */
}