@charset "UTF-8";


.grid-container-anim-gp * {
	position: relative;
}

.grid-container-anim-gp {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas: "title title id""title-img title-img title-img""animation-area-gp animation-area-gp animation-area-gp""note note note";
}

.title-img {
	grid-area: title-img;
}

.animation-area-gp {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "btn-start-animation-gp animation-gp animation-gp animation-gp animation-gp animation-gp";
	grid-area: animation-area-gp;
	margin: 2em 0;
}

.btn-start-animation-gp {
	grid-area: btn-start-animation-gp;
}

.animation-gp {
	grid-area: animation-gp;
}

.playBtn-inline {
	position: relative;
	vertical-align: middle;
	margin-right: .5em;
}

.btn-existence {
	text-align: left;
	text-indent: -80px;
	margin: 0;
	margin: 0 0 0 80px;
}

.playBtn-area {
	padding-right: 20px;
	display: table-cell;
	vertical-align: top;
}

.text-area,
.image-area {
	display: table-cell;
	width: 100%;
}

.text-area {
	padding-left: .75em;
}

.voice-check {
	border: 0;
	padding: .5em .25em;
	text-align: center;
	border-radius: 30px;
	box-shadow: 2px 2px 4px gray;
	color: #fff;
	font-family: "GJ Shin Maru Go Medium", sans-serif;
	background: -moz-linear-gradient(top, #e576b5, #cd005a);
	background: -webkit-linear-gradient(top, #e576b5, #cd005a);
	background: linear-gradient(to bottom, #e576b5, #cd005a);
	width: 240px;
}

.btn-text {
	vertical-align: middle;
	position: relative;
	top: -2px;
}

.pb-margin {
	margin: 1em 0;
}

.pt-margin {
	margin-top: 1em;
}

.checkBtn-area {
	text-align: center;
	margin: 1em 0;
}

.msg-gj {
	content: '';
	position: relative;
	width: 226px;
	height: 139px;
	background-image: url(../images/goodjob.png);
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	top: -110px;
	right: 140px;
	animation: fadeIn 1s ease 0s 1 normal;
	-webkit-animation: fadeIn 1s ease 0s 1 normal;
}

.img-playBtn-select,
.img-pauseBtn-select {
	width: 80px;
	filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
	-webkit-filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	position: absolute;
}

/* 録音テンプレート */

.grid-container-pronunciation * {
	position: relative;
}

/*
.grid-container-pronunciation *:after { 
 position: absolute;
 top: 0;
 left: 0;
}
*/

.grid-container-pronunciation {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas: "title title id""animation-p-area animation-p-area animation-p-area""btn-area-pronunciation btn-area-pronunciation btn-area-pronunciation""note note note";
}

.title {
	grid-area: title;
}

.id {
	grid-area: id;
}

.animation-p-area {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	/*	grid-template-rows: 1fr; */
	grid-template-areas: "btn-start-animation animation animation animation animation animation";
	grid-area: animation-p-area;
	margin: 2em 0;
}

.btn-start-animation {
	grid-area: btn-start-animation;
}

.animation {
	grid-area: animation;
}

.btn-area-pronunciation {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "btn-pronunciation1 btn-pronunciation2 btn-pronunciation3";
	grid-area: btn-area-pronunciation;
}

.btn-pronunciation1 {
	grid-area: btn-pronunciation1;
}

.btn-pronunciation2 {
	grid-area: btn-pronunciation2;
}

.btn-pronunciation3 {
	grid-area: btn-pronunciation3;
}

.btn-pronunciation1,
.btn-pronunciation2,
.btn-pronunciation3 {
	text-align: center;
}

.note {
	grid-area: note;
}

#recordingslist {
	display: none;
}

#btnExample,
#btnRecording,
#btnStop,
#btnPause,
#btnPlayback {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	width: 104px;
	height: 120px;
}

#btnExample {
	background-image: url(../images/btn_play_enabled.svg);
}

#btnExample:disabled {
	background-image: url(../images/btn_play_disabled.svg);
}

#btnRecording {
	background-image: url(../images/btn_speak_enabled.svg);
}

#btnRecording:disabled {
	background-image: url(../images/btn_speak_disabled.svg);
}

#btnPause {
	background-image: url(../images/btn_stop.svg);
}

#btnPlayback {
	background-image: url(../images/btn_listen_enabled.svg);
}

#btnPlayback:disabled {
	background-image: url(../images/btn_listen_disabled.svg);
}

#audio {
	display: none;
}

.box-hide {
	display: none;
}

.btn-pause {
	background: none;
	border: none;
	padding: 0;
	height: fit-content;
	margin: .25em 0;
}

.btn-break {
	background: none;
	border: none;
	padding: 0;
}

.img-anim-btn {
	max-height: 218px;
	height: auto;
	width: 82px;
}

.restriction {
	pointer-events: none;
	opacity: .4;
}

/* 動画 */
.movie {
	width: 640px;
}

.select-image-num {
	padding: 0 .5em;
}

.select-play-btn {
	height: 80px !important;
}

/* 注意書き */
p.text-note {
	font-size: .8em;
	margin: .5em 0 0 .8em;
	text-indent: -0.8em;
}

p.text-note:before {
	content: '※';
}

/* リンク */
.text-link {
	font-size: .8em;
	text-align: center;
}

.elink {
	border: 0;
	padding: .25em 1em;
	text-align: center;
	border-radius: 30px;
	box-shadow: 2px 2px 4px gray;
	color: #fff;
	font-family: "GJ Shin Maru Go Medium", sans-serif;
	background: -moz-linear-gradient(top, #007cc4, #003686);
	background: -webkit-linear-gradient(top, #007cc4, #003686);
	background: linear-gradient(to bottom, #007cc4, #003686);
}