/* ********** ヘッダー ********** */

/*単語テーマ*/
#q_thema{
	font-size:0.14rem;
	margin:0;
	padding: 3px 12px;
	background-color:#f2eee5;
	overflow:hidden;
}

@media screen and (max-width: 480px) {  /*--スマートフォン--*/
#q_thema{
  font-size:0.13rem;
}
}
/* ********** シーン ********** */

#main>div {
	margin-right: 30px;
	margin-left: 30px;
    margin-bottom: 50px;
}

@media screen and (max-width: 480px) {  /*--スマートフォン--*/
#main>div {
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 10px;
}
}

/* ********** 問題 ********** */

#sound_button{
	margin-top: 10px;
	/* text-align: start; /* center →　start */
	text-align: left;
}
/*--- 指示文 ---*/
p#q_direction {
	font-size: 0.15rem;
/*    padding-left: 0.30rem;
	text-indent:-0.32rem; */
	
}
/*--- 単語練習は問題文のフォントを大きく ---*/
#q_statement {
	color:#333;
	font-size: 0.2rem;
	margin-top: 5px; 
	margin-bottom: 5px;
}

@media screen and (max-width: 480px) {  /*--スマートフォン--*/
#sound_button{
   margin-top: 5px;
}
p#q_direction {
	font-size: 0.15rem;
	margin: 2px 0 0 0;
 /*   padding-left: 0.28rem;
	text-indent:-0.3rem; */
}

#q_statement {
	font-size: 0.18rem;
}
}
/* ********** 解答入力欄（追加） ********** */

#answer_column {
	font-size: 0.2rem;
	/* chrome以外　日本語を完全オフ */
	ime-mode: disabled;
	
}

#answer_column:read-only {
	cursor: default;
	pointer-events: none;
}

#input_wrapper>p {
	font-size: 0.1rem;
}

#input_wrapper>p .judgement {
	display: inline-block;
	/* width: 1.5em; */
	text-align: left;
	vertical-align: top;
	padding-top: 3px;
	padding-left: 5px;
}

#input_wrapper .judgement>img {
	width: 2.6em;
}

#illust_wrapper p.illust {	/* 追加 */
	margin-top:10px;
	text-align: center;
	padding: 8px 0;
	background-color: #fefefe;
    background-image: -webkit-linear-gradient(45deg, #f2eee5 25%, transparent 25%, transparent 75%, #f2eee5 75%, #f2eee5), -webkit-linear-gradient(45deg, #f2eee5 25%, transparent 25%, transparent 75%, #f2eee5 75%, #f2eee5);
    background-image: linear-gradient(45deg, #f2eee5 25%, transparent 25%, transparent 75%, #f2eee5 75%, #f2eee5), linear-gradient(45deg, #f2eee5 25%, transparent 25%, transparent 75%, #f2eee5 75%, #f2eee5);
    background-position: 0 0, 3px 3px;
    background-size: 6px 6px;
}

#illust_wrapper p.illust>img { /* 追加 */
	width: 40%;
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


@media screen and (max-width: 480px) {  /*--スマートフォン--*/
#illust_wrapper p.illust>img { /* 追加 */
	/* width: 85%; */
	width: 75%;
}
}

@media screen and (max-height: 530px){ /* 解像度の低い画面で単語イラストが見切れる問題に対応 */
#illust_wrapper p.illust {
	padding: 2px 0;
}
}
/* ********** 正誤判定（追加） ********** */

#judgement {
	position:absolute;
	width: 15em;
	height: 15em;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
	background-size: cover;
}

.correct {
	background-image: url('../images/circle_large.png');
}

.incorrect {
	background-image: url('../images/cross_large.png');
}


/* ********** リザルト（answer） ********** */
/*-- 見出し --*/
#answer_title { 
	font-size: 0.16rem;
	margin: 10px 0 5px 0;
    /* font-weight: bold; */
    /* background-color: #6b8dcc; */
    /* color: #FFF; */
    background-color: #f2eee5;
    padding: 4px 5px;
    border-radius: 18px;
    text-align: center;
}
/*-- 指示文 --*/
#answer_comment {
   margin: 20px 0 30px 0;
   font-size: 0.15rem;
}

@media screen and (max-width: 480px) {  /*--スマートフォン--*/
    /*-- 見出し --*/
#answer_title { 
   font-size: 0.14rem;
   border-radius: 14px;
}
#answer_comment {
   margin: 10px 0;
   font-size: 0.14rem;
}
}
/* ********** 解説 ********** */

#commentary_statement { /* 表示サイズを固定するためピクセル指定に変更 */
    padding: 0 4%; /*padding: 0 2% 2%;*/
    max-height: 70vh; /* max-height: 50.4vh; */
}
#commentary_statement .statement {
    margin:0;
}
@media screen and (max-width: 480px) {  /*--スマートフォン--*/
#commentary_statement {
    padding: 0 10px; 
}
}

/* ********** フッター ********** */

.next_btn {
/*	width: 7em;*/
}


#go_list,
#post2 {	/* 追加 style.cssでdisplay:none;にしているが、そのままだと左寄せ表示されるため　*/
}

#judge {
    display: none;
    float: right;
    margin-right: 2%;
}

/* ********** 文字修飾 ********** */
.cube{
	border-style: solid;/* ボーダーを実線に */
	border-width: 1px;/* ボーダー線の太さを1pxに  */
	border-color: #c0c0c0;/* ボーダー線の色を指定 */
	color:#000000;  /* ボーダー線の色を指定 */
	font-size: 82% ;/* フォントのサイズを80%に縮小して表示 */
	border-radius: 20%;    /* 囲い四角の四隅に丸みをつける  */ 
/*	padding: 0.25% 1.5%; /*文字と四角の間に余白をつくる  */
    padding: 3px 6px;
	margin-left : 0.25%;/* 左隣りの文字とのスペース  */
	margin-right: 1.0%;/* 右隣りの文字とのスペース  */
	vertical-align: 6%;  /* 上下のずれを微修正；少し上に移動  */
	background-color: #f5f5f5;/* 背景に色を付ける  */       
}

.f_bg_gray {
    display: inline-block;
	width: 3em;
	background-color: gray;
	color: #fff;
	text-align: center;
 /*	font-weight: bold; */
    font-size: 89%;
    line-height: 1.7em;
    margin-right: 0.5em;
    text-indent: 0;
    border-radius: 3px;
}

.f_bigger {
	font-size: 0.22rem;
}

.f_big_en {
	font-size: 0.20rem;
}

.f_big {
	font-size: 0.18rem;
}

.f_middle {
	font-size: 0.16rem;
}

.f_small {
	font-size: 0.13rem;
}

.f_red {
    color:  #fe2523;
}

.f_blue {
	color: #238ffe;
	font-weight: bold;
}

.f_brown {
    color: #ab5600;
}

.f_bold {
	font-weight: bold;
}

/* 解説の各ブロック */
p.c_word {

}

p.c_kanrengo {
}

p.c_yaku {
    text-indent: -3.0em;
    padding-left: 3.0em;
}

p.c_kaisetsu {
    text-indent: -3.5em;
    padding-left: 3.5em;
}
@media screen and (max-width: 480px) {  /*--スマートフォン--*/
.cube{
  font-size:85%;
}
.f_big_en {
	font-size: 0.19rem;
}
.f_big {
	font-size: 0.16rem;
}
p.c_yaku {
    font-size: 0.15rem;
}
}