@charset "UTF-8";

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	share
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------
	扉
-------------------------------*/
#inPage ul.pageList { width:960px; margin:10px auto;}
#inPage ul.pageList li { background:url("../images/btn_boor_bg01.png") no-repeat center top / cover; width:280px; float:left; margin:30px 0 0 60px; position:relative; }
#inPage ul.pageList li:nth-child(3n+1) { margin-left:0; }
#inPage ul.pageList li.bgComing { background:url("../images/btn_door_bg_coming.png") no-repeat center top / cover; width:280px; }
#inPage ul.pageList li img { width:100%; }
#inPage ul.pageList li:hover { filter: brightness(120%); }
#inPage ul.pageList li.bgComing:hover { filter: brightness(100%); }

/*------------------------------
	new mark
-------------------------------*/
#inPage ul.pageList li.newMark:before { content:''; display:inline-block; width:90px; height:60px; position:absolute; top:25px; left:30px; cursor:pointer; }
#inPage.kanji_quiz ul.pageList li.newMark:before { background: url(../images/pink_icon_new.png) no-repeat center center / contain; }
#inPage.trivia ul.pageList li.newMark:before { background: url(../images/pink_icon_new.png) no-repeat center center / contain; }
#inPage.nandoku ul.pageList li.newMark:before { background: url(../images/pink_icon_new.png) no-repeat center center / contain; }
#inPage.naritachi ul.pageList li.newMark:before { background: url(../images/blue_icon_new.png) no-repeat center center / contain; }
#inPage.bushu ul.pageList li.newMark:before { background: url(../images/blue_icon_new.png) no-repeat center center / contain; }
#inPage.kakijun ul.pageList li.newMark:before { background: url(../images/blue_icon_new.png) no-repeat center center / contain; }
#inPage.goiryoku ul.pageList li.newMark:before { background: url(../images/yellow_icon_new.png) no-repeat center center / contain; }
#inPage.magirawashii ul.pageList li.newMark:before { background: url(../images/yellow_icon_new.png) no-repeat center center / contain; }
#inPage.goji ul.pageList li.newMark:before { background: url(../images/yellow_icon_new.png) no-repeat center center / contain; }

/*------------------------------
	footer btn
-------------------------------*/
#inPage #footLinksArea ul { float:left; margin-top:20px; }
#inPage #footLinksArea ul li { float:left; }
#inPage #footLinksArea ul li a { display:inline-block; margin-right:20px; border:3px solid #acacae; padding:8px 14px 8px 24px; border-radius:5px; background:url("../images/btn_arrow01.png") #ffffff no-repeat 10px center / 7px; }

#inPage.kanji_quiz #footLinksArea ul li a:hover { background:url("../images/btn_arrow01.png") #fce6e5 no-repeat 10px center / 7px; text-decoration:none; border:3px solid #ea6172; }
#inPage.trivia #footLinksArea ul li a:hover { background:url("../images/btn_arrow01.png") #fce6e5 no-repeat 10px center / 7px; text-decoration:none; border:3px solid #ea6172; }
#inPage.nandoku #footLinksArea ul li a:hover { background:url("../images/btn_arrow01.png") #fce6e5 no-repeat 10px center / 7px; text-decoration:none; border:3px solid #ea6172; }
#inPage.naritachi #footLinksArea ul li a:hover { background:url("../images/btn_arrow01.png") #f0f5fd no-repeat 10px center / 7px; text-decoration:none; border:3px solid #3886c7; }
#inPage.bushu #footLinksArea ul li a:hover { background:url("../images/btn_arrow01.png") #f0f5fd no-repeat 10px center / 7px; text-decoration:none; border:3px solid #3886c7; }
#inPage.kakijun #footLinksArea ul li a:hover { background:url("../images/btn_arrow01.png") #f0f5fd no-repeat 10px center / 7px; text-decoration:none; border:3px solid #3886c7; }
#inPage.goiryoku #footLinksArea ul li a:hover { background:url("../images/btn_arrow01.png") #f8eede no-repeat 10px center / 7px; text-decoration:none; border:3px solid #f29600; }
#inPage.magirawashii #footLinksArea ul li a:hover { background:url("../images/btn_arrow01.png") #f8eede no-repeat 10px center / 7px; text-decoration:none; border:3px solid #f29600; }
#inPage.goji #footLinksArea ul li a:hover { background:url("../images/btn_arrow01.png") #f8eede no-repeat 10px center / 7px; text-decoration:none; border:3px solid #f29600; }


/*------------------------------
	ルビ
-------------------------------*/
span.rubyF { position:relative; display:inline-block; line-height:2; }
span.rubyF span.rubyLetter { position:absolute; text-align:center; top:-0.3em; left:50%; transform:translateX(-50%); width:40em; font-size:35%; line-height:1em; }

/*------------------------------
	出典
-------------------------------*/
p.shuttenBox { margin-top:10px; }

/*------------------------------
	ページリンク
-------------------------------*/
#pageLinkArea { margin:20px auto 0; width:775px; padding-bottom:200px; font-size:110%; position:relative; }
#pageLinkArea ul li.btnL { float:left; }
#pageLinkArea ul li.btnR { float:right; }
#pageLinkArea ul li a { display:inline-block; border:3px solid #acacae; border-radius:5px; }
#pageLinkArea ul li.btnL a { background:url("../images/btn_arrow01.png") #ffffff no-repeat 10px center / 7px; padding:14px 20px 14px 30px; }
#pageLinkArea ul li.btnR a { background:url("../images/btn_arrow02.png") #ffffff no-repeat 94% center / 7px; padding:14px 30px 14px 20px;}

#inPage.kanji_quiz #pageLinkArea ul li a:hover { text-decoration:none; border:3px solid #ea6172; }
#inPage.kanji_quiz #pageLinkArea ul li.btnL a:hover { background:url("../images/btn_arrow01.png") #fce6e5 no-repeat 10px center / 7px; }
#inPage.kanji_quiz #pageLinkArea ul li.btnR a:hover { background:url("../images/btn_arrow02.png") #fce6e5 no-repeat 94% center / 7px; }

#inPage.trivia #pageLinkArea ul li a:hover { text-decoration:none; border:3px solid #ea6172; }
#inPage.trivia #pageLinkArea ul li.btnL a:hover { background:url("../images/btn_arrow01.png") #fce6e5 no-repeat 10px center / 7px; }
#inPage.trivia #pageLinkArea ul li.btnR a:hover { background:url("../images/btn_arrow02.png") #fce6e5 no-repeat 94% center / 7px; }

#inPage.nandoku #pageLinkArea ul li a:hover { text-decoration:none; border:3px solid #ea6172; }
#inPage.nandoku #pageLinkArea ul li.btnL a:hover { background:url("../images/btn_arrow01.png") #fce6e5 no-repeat 10px center / 7px; }
#inPage.nandoku #pageLinkArea ul li.btnR a:hover { background:url("../images/btn_arrow02.png") #fce6e5 no-repeat 94% center / 7px; }

#inPage.naritachi #pageLinkArea ul li a:hover { text-decoration:none; border:3px solid #3886c7; }
#inPage.naritachi #pageLinkArea ul li.btnL a:hover { background:url("../images/btn_arrow01.png") #f0f5fd no-repeat 10px center / 7px; }
#inPage.naritachi #pageLinkArea ul li.btnR a:hover { background:url("../images/btn_arrow02.png") #f0f5fd no-repeat 94% center / 7px; }

#inPage.bushu #pageLinkArea ul li a:hover { text-decoration:none; border:3px solid #3886c7; }
#inPage.bushu #pageLinkArea ul li.btnL a:hover { background:url("../images/btn_arrow01.png") #f0f5fd no-repeat 10px center / 7px; }
#inPage.bushu #pageLinkArea ul li.btnR a:hover { background:url("../images/btn_arrow02.png") #f0f5fd no-repeat 94% center / 7px; }

#inPage.kakijun #pageLinkArea ul li a:hover { text-decoration:none; border:3px solid #3886c7; }
#inPage.kakijun #pageLinkArea ul li.btnL a:hover { background:url("../images/btn_arrow01.png") #f0f5fd no-repeat 10px center / 7px; }
#inPage.kakijun #pageLinkArea ul li.btnR a:hover { background:url("../images/btn_arrow02.png") #f0f5fd no-repeat 94% center / 7px; }

#inPage.goiryoku #pageLinkArea ul li a:hover { text-decoration:none; border:3px solid #f29600; }
#inPage.goiryoku #pageLinkArea ul li.btnL a:hover { background:url("../images/btn_arrow01.png") #f8eede no-repeat 10px center / 7px; }
#inPage.goiryoku #pageLinkArea ul li.btnR a:hover { background:url("../images/btn_arrow02.png") #f8eede no-repeat 94% center / 7px; }

#inPage.magirawashii #pageLinkArea ul li a:hover { text-decoration:none; border:3px solid #f29600; }
#inPage.magirawashii #pageLinkArea ul li.btnL a:hover { background:url("../images/btn_arrow01.png") #f8eede no-repeat 10px center / 7px; }
#inPage.magirawashii #pageLinkArea ul li.btnR a:hover { background:url("../images/btn_arrow02.png") #f8eede no-repeat 94% center / 7px; }

#inPage.goji #pageLinkArea ul li a:hover { text-decoration:none; border:3px solid #f29600; }
#inPage.goji #pageLinkArea ul li.btnL a:hover { background:url("../images/btn_arrow01.png") #f8eede no-repeat 10px center / 7px; }
#inPage.goji #pageLinkArea ul li.btnR a:hover { background:url("../images/btn_arrow02.png") #f8eede no-repeat 94% center / 7px; }

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	漢字クイズの館
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#inPage.kanji_quiz .inArea { width:775px; margin:50px auto 0; background:#f5cfce; border-radius:15px; text-align:center; padding:30px 0; line-height:1.6; }
#inPage.kanji_quiz .inArea .inBox { background:url("../images/pink_in_bg01a.png") no-repeat center top; padding-top:40px; }
#inPage.kanji_quiz .inArea .inBoxB { background:url("../images/pink_in_bg01c.png") no-repeat center bottom; padding-bottom:40px; }
#inPage.kanji_quiz .inArea .qArea,
#inPage.kanji_quiz .inArea .aArea { background:url("../images/pink_in_bg01b.png") repeat-y center top; font-size:120%; }
#inPage.kanji_quiz .inArea .qArea ul { margin-top:15px; }
#inPage.kanji_quiz .inArea .qArea ul li { margin-top:10px; }
#inPage.kanji_quiz .inArea .aArea ul { margin-top:15px; width:669px; margin:0 auto; }
#inPage.kanji_quiz .inArea .aArea ul li { float:left; margin:10px; }

/*漢字の追いかけっこ*/
#inPage.kanji_quiz .inArea.quiz2 .grayBg { background:#e5e5e5; width:640px; margin:0 auto; padding:15px 10px 15px 0; text-align:left; }
#inPage.kanji_quiz .inArea.quiz2 .grayBg p { float:left; }
#inPage.kanji_quiz .inArea.quiz2 .grayBg p.txtArea { margin:40px 0 0 30px; }
#inPage.kanji_quiz .inArea.quiz2 .qArea ul { margin:20px 0 0 56px; }
#inPage.kanji_quiz .inArea.quiz2 .qArea ul.qList li { width:200px; float:left; margin:0 10px; text-align:left; }
#inPage.kanji_quiz .inArea.quiz2 .qArea ul.qList li .hintArea { margin-top:5px; line-height:1.4; }
#inPage.kanji_quiz .inArea.quiz2 .qArea ul.qList li .hintArea img { margin-bottom:5px; }
#inPage.kanji_quiz .inArea.quiz2 .qArea ul.qList li p { margin-top:5px; font-size:80%; font-weight:bold; }
#inPage.kanji_quiz .inArea.quiz2 .qArea ul.qList li p img { margin-right:2px; vertical-align:middle; }
#inPage.kanji_quiz .inArea.quiz2 .aArea ul { margin-left:90px; }
#inPage.kanji_quiz .inArea.quiz2 .aArea ul li { float:left; margin:0 20px; }

/*漢字イラストクイズ*/
#inPage.kanji_quiz .inArea.quiz3 .qArea ul { margin:5px 0 0 60px; }
#inPage.kanji_quiz .inArea.quiz3 .qArea ul.qList li { width:312px; float:left; margin:6px 8px; text-align:left; }
#inPage.kanji_quiz .inArea.quiz3 .aArea ul { margin-left:150px; width:500px; }
#inPage.kanji_quiz .inArea.quiz3 .aArea ul li { float:left; margin:5px 10px; }

/*スポーツ競技の漢字名*/
#inPage.kanji_quiz .inArea.quiz4 .qArea .qTitle { background:url("../../kanji_quiz/images/kanji_quiz4_q_bg_pc.gif") no-repeat left bottom; position:relative; text-align:left; width:640px; margin:20px auto 0; display:flex; padding-bottom:20px; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qTitle h4 { margin:15px 25px 0 35px; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qTitle p { margin-top:5px; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .illustPos { position:absolute; top:-120px; right:40px; }

#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner { text-align:left; width:590px; margin:30px auto 0; position:relative; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .aranH { margin-top:20px;}
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner ul.qList1 { display:flex; flex-wrap:wrap; width:420px; margin-top:0; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner ul.qList1 li { width:100px; margin:30px 30px 0 0; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner ul.qList1 li:nth-child(2) { width: 200px; }

#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner ul.qList1b { display:flex; flex-wrap:wrap; width:590px; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner ul.qList1b li { margin-right:10px; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner ul.qList1b li:nth-child(2) { width:400px; }

#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner ul.qList2 li { margin-top:25px; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner ul.qList2 li:first-child { margin-top:10px; }

#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner ul.qList2b { display:flex; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner ul.qList2b li { margin-right:20px; }

#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg { position:absolute; top:25px; right:0; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .qList2 + .colorBg { top:45px; right:20px; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg ul li h5 { position:absolute; top:-15px; left:-5px; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg ul li p span { font-size:90%; }

#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg .colorBgBox1 { position:relative; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg .colorBgBox1 ul li { position:relative; background:#fadbd9; padding:15px 10px; margin:0; width:180px; font-size:90%; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg .colorBgBox1 .hintIllust { position:absolute; left:180px; bottom:0; }

#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg .colorBgBox2 { position:relative; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg .colorBgBox2 ul { position:relative; margin:0; width:280px; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg .colorBgBox2 ul li { position:relative; background:#fadbd9; padding:15px 10px; margin:0; width:280px; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg .colorBgBox2 ul li ul { background:none; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg .colorBgBox2 ul li ul li { padding:0; text-indent:-1em; padding-left:1em; font-size:90%; background:none; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg .colorBgBox2 ul li ul li img { margin-right:2px; vertical-align:baseline; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg .colorBgBox2 .hintIllust { position:absolute; left:270px; bottom:0; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg .colorBgBox2 span { position:relative; display:inline-block; margin-left:1em; }
#inPage.kanji_quiz .inArea.quiz4 .qArea .qInnner .colorBg .colorBgBox2 span:before { content:"・・・・"; position:absolute; top:-9px; left:0; }

#inPage.kanji_quiz .inArea.quiz4 .aArea .partBox { display:flex; text-align:left; width:550px; margin:0 auto; }
#inPage.kanji_quiz .inArea.quiz4 .aArea .partBox .aInner.part1 ul.aList { margin-top:5px; width:400px; position:relative; }
#inPage.kanji_quiz .inArea.quiz4 .aArea .partBox .aInner.part2 ul.aList { margin-top:5px; width:180px; }
#inPage.kanji_quiz .inArea.quiz4 .aArea .partBox .aInner ul.aList li { float:none; margin:2px 0 0 0; }
#inPage.kanji_quiz .inArea.quiz4 .aArea .partBox .aInner ul.aList li:nth-child(4) { position:absolute; top:0; left:170px; }
#inPage.kanji_quiz .inArea.quiz4 .aArea .partBox .aInner ul.aList li:nth-child(5) { position:absolute; top:25px; left:170px; }

/*四字熟語足し算クイズ */
#inPage.kanji_quiz .inArea.quiz5 h3 + p { margin-top:10px; }

#inPage.kanji_quiz .inArea.quiz5 .qArea .qInnner { border:2px solid #ea6172; background:linear-gradient(#ffebec, #ffffff); border-radius:13px; width:600px; margin:20px auto 0; }
#inPage.kanji_quiz .inArea.quiz5 .qArea .qInnner h4 { margin:-1px 4% 0 3%; width:17%; }
#inPage.kanji_quiz .inArea.quiz5 .qArea .qInnner ul { margin:0 0 15px; }
#inPage.kanji_quiz .inArea.quiz5 .qArea .qInnner ul li:first-child { margin:0; }
#inPage.kanji_quiz .inArea.quiz5 .qArea .qInnner.g1 { margin-top:15px; }
#inPage.kanji_quiz .inArea.quiz5 .qArea .qInnner.g2 { margin-bottom:10px; }

#inPage.kanji_quiz .inArea.quiz5 .aArea .partBox .aInner { display:flex; align-items:center; margin:0 auto; width:550px; }
#inPage.kanji_quiz .inArea.quiz5 .aArea .partBox .aInner h4 { margin-right:15px; }
#inPage.kanji_quiz .inArea.quiz5 .aArea .partBox .aInner ul { margin:0; padding:0; }
#inPage.kanji_quiz .inArea.quiz5 .aArea .partBox .aInner ul li { margin:0; padding:0; float:none; }


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	言葉のトリビアの館
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#inPage.trivia .inArea { width:775px; margin:50px auto 0; background:#f5cfce; border-radius:15px; text-align:center; padding:30px 0; }
#inPage.trivia .inArea .inBox { background:url("../images/pink_in_bg01a.png") no-repeat center top; padding-top:40px; }
#inPage.trivia .inArea .inBoxB { background:url("../images/pink_in_bg01c.png") no-repeat center bottom; padding-bottom:40px; }
#inPage.trivia .inArea .mainArea { background:url("../images/pink_in_bg01b.png") repeat-y center top; }
#inPage.trivia .inArea h4 { margin-top:25px; }
#inPage.trivia .inArea .readArea { margin:15px auto 0; width:550px; text-align:left; font-size:110%; }
#inPage.trivia .inArea .imgBox { margin-top:25px; }

/*藪医者*/
#inPage.trivia .inArea.trivia2 .atComment { width:650px; margin:30px auto 0; text-align:left; }

/*「右回り」「左回り」の基準は何？*/
#inPage.trivia .inArea.trivia3 .readArea { margin:15px auto 0; width:570px; text-align:left; font-size:110%; }
#inPage.trivia .inArea.trivia3 .atComment { width:650px; margin:30px auto 0; text-align:left; }

/*秋が旬だけど「鰍」とは書かない魚*/
#inPage.trivia .inArea.trivia4 .readArea { margin:15px auto 0; width:570px; text-align:left; font-size:110%; }
#inPage.trivia .inArea.trivia4 .atComment { width:650px; margin:30px auto 0; text-align:left; }

/*指示と勧告、緊急度が高いのは？*/
#inPage.trivia .inArea.trivia5 .readArea { margin:15px auto 0; width:570px; text-align:left; font-size:110%; }
#inPage.trivia .inArea.trivia5 .atComment { width:650px; margin:30px auto 0; text-align:left; }

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	難読漢字の館
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#inPage.nandoku .inArea { width:775px; margin:50px auto 0; background:#f5cfce; border-radius:15px; text-align:center; padding:30px 0; }
#inPage.nandoku .inArea .inBox { background:url("../images/pink_in_bg01a.png") no-repeat center top; padding-top:40px; }
#inPage.nandoku .inArea .inBoxB { background:url("../images/pink_in_bg01c.png") no-repeat center bottom; padding-bottom:40px; }
#inPage.nandoku .inArea .mainArea { background:url("../images/pink_in_bg01b.png") repeat-y center top; }
#inPage.nandoku .inArea h4 { margin-top:25px; }

#inPage.nandoku .inArea .qArea { margin:15px auto 0; width:637px; border-radius:15px; padding:60px 0 50px; position:relative; }
#inPage.nandoku .inArea .qArea ul { margin:0 0 25px 0; }
#inPage.nandoku .inArea .qArea ul li { width:136px; text-align:left; line-height:1.5; margin:8px 5px 0; position:relative; display:inline-block; box-sizing:border-box; cursor:pointer; }
#inPage.nandoku .inArea .qArea ul li span { border:4px solid #f7b249; box-shadow:3px 3px 3px rgba(0,0,0,0.3); background:#ffffff; width:100%; height:100%; padding:15px 10px; box-sizing:border-box; }
#inPage.nandoku .inArea .qArea ul li span.frontFace { display:flex; align-items:center; justify-content:center; }
#inPage.nandoku .inArea .qArea ul li span.reverseFace { position:absolute; top:0; left:0; display:block; }
#inPage.nandoku .inArea .qArea ul li span.reverseFace img { margin-top:-10px; }
#inPage.nandoku .inArea .qArea ul li.showFront span.frontFace { opacity:1; transform:rotateY(0deg); transition:opacity 100ms 150ms, transform 300ms 150ms; }
#inPage.nandoku .inArea .qArea ul li.showFront span.reverseFace { opacity:0; transform:rotateY(90deg); transition:opacity 50ms 200ms, transform 300ms; }
#inPage.nandoku .inArea .qArea ul li.showReverse span.frontFace { opacity:0; transform:rotateY(90deg); transition:opacity 50ms 200ms, transform 300ms; }
#inPage.nandoku .inArea .qArea ul li.showReverse span.reverseFace { opacity:1; transform:rotateY(0deg); transition:opacity 100ms 150ms, transform 300ms 150ms; }

#inPage.nandoku .inArea .inBox ul li img.imgTxt { width:14px !important; vertical-align:-2px; }

#inPage.nandoku .inArea .qArea ul.copyList { position:absolute; left:0; top:0; z-index:-1; }
#inPage.nandoku .inArea .qArea ul.copyList li span { height:auto; }
#inPage.nandoku .inArea .qArea ul.copyList li.showFront span.reverseFace { opacity:1; transform:rotateY(0deg); }

#inPage.nandoku .inArea p.etcInfoTxt { font-size:150%; margin:15px auto; text-align:left; width:640px; }
#inPage.nandoku .inArea .etcArea { background:#f2ecca; width:640px; border-radius:15px; margin:15px auto; }
#inPage.nandoku .inArea .etcArea ul { text-align:center; }
#inPage.nandoku .inArea .etcArea ul li { width:100px; margin:15px 10px; display: inline-block; }
#inPage.nandoku .inArea .atCommentArea { width:640px; text-align:left; margin:0 auto; }

/*おでんの具*/
#inPage.nandoku .inArea.nandoku1 .qArea { background:url("../../nandoku/images/nandoku1_bg.jpg") no-repeat center top / cover; }

/*さかな*/
#inPage.nandoku .inArea.nandoku2 .qArea { background:url("../../nandoku/images/nandoku2_bg.jpg") no-repeat center top / cover; }

/*とり*/
#inPage.nandoku .inArea.nandoku3 .qArea { background:url("../../nandoku/images/nandoku3_bg.jpg") no-repeat center top / cover; }

/*むし*/
#inPage.nandoku .inArea.nandoku4 .qArea { background:url("../../nandoku/images/nandoku4_bg.jpg") no-repeat center top / cover; }

/*やさい*/
#inPage.nandoku .inArea.nandoku5 .qArea { background:url("../../nandoku/images/nandoku5_bg.jpg") no-repeat center top / cover; }


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	成り立ちの館
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#inPage.naritachi h4 { margin-top:10px; }
#inPage.naritachi .inArea { line-height:1.6; width:775px; margin:50px auto 0; background:#c7d5ed; border-radius:15px; text-align:center; padding:30px 0 10px; }
#inPage.naritachi .inArea .inBox { background:url("../images/blue_in_bg01a.png") no-repeat center top; padding-top:40px; }
#inPage.naritachi .inArea .inBoxB { background:url("../images/blue_in_bg01c.png") no-repeat center bottom; padding-bottom:40px; }
#inPage.naritachi .inArea .mainArea { background:url("../images/blue_in_bg01b.png") repeat-y center top; }

#inPage.naritachi .inArea .readArea { margin:15px auto 0; width:600px; text-align:left; font-size:110%; }
#inPage.naritachi .inArea .animeBox { margin-top:20px; }
#inPage.naritachi .inArea .animeBox img { width:300px; }

#inPage.naritachi .inArea .infoArea { width:650px; margin:30px auto 0; }

#inPage.naritachi .inArea .mainArea p.readArea img { vertical-align:middle; }

#inPage.naritachi .inArea .infoBox { float:left; }
#inPage.naritachi .inArea .infoBox ul { float:left; }
#inPage.naritachi .inArea .infoBox ul li { font-weight:bold; font-size:120%; text-align:center; width:85px; padding:2px; margin:5px; border-radius:20px; letter-spacing:0.1em; }
#inPage.naritachi .inArea .infoBox ul li.jyouhoukanji { background:#c4e4f5; }
#inPage.naritachi .inArea .infoBox ul li.kyouikukanji { background:#f5d0df; }
#inPage.naritachi .inArea .infoBox ul li.rank { background:#c7e0c9; }
#inPage.naritachi .inArea .infoBox dl { float:right; text-align:left; font-size:120%; margin:3px 0 0 10px; line-height:1.4; }
#inPage.naritachi .inArea .infoBox dl dt { float:left; clear:both; }
#inPage.naritachi .inArea .infoBox dl dd span{ border:1px solid #000000; padding:1px 2px 0 2px; box-sizing:border-box; line-height:0; font-size:70%; margin-right:3px; }
#inPage.naritachi .inArea .infoBox dl dd span.txtBold { border:none; font-size:100%; font-weight:bold; margin-right:0; padding:0; }
#inPage.naritachi .inArea .infoBox dl dt.yomi + dd { margin-left:2em; }

#inPage.naritachi .inArea .imiBox { float:right; font-size:110%; background:#ededed; border-radius:10px; width:300px; text-align:left; padding:15px; }
#inPage.naritachi .inArea .imiBox h5 { margin-left:-10px; font-size:110%; }
#inPage.naritachi .inArea .imiBox p span { border:1px solid #000000; padding:1px 3px 0 3px; box-sizing:border-box; line-height:0; font-size:70%; margin-right:3px; }
#inPage.naritachi .inArea .imiBox p span.taigigo { background:#000000; color:#ffffff; }

/* 出典 */
#inPage.naritachi .inArea .infoBox p.shuttenBox { margin-right:25px; text-align:left; margin-left:10px; }
#inPage.naritachi .inArea p.shuttenBox { margin-right:25px; text-align:right; }

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	部首の館
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#inPage.bushu h4 { margin-top:10px; }
#inPage.bushu .inArea { line-height:1.6; width:775px; margin:50px auto 0; background:#c7d5ed; border-radius:15px; text-align:center; padding:30px 0; }
#inPage.bushu .inArea .inBox { background:url("../images/blue_in_bg01a.png") no-repeat center top; padding-top:40px; }
#inPage.bushu .inArea .inBoxB { background:url("../images/blue_in_bg01c.png") no-repeat center bottom; padding-bottom:40px; }
#inPage.bushu .inArea .mainArea { background:url("../images/blue_in_bg01b.png") repeat-y center top; position:relative; }
#inPage.bushu .inArea .mainArea .infoArea { background:#c7d5ed; display:inline-block; padding:15px 20px 10px; text-align:left; border-radius:6px; font-size:180%; position:absolute; left:70px; top:70px; }
#inPage.bushu .inArea .mainArea .animeBox { margin:70px 0 30px; }
#inPage.bushu .inArea .mainArea .animeBox img { width:30%; }
#inPage.bushu .inArea .mainArea .flowBox { margin-top:50px; }
#inPage.bushu .inArea .mainArea p.readArea { text-align:left; padding-top:30px; width:640px; margin:50px auto 0; background:url("../../bushu/images/bushu1_line.gif") no-repeat top; font-size:120%; }
#inPage.bushu .inArea .mainArea p.readArea span { margin:0 40px; display:block; }
#inPage.bushu .inArea .mainArea .sameArea { background:#ededed; text-align:left; padding:20px; font-size:120%; width:600px; margin:10px auto 0; border-radius:6px; }
#inPage.bushu .inArea .mainArea .sameArea .sameTxt { font-size:220%; letter-spacing:0.65em; text-align:left; margin:0.2em 0 0 0.5em; }
#inPage.bushu .inArea .mainArea .atComment { font-size:110%; text-align:left; width:640px; margin:10px auto 0; }

#inPage.bushu .inArea.bushu2 .mainArea .sameArea .sameTxt { font-size:220%; letter-spacing:0.55em; text-indent:0; text-align:left; line-height:1.4; margin:0.2em 0 0 0.3em; }

#inPage.bushu .inArea.bushu3 .mainArea .sameArea .sameTxt { font-size:220%; text-indent:0; text-align:left; line-height:1.4; margin:0.2em 0 0 0.5em; }
#inPage.bushu .inArea.bushu3 .mainArea p.readArea { width:660px; }

#inPage.bushu .inArea.bushu4 .mainArea .sameArea .sameTxt { font-size:220%; letter-spacing:1.0em; text-indent:0; text-align:left; line-height:1.4; margin:0.2em 0 0 0.5em; }

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	書き順の館
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#inPage.kakijun h4 { margin-top:10px; }
#inPage.kakijun h4 + p span { font-weight:bold; }
#inPage.kakijun .inArea { line-height:1.6; width:775px; margin:50px auto 0; background:#c7d5ed; border-radius:15px; text-align:center; padding:30px 0; }
#inPage.kakijun .inArea .inBox { background:url("../images/blue_in_bg01a.png") no-repeat center top; padding-top:40px; }
#inPage.kakijun .inArea .inBoxB { background:url("../images/blue_in_bg01c.png") no-repeat center bottom; padding-bottom:40px; }
#inPage.kakijun .inArea .mainArea { background:url("../images/blue_in_bg01b.png") repeat-y center top; }
#inPage.kakijun .inArea .mainArea .infoBox { margin:10px auto 0; padding-bottom:10px; width:640px; background:url("../../kakijun/images/kakijun1_line.gif") no-repeat center bottom; }
#inPage.kakijun .inArea .mainArea .infoBox h4 { float:left; margin-left:10px; }
#inPage.kakijun .inArea .mainArea .infoBox p { float:right; width:250px; text-align:left; font-size:120%; line-height:1.4; margin-top:20px; padding-bottom:15px; }
#inPage.kakijun .inArea .mainArea .infoBox h4 + p { float:left; font-size:110%; margin-top:35px; }
#inPage.kakijun .inArea .mainArea .animeBox { margin:0; }
#inPage.kakijun .inArea .mainArea .infoBox p.readArea img { vertical-align:middle; }

/* 世 */
#inPage.kakijun .inArea.kakijun2 .mainArea .infoBox p.readArea { width:300px; }
#inPage.kakijun .inArea.kakijun2 .mainArea .infoBox h4 + p  { width:200px; margin-top:45px; }

/* 図 */
#inPage.kakijun .inArea.kakijun3 .mainArea .infoBox p.readArea { width:300px; }
#inPage.kakijun .inArea.kakijun3 .mainArea .infoBox h4 + p  { width:200px; margin-top:40px; }

/* 垂 */
#inPage.kakijun .inArea.kakijun4 .mainArea .infoBox p.readArea { width:300px; }
#inPage.kakijun .inArea.kakijun4 .mainArea .infoBox h4 + p  { width:200px; margin-top:30px; }

/* 凹 */
#inPage.kakijun .inArea.kakijun5 .mainArea .infoBox p.readArea { width:270px; }
#inPage.kakijun .inArea.kakijun5 .mainArea .infoBox h4 + p  { width:230px; margin-top:40px; }

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	語彙力の館
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#inPage.goiryoku h4 { margin-top:10px; }
#inPage.goiryoku .inArea { line-height:1.6; width:775px; margin:50px auto 0; background:#fde7c6; border-radius:15px; text-align:center; padding:30px 0; }
#inPage.goiryoku .inArea .inBox { background:url("../images/yellow_in_bg01a.png") no-repeat center top; padding-top:40px; }
#inPage.goiryoku .inArea .inBoxB { background:url("../images/yellow_in_bg01c.png") no-repeat center bottom; padding-bottom:40px; }
#inPage.goiryoku .inArea .mainArea { background:url("../images/yellow_in_bg01b.png") repeat-y center top; }
#inPage.goiryoku .inArea .mainArea .vTxt { margin:30px auto 0; width:620px; }
#inPage.goiryoku .inArea .mainArea .vTxt p { float:right; text-align:left; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size:130%; }
#inPage.goiryoku .inArea .mainArea .vTxt p.txtImg { width:230px; }
#inPage.goiryoku .inArea .mainArea .vTxt p.txtImg img { width:100%; }
#inPage.goiryoku .inArea .mainArea .vTxt p.readArea { line-height:1.4; width:190px; }
#inPage.goiryoku .inArea .mainArea .vTxt p.readArea.l5 { line-height:1.4; width:150px; margin-right:40px; }
#inPage.goiryoku .inArea .mainArea .vTxt p.exBox { position:relative; padding-top:60px; font-size:150%; margin-right:50px; }
#inPage.goiryoku .inArea .mainArea .vTxt p.exBox img { position:absolute; top:0; left:50%; transform:translateX(-50%); }

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	まぎらわしい言葉の館
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#inPage.magirawashii h4 { font-size:220%; letter-spacing:1em; text-indent:1em; background:#ed6c00; border-radius:6px; color:#ffffff; line-height:1; padding:10px 0 5px; width:300px; }
#inPage.magirawashii .inArea { line-height:1.6; width:775px; margin:50px auto 0; background:#fde7c6; border-radius:15px; text-align:center; padding:30px 0; }
#inPage.magirawashii .inArea .inBox { background:url("../images/yellow_in_bg01a.png") no-repeat center top; padding-top:40px; }
#inPage.magirawashii .inArea .inBoxB { background:url("../images/yellow_in_bg01c.png") no-repeat center bottom; padding-bottom:40px; }
#inPage.magirawashii .inArea .mainArea { background:url("../images/yellow_in_bg01b.png") repeat-y center top; font-size:120%; }
#inPage.magirawashii .inArea .mainArea .col2 {margin:20px auto 0; width:625px; }
#inPage.magirawashii .inArea .mainArea .col2 .fLeft,
#inPage.magirawashii .inArea .mainArea .col2 .fRight { width:300px; }
#inPage.magirawashii .inArea .mainArea .col2 img { margin-top:10px; width:100%; }
#inPage.magirawashii .inArea .mainArea .col2 p.readArea { margin-top:10px; text-align:left; }
#inPage.magirawashii .inArea .mainArea .txtBox { width:605px; background:#fffcd1; border:1px solid #facd89; border-radius:6px; padding:10px; margin:15px auto 0; }

#inPage.magirawashii .magirawashi2 h4 { letter-spacing:0.1em; text-indent:0.1em; position:relative; padding:25px 0 10px; }
#inPage.magirawashii .magirawashi2 h4 span.rubyField { position:relative; display:inline-block; }
#inPage.magirawashii .magirawashi2 h4 span.rubyField span.rubyLetter01 { position:absolute; top:-1.3em; left:-0.8em; width:5em; font-size:35%; line-height:1em; }

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	誤字の館
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#inPage.goji .inArea { line-height:1.6; width:775px; margin:50px auto 0; background:#fde7c6; border-radius:15px; text-align:center; padding:30px 0; }
#inPage.goji .inArea .inBox { background:url("../images/yellow_in_bg01a.png") no-repeat center top; padding-top:40px; }
#inPage.goji .inArea .inBoxB { background:url("../images/yellow_in_bg01c.png") no-repeat center bottom; padding-bottom:40px; }
#inPage.goji .inArea .mainArea { background:url("../images/yellow_in_bg01b.png") repeat-y center top; font-size:120%; }
#inPage.goji .inArea .mainArea p.readArea { display:inline-block; background:#fffcd1; border:1px solid #facd89; border-radius:6px; padding:10px; margin:25px auto 0; text-align:left; }
#inPage.goji .inArea .mainArea p.taigigo { margin-top:20px; }