@charset "UTF-8";

#okanenone {
	width: 540px;
	position: relative;
  margin: 20px auto;
}

#okanenone p {
	line-break: strict;
/*	word-break: break-all; */
	word-break: normal;
  word-wrap: break-word;
}

/* SHARED */
#okanenone #hankoHolder {
	text-align: center;
}
#okanenone table.table_yellow {
	margin-bottom: 20px !important;
}
.contentPad, .pad, .cell, .ask, .col2, .col3                                            { display: inline-block; }
* html .contentPad, * html .pad, * html .cell, * html .ask, * html .col2, * html .col3  { height: 1%; }
.contentPad, .pad, .cell, .ask, .col2, .col3                                            { display: block; }
.contentPad:after, .pad:after, .cell:after, .ask:after, .col2:after, .col3:after        { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.col2 .column { width: 49%; }
.col3 .column { width: 33%; }
.column { display: inline; float: left; overflow: hidden; }
.border { margin-bottom: 20px !important; padding: 1em; border: 1px dotted #ccc; }
.border2 { margin: 0 10px 10px 0; padding: 5px; border: 1px dotted #ccc; }
.border12 { margin: 0 10px 10px 0; padding: 5px; border: 1px dotted #F98400; }
.border34 { margin: 0 10px 10px 0; padding: 5px; border: 1px dotted #1F840F; }
.border56 { margin: 0 10px 10px 0; padding: 5px; border: 1px dotted #043FBA; }
.font-big     { font-size: 1.5em; }
.font-small   { font-size: 0.8em; }
.font-bold    { font-weight: 700; }
.bg-white  { background-color: #fff; }
.cell-top  { vertical-align: top; }
.w-nowrap  { white-space: nowrap;}
.img-right {  float: right; margin: 10px; }/* kodomo illust-sp */
.m0        { margin:0 !important; }
.mb0       { margin-bottom: 0 !important; }
.ml10      { margin-left: 10px !important; }
#okanenone #contentBody .list-mb10 li { margin-bottom: 10px;  }
#okanenone #contentBody .text-right { text-align: right !important; }
#okanenone #contentBody .text-left,.single-body .text-left   { text-align: left !important; }
#okanenone #contentBody .text-center,.single-body .text-center  { text-align: center !important; }
#okanenone #contentBody .table_yellow.text-center td { text-align: center; }

#okanenone #contentBody dl.inline-dt dt {
  clear: left;
  float: left;
  width: 2em;
  font-weight: normal;
  margin: 0;
}

#okanenone #contentBody dl.inline-dt dd {
margin: 0 0 0 2em;
}

/* CONTENTHEAD */
#okanenone #contentHead {
	width: 540px;
	background: url(../images/head_theme.gif) no-repeat;
}
#okanenone #contentHead .contentPad {
	width: 100%;
	overflow: hidden;
}
#okanenone #contentHead h1 {
  font-size: 20px;
  font-size: 2.0rem;
	float: left;
	display: inline;
	width: 360px;
	padding-top: 25px;
	padding-left: 60px;
	background: none;
	line-height: 1.1;

margin-bottom: 12px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 3px;
padding-left: 60px;
padding-right: 0px;
padding-top: 25px;

  border: none;

}



/* CONTENTBODY */
#okanenone img.left  { float: left;  margin-right: 10px; }
#okanenone img.right { float: right; margin: 10px; }

#okanenone .mb50     { margin-bottom: 50px; }

/* (LISTS) */
/*#okanenone #contentBody .contentPad ul li,
#okanenone #contentBody .contentPad ol li {
	margin-bottom: 1em;
}*/

#okanenone #contentBody .contentPad .okanenone_listBret li {
  list-style-type: disc;
  margin: 0 0 1em 1.5em;
}

/* SERIF */
#okanenone .serif {
	height: 1%;
	margin-bottom: 10px;
	background: url(../images/serif.gif) right top no-repeat;
}
#okanenone .serif .pad {
	background: url(../images/serif_bottom.gif) right bottom no-repeat;
}
#okanenone .serif h3 {
	margin: 0;
	padding: 20px 15px 20px 100px;
	background: none;
	font-size: 94%;
}
#okanenone .serif h3.face_1 { background: url(../images/face_1.gif) 0 0 no-repeat; }
#okanenone .serif h3.face_2 { background: url(../images/face_2.gif) 0 0 no-repeat; }
#okanenone .serif h3.face_3 { background: url(../images/face_3.gif) 0 0 no-repeat; }
#okanenone .serif h3.face_4 { background: url(../images/face_4.gif) 0 0 no-repeat; }



/* QUIZ : listQuiz */
#okanenone #contentBody dl.listQuiz {
	height: auto;
	margin: 0;
	padding: 0;
}
#okanenone #contentBody dl.listQuiz dt {
	clear: left;
	float: left;
	display: inline;
	width: 3em;
	margin-top: 0;
	padding: 0;
}
#okanenone #contentBody dl.listQuiz dd {
	margin: 0 0 1em 3em;
	margin-bottom: 1em;
	padding: 0;
}
#okanenone #contentBody dl.listQuiz dt input {
	margin-right: 3px;
	margin-top: 0;
}

#okanenone #contentBody dl.listQuiz.face dt {
	width: 100px;
	margin-top: 0px;
}
#okanenone #contentBody dl.listQuiz.face dd {
	margin-left: 100px;
}
#okanenone #contentBody dl.listQuiz.face dt input {
	margin-left: 5px;
}

#okanenone p.answer {
	margin: 0;
	padding: 0;
	text-align: center;
}
#okanenone button {
	width: 160px;
	height: 36px;
	line-height: 36px;
	background: url(../images/btn_answer.gif) 0 0 no-repeat;
	border: none;
	letter-spacing: 1px;
	font-weight: bold;
	color: #fe0000;
	cursor: hand;
	padding-left: 20px;
}

#okanenone .wide button  {
	width: 200px;
	height: 36px;
	line-height: 36px;
	border: 3px solid #fe0000;
	background : #fff url(../images/arrow_red.png) 10px center no-repeat;
	letter-spacing: 1px;
	padding-left: 15px;
	font-weight: bold;
	color: #fe0000;
	cursor: hand;
}


/* QUIZ : listQuizCol3 */
#okanenone #contentBody form {
	clear: both;
}
#okanenone #contentBody dl.listQuizCol3 {
	clear: both;
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}
#okanenone #contentBody dl.listQuizCol3 dt {
	float: left;
	width: 2em;
	margin: 0;
}

#okanenone #contentBody dl.listQuizCol3 dt.quizT4 {
	float: left;
	width: 4em;
}

#okanenone #contentBody dl.listQuizCol3 dt.quizT5 {
	float: left;
	width: 5em;
}

#okanenone #contentBody dl.listQuizCol3 dd {
	float: left;
	width: 350px;
	margin: 0 0 1em 0;
	padding: 0;
}

#okanenone #contentBody dl.listQuizCol3 dd.quizS {
	float: left;
	width: 250px;
	margin: 0 0 1em 0;
	padding: 0;
}

#okanenone #contentBody dl.listQuizCol3 dd.answer {
	float: right;
	width: 60px;
	border: 1px solid #ccc;
	text-align: center;
	margin-right: 10px;
	font-weight: 700 !important;

}
#okanenone #contentBody dl.listQuizCol3 dd.answer button {
 width: 60px;
  width: 6em;
  height: 28px;
  line-height: 28px;
	background: #fff;
	border: 2px solid #f00;
	font-weight: bold;
	color: #fe0000;
	cursor: hand;
  font-size: 12px;
}

#okanenone .comment {
	clear: both;
	display: none;
	margin: 0;
	padding: 0;
}
#okanenone .quizOK {
	background: url(../images/quiz_ok.gif) center center no-repeat;
	height: 120px;
}
#okanenone .quizNG {
	background: url(../images/quiz_ng.gif) center center no-repeat;
	height: 120px;
}
#okanenone .message {
	margin: 0 20px 20px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 5px;
	text-align: center;
	font-weight: bold;
}
#okanenone .quizOK .message {
	color: #f00;
}
#okanenone .quizNG .message {
	color: #009;
}
#okanenone img.face {
	vertical-align: middle;
}


/* YESNO CHART */
#okanenone #contentBody #yesnoChart {
  position: relative;
  overflow: hidden;
  overflow-x: hidden;
  width: 460px;
  height: 200px;
}
#okanenone #contentBody #yesnoChart .section {
  width: 2400px;
  height: 200px;
  position : absolute;
  top: 0px;
  left: 0px;
  background: #f5eae6;
}
#okanenone #contentBody #yesnoChart .section.sec2 {
  top: 200px;
}
#okanenone #contentBody #yesnoChart .section.sec3 {
  top: 400px;
}
#okanenone #contentBody #yesnoChart .section.sec4 {
  top: 600px;
}
#okanenone #contentBody #yesnoChart .section.sec5 {
  top: 800px;
}
#okanenone #contentBody #yesnoChart .section li {
  float: left;
  display: inline;
  width: 460px;
  height: 200px;
}

#okanenone #contentBody #yesnoChart .section  p.row1col1{
	font-weight:bold;
}

#okanenone #contentBody #yesnoChart .section li p {
  padding: 30px;
}
#okanenone #contentBody #yesnoChart .section li p.yesnonav {
  padding: 0;
  text-align: center;
}
#okanenone #contentBody #yesnoChart .section li p.yesnonav a {
  margin: 0 30px;
}
#okanenone #contentBody #yesnoChart .section li dl.listKaiwa {
  width: 410px;
  padding: 30px 20px 0;
}
#okanenone #contentBody #yesnoChart .chartyes {
	border: #CC0000 dotted 3px;
	padding: 10px;
	margin: 10px;
}

#okanenone #contentBody #yesnoChart .chartno {
	border: #333399 dotted 3px;
	padding: 10px;
	margin: 10px;
}



/* listKaiwa */
#okanenone #contentBody dl.listKaiwa {
	margin: 0;
	padding: 0;
}
#okanenone #contentBody dl.listKaiwa dt {
	clear: left;
	float: left;
	display: inline;
	width: 60px;
}
#okanenone #contentBody dl.listKaiwa dd {
	margin: 0 0 1.5em 60px;
	padding: 0;
}



/* ASK */
#okanenone #contentBody dl.ask {
	padding-top: 1em;
	padding-bottom: 1em;
}
#okanenone #contentBody dl.ask dt {
	float: left;
	width: 55px;
	height: 60px;
	text-indent: -9999px;
	background: url(../images/ask.gif) 0 0 no-repeat;
}
#okanenone #contentBody dl.ask dd {
	margin-left: 65px;
	color: #b55c00;
}
#okanenone p.advice,
#okanenone ul.advice,
#okanenone .advice {
	color: #b55c00 !important;
}
#okanenone h3.advice {
	display: block;
	width: 86px;
	height: 18px;
	margin: 0;
	padding: 0;
	background: url(../images/icon_advice.gif) 0 0 no-repeat;
	text-indent: -9999px;
}


/* yougo */

#okanenone #contentBody h3.yogo { margin-top: 60px;}


/* FRAMES */
#okanenone .frame_manga             { height: 1%; margin-bottom: 20px; background: url(../images/frame_manga.gif) repeat-y; }
#okanenone .frame_manga .frameTop   { height: 77px; background: url(../images/frame_manga_top.gif) no-repeat;}
#okanenone .frame_manga .pad        { padding: 20px 0px 60px; text-align: center; background: url(../images/frame_manga_bottom.gif) left bottom no-repeat; }

#okanenone .frame_quiz              { height: 1%; margin-bottom: 20px; background: url(../images/frame_quiz.gif) repeat-y; min-height:100%; }
#okanenone .frame_quiz .frameTop    { height: 40px; background: url(../images/frame_quiz_top.gif) no-repeat;}
#okanenone .frame_quiz .pad         { padding: 10px 40px 40px; background: url(../images/frame_quiz_bottom.gif) left bottom no-repeat;min-height:100%; }

#okanenone .frame_work              { height: 1%; margin-bottom: 20px; background: url(../images/frame_work.gif) repeat-y; }
#okanenone .frame_work .frameTop    { height: 40px; background: url(../images/frame_work_top.gif) no-repeat;}
#okanenone .frame_work .pad         { padding: 10px 40px 40px; background: url(../images/frame_work_bottom.gif) left bottom no-repeat; }

#okanenone .frame_sentaku           { height: 1%; margin-bottom: 20px; background: url(../images/frame_sentaku.gif) repeat-y; }
#okanenone .frame_sentaku .frameTop { height: 60px; background: url(../images/frame_sentaku_top.gif) no-repeat;}
#okanenone .frame_sentaku .pad      { padding: 10px 40px 40px; background: url(../images/frame_sentaku_bottom.gif) left bottom no-repeat; }

#okanenone .frame_kaiwa             { height: 1%; margin-bottom: 20px; background: url(../images/frame_kaiwa.gif) repeat-y; }
#okanenone .frame_kaiwa .frameTop   { height: 40px; background: url(../images/frame_kaiwa_top.gif) no-repeat;}
#okanenone .frame_kaiwa .pad        { padding: 10px 40px 30px; background: url(../images/frame_kaiwa_bottom.gif) left bottom no-repeat; }

#okanenone .frame_extra1            { height: 1%; margin-bottom: 20px; background: url(../images/frame_extra1.gif) repeat-y; }
#okanenone .frame_extra1 .frameTop  { height: 60px; background: url(../images/frame_extra1_top.gif) no-repeat;}
#okanenone .frame_extra1 .pad       { padding: 10px 40px 40px; background: url(../images/frame_extra1_bottom.gif) left bottom no-repeat; }

#okanenone .frame_extra2            { height: 1%; margin-bottom: 20px; background: url(../images/frame_extra2.gif) repeat-y; }
#okanenone .frame_extra2 .frameTop  { height: 40px; background: url(../images/frame_extra2_top.gif) no-repeat;}
#okanenone .frame_extra2 .pad       { padding: 10px 40px 40px; background: url(../images/frame_extra2_bottom.gif) left bottom no-repeat; }

#okanenone .frame_extra3            { height: 1%; margin-bottom: 20px; background: url(../images/frame_extra3.gif) repeat-y; }
#okanenone .frame_extra3 .frameTop  { height: 60px; background: url(../images/frame_extra3_top.gif) no-repeat;}
#okanenone .frame_extra3 .pad       { padding: 10px 40px 40px; background: url(../images/frame_extra3_bottom.gif) left bottom no-repeat; }




/* NAVHEAD */
#okanenone ol#navHead {
	float: right;
	display: block;
	width: 160px;
	height: 90px;
	margin: 0 4px 0 0;
	padding: 0;
}
#okanenone ol#navHead li {
	float: left;
	margin: 0;
	padding: 10px 2px;
}
#okanenone ol#navHead li a {
	float: left;
	width: 50px;
	height: 58px;
	overflow: hidden;
	text-indent: -9999px;
}
#okanenone ol#navHead li.btn_shogaku12 a { background: url(../images/btn_gakunen.gif) 0 0 no-repeat; }
#okanenone ol#navHead li.btn_shogaku34 a { background: url(../images/btn_gakunen.gif) -50px 0 no-repeat; }
#okanenone ol#navHead li.btn_shogaku56 a { background: url(../images/btn_gakunen.gif) -100px 0 no-repeat; }
#okanenone ol#navHead li.btn_shogaku12 a:hover { background: url(../images/btn_gakunen.gif) 0 -60px no-repeat; }
#okanenone ol#navHead li.btn_shogaku34 a:hover { background: url(../images/btn_gakunen.gif) -50px -60px no-repeat; }
#okanenone ol#navHead li.btn_shogaku56 a:hover { background: url(../images/btn_gakunen.gif) -100px -60px no-repeat; }

#okanenone ol#navHead li.btn_tukaikata a { width: 98px; background: url(../images/btn_dojo.gif) 0 0 no-repeat; }
#okanenone ol#navHead li.btn_yakuwari  a { width: 98px; background: url(../images/btn_dojo.gif) -98px 0 no-repeat; }
#okanenone ol#navHead li.btn_kurasi    a { width: 98px; background: url(../images/btn_dojo.gif) -196px 0 no-repeat; }
#okanenone ol#navHead li.btn_sigoto    a { width: 98px; background: url(../images/btn_dojo.gif) -294px 0 no-repeat; }
#okanenone ol#navHead li.btn_tukaikata a:hover { background: url(../images/btn_dojo.gif) 0 -60px no-repeat; }
#okanenone ol#navHead li.btn_yakuwari  a:hover { background: url(../images/btn_dojo.gif) -98px -60px no-repeat; }
#okanenone ol#navHead li.btn_kurasi    a:hover { background: url(../images/btn_dojo.gif) -196px -60px no-repeat; }
#okanenone ol#navHead li.btn_sigoto    a:hover { background: url(../images/btn_dojo.gif) -294px -60px no-repeat; }



/* NAVFOOT */
#okanenone ol#navFoot {
	width: 540px;
	height: 60px;
	margin: 10px 0 0;
	padding: 0;
}
#okanenone ol#navFoot li {
	float: left;
	height: 38px;
	margin: 0;
	padding: 0;
}
#okanenone ol#navFoot li a {
	float: left;
	display: inline;
	height: 38px;
	overflow: hidden;
	text-indent: -9999px;
}

#okanenone ol#navFoot li.btn_theme a           { width: 120px; background: url(../images/btn_foot_theme.gif) 0 0 no-repeat; }
#okanenone ol#navFoot li.btn_theme a:hover     { background-position: 0 -40px; }

#okanenone ol#navFoot li.btn_tukaikata a       { width: 165px; background: url(../images/btn_foot_dojo.gif) 0 0 no-repeat; }
#okanenone ol#navFoot li.btn_yakuwari  a       { width: 165px; background: url(../images/btn_foot_dojo.gif) 0 -80px no-repeat; }
#okanenone ol#navFoot li.btn_kurasi    a       { width: 165px; background: url(../images/btn_foot_dojo.gif) 0 -160px no-repeat; }
#okanenone ol#navFoot li.btn_sigoto    a       { width: 165px; background: url(../images/btn_foot_dojo.gif) 0 -240px no-repeat; }
#okanenone ol#navFoot li.btn_tukaikata a:hover { background-position: 0 -40px; }
#okanenone ol#navFoot li.btn_yakuwari  a:hover { background-position: 0 -120px; }
#okanenone ol#navFoot li.btn_kurasi    a:hover { background-position: 0 -200px; }
#okanenone ol#navFoot li.btn_sigoto    a:hover { background-position: 0 -280px; }

#okanenone ol#navFoot li.btn_shogaku12 a       { width: 135px; background: url(../images/btn_foot_gakunen.gif) 0 0 no-repeat; }
#okanenone ol#navFoot li.btn_shogaku34 a       { width: 135px; background: url(../images/btn_foot_gakunen.gif) 0 -80px no-repeat; }
#okanenone ol#navFoot li.btn_shogaku56 a       { width: 135px; background: url(../images/btn_foot_gakunen.gif) 0 -160px no-repeat; }
#okanenone ol#navFoot li.btn_shogaku12 a:hover { background-position: 0 -40px; }
#okanenone ol#navFoot li.btn_shogaku34 a:hover { background-position: 0 -120px; }
#okanenone ol#navFoot li.btn_shogaku56 a:hover { background-position: 0 -200px; }

#okanenone ol#navFoot li.btn_home a            { width: 120px; background: url(../images/btn_foot_home.gif) 0 0 no-repeat; }
#okanenone ol#navFoot li.btn_home a:hover      { background-position: 0 -40px; }



/* NAVNEXT */
#okanenone ol#navNext li {
	margin: 0;
	padding: 0 0 15px 36px;
}
#okanenone ol#navNext li a {
	display: block;
	width: 456px;
	height: 70px;
	overflow: hidden;
	text-indent: -9999px;
	background: url(../images/nav_next.gif) no-repeat;
}
#okanenone ol#navNext li.btn_kodomo a { background-position: 0 0; }
#okanenone ol#navNext li.btn_otona  a { background-position: -456px 0; }
#okanenone ol#navNext li.btn_manga  a { background-position: -912px 0; }
#okanenone ol#navNext li.btn_kodomo a:hover { background-position: 0 -70px; }
#okanenone ol#navNext li.btn_otona  a:hover { background-position: -456px -70px; }
#okanenone ol#navNext li.btn_manga  a:hover { background-position: -912px -70px; }


#okanenone dl.reference {
	padding-bottom: 15px;
}
#okanenone dl.reference dt {
	padding-left: 15px;
	background: url(../images/arrow_01.gif) 0 3px no-repeat;
	font-weight: normal;
}

#okanenone dl.reference dt.pdf {
	padding-left: 15px;
	background: url(../images/arrow_pdf.gif) 0 3px no-repeat;
	font-weight: normal;
}
#okanenone dl.reference dd {
	padding-left: 15px;
	font-size: 80%;
}



/* CONTENTFOOT */
#okanenone #contentFoot {
	height: 1%;
	padding-top: 20px;
	background: url(../images/hr.gif) repeat-x;
}
#okanenone div#recommend {
	clear: both;
	margin: 10px 0 30px;
	padding: 10px;
	border: 1px solid #0891bf;
}
#okanenone div#recommend h3 {
	margin-top: 10px;
	margin-bottom: 5px;
	font-size: 100%;
}
#okanenone div#recommend li {
	padding-left: 15px;
	background: url(../images/arrow_01.gif) 0 3px no-repeat;
	font-weight: normal;
}
#okanenone div#recommend dd {
	padding-left: 15px;
	font-size: 80%;
}


/* MOVEICON */
#okanenone #moveIcon { position: absolute; right: -120px;}


/* popup  */
#teach #contents h3 { margin-top: 20px;}

#teach #contents ol.listNumber li {
	list-style: decimal;
	margin-left: 35px;
	margin-bottom: 0.5em;
	font-size: 85%;
}

#teach  h1.walltitle {
	background: url(../wallpaper/images/popup_walltitle.jpg) 0 0 no-repeat;
	text-indent: -9999px;
	width: 530px;
	height: 80px;
	margin: 10px 0;
	padding: 0;
}

#teach  h1.savertitle {
	background: url(../wallpaper/images/popup_scrtitle.jpg) 0 0 no-repeat;
	text-indent: -9999px;
	width: 530px;
	height: 80px;
	margin: 10px 0;
	padding: 0;
}

#okanenone .frame_extra1 .sp100p img  {
	width: 100%;
}



/* -------------------------------------------------------------------------- */
/* smartphone view */
@media screen and (max-width: 767px) {

#okanenone {
	position: relative;
	width: auto;
}

/* SHARED */
#okanenone #hankoHolder {
	/*display: none;*/
}

/* CONTENTHEAD */
#okanenone #contentHead {
	margin-bottom: 10px;
	width: auto;
	border-radius: 4px;
	background: url("../images/head_theme.gif") no-repeat -5px 0;
}

#okanenone #contentHead .contentPad {
	overflow: hidden;
	width: 100%;
}

#okanenone #contentHead #navHead {
	display: none;
}

#okanenone #contentHead h1 {
	display: inline;
	float: left;
	padding-top: 25px;
	padding-left: 60px;
	width: auto;
	background-image: none;
	line-height: 1.1;
}

/* CONTENTBODY */
/* (LISTS) */
#okanenone #contentBody .contentPad ul li,
#okanenone #contentBody .contentPad ol li {
	margin-bottom: 1em;
}

#okanenone #contentBody .okanenone_listBret ul li {
  list-style: disc;
  margin: 0 0 1em 1.5em;
}

/* (IMAGES) */
#okanenone #contentBody .contentPad img {
	max-width: 100% !important;
	width: 80%;
  margin: auto;
}

#okanenone #contentBody .contentPad img.left,
#okanenone #contentBody .contentPad img.right,
#okanenone #contentBody .contentPad img[align="left"],
#okanenone #contentBody .contentPad img[align="right"] {
	max-width: 50% !important;
	width: auto !important;
}

#okanenone #contentBody img.icon_shogaku,
#okanenone #contentBody .contentPad ul.inline img,
#okanenone #contentBody .contentPad img[src*="images/arrow"],
#okanenone #contentBody .contentPad img[src*="common/images/icon"] {
	width: auto !important;
}

/* (REFERENCE) */
#okanenone dl.reference {
	padding-bottom: 15px;
}

#okanenone dl.reference dt {
	padding-left: 15px;
	background: url("../images/arrow_01.gif") no-repeat 0 3px;
	font-weight: normal;
}
#okanenone dl.reference dt.pdf {
	background-image: url("../images/arrow_pdf.gif");
}

#okanenone dl.reference dd {
	padding-left: 15px;
	font-size: 80%;
}

#okanenone #contentBody .contentPad dl.reference dt,
#okanenone #contentBody .contentPad dl.reference dd {
	padding-top: 5px;
	padding-bottom: 5px;
}

#okanenone #contentBody .contentPad .boxLeft_260,
#okanenone #contentBody .contentPad .boxLeft_260 dl.reference {
	margin-bottom: 0;
	padding-bottom: 0;
}
#okanenone #contentBody .contentPad .boxRight_260,
#okanenone #contentBody .contentPad .boxRight_260 dl.reference {
	margin-top: 0;
}

/* SERIF */
#okanenone .serif {
	margin-bottom: 10px;
	height: 1%;
	background-image: none;
}

#okanenone .serif .pad {
	position: relative;
	margin-top: 70px;
	padding: 4px;
	border: 2px solid #336abc;
	border-radius: 4px;
	background: none #ffffff;
}
#okanenone .serif .pad:after,
#okanenone .serif .pad:before {
	position: absolute;
	bottom: 100%;
	width: 0;
	height: 0;
	border: solid transparent;
	content: " ";
	pointer-events: none;
}
#okanenone .serif .pad:after {
	left: 13%;
	margin-left: -7px;
	border-width: 7px;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
}
#okanenone .serif .pad:before {
	left: 13%;
	margin-left: -10px;
	border-width: 10px;
	border-color: rgba(51, 106, 188, 0);
	border-bottom-color: #336abc;
}

#okanenone .serif h3 {
	margin: -70px 0 0 0;
	padding: 70px 0 0 0;
	background-image: none;
	font-size: 94%;
}
#okanenone .serif h3.face_1 { background: url("../images/face_1.gif") no-repeat 0 0; }
#okanenone .serif h3.face_2 { background: url("../images/face_2.gif") no-repeat 0 0; }
#okanenone .serif h3.face_3 { background: url("../images/face_3.gif") no-repeat 0 0; }
#okanenone .serif h3.face_4 { background: url("../images/face_4.gif") no-repeat 0 0; }

/* QUIZ:listQuiz */

#okanenone .frame_quiz .pad {
    padding: 10px 20px 40px;}

#okanenone #contentBody dl.listQuiz {
	margin-right: 10px;
	margin-left: 10px;
}

#okanenone #contentBody dl.listQuiz dt,
#okanenone #contentBody dl.listQuiz dd {
	float: none;
	margin-left: 0 !important;
	width: 100%;
}

#okanenone #contentBody dl.listQuiz img.face {
	width: auto !important;
}

/* QUIZ:listQuizCol3 */
#okanenone #contentBody dl.listQuizCol3 dt,
#okanenone #contentBody dl.listQuizCol3 dd {
	float: none;
	margin-left: 0 !important;
	width: 100% !important;
}

#okanenone #contentBody dl.listQuizCol3 dd.answer.ans-center {
	display: inline-block;
	float: none !important;
	margin: 0 auto;
	width: 100%;
	border: none;
	text-align: center;
}



#okanenone #contentBody dl.listQuizCol3 dd.answer button {
	width: 80px;
}


/* (COMMENT) */
#okanenone #contentBody .pad .comment {
	margin-right: 5% !important;
}
#okanenone #contentBody .pad .comment h5 {
	margin-top: 5px;
}
#okanenone #contentBody .pad .comment p {
	margin-right: 0 !important;
	margin-bottom: 0;
	margin-left: 0 !important;
}
#okanenone #contentBody .pad .comment p img {
	max-width: 100% !important;
	width: 80%;
	height: auto;
}
#okanenone #contentBody .pad .comment p img.left,
#okanenone #contentBody .pad .comment p img.right {
	width: auto;
}

#okanenone #contentBody .img-right {
 display: block;
	float: none !important;
	margin: 0 auto;
	width: 100%;
}

/* YESNO CHART */
#okanenone #contentBody #yesnoChart {
	margin-right: 5%;
	margin-left: 5%;
	width: 90%;
}

#okanenone #contentBody #yesnoChart img {
	width: auto;
}

#okanenone #contentBody #yesnoChart .section {
	width: 500%;
}

#okanenone #contentBody #yesnoChart .section ul {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

#okanenone #contentBody #yesnoChart .section li {
	width: 20%;
}

#okanenone #contentBody #yesnoChart .section li p {
	padding-right: 0;
	padding-left: 0;
	height: 50px;
	text-align: center;
}
#okanenone #contentBody #yesnoChart .section li p.yesnonav a {
	margin-right: 10%;
	margin-left: 10%;
}

#okanenone #contentBody #yesnoChart .section li dl.listKaiwa {
	margin-left: -5% !important;
	padding-top: 10px;
	padding-right: 0;
	padding-left: 5% !important;
	width: 100%;
}

#okanenone #contentBody #yesnoChart .section li dl.listKaiwa dd {
	padding-right: 2%;
}

/* KAIWA */
#okanenone #contentBody dl.listKaiwa {
	margin-right: 10px;
	margin-left: 10px;
}

#okanenone #contentBody dl.listKaiwa dt img,
#okanenone #contentBody dl.listKaiwa img.face {
	width: auto !important;
}

/* ASK */

/* YOUGO */

/* FRAMES */
#okanenone .frame_manga,
#okanenone .frame_quiz,
#okanenone .frame_work,
#okanenone .frame_sentaku,
#okanenone .frame_kaiwa,
#okanenone .frame_extra1,
#okanenone .frame_extra2,
#okanenone .frame_extra3 {
	overflow: hidden;
	margin-bottom: 20px;
	/*margin-left: -2%;
	padding-left: 2%;*/
	max-width: 100% !important;
	height: 1%;
	background-size: 100%;
}
#okanenone .frame_manga .frameTop,
#okanenone .frame_quiz .frameTop,
#okanenone .frame_work .frameTop,
#okanenone .frame_sentaku .frameTop,
#okanenone .frame_kaiwa .frameTop,
#okanenone .frame_extra1 .frameTop,
#okanenone .frame_extra2 .frameTop,
#okanenone .frame_extra3 .frameTop {
/*	margin-left: -2%;
	padding-left: 2%;*/
	max-width: 100% !important;
	height: auto;
	background-size: 100%;
}
#okanenone .frame_manga .frameTop { min-height: 77px; }
#okanenone .frame_quiz .frameTop { min-height: 40px; }
#okanenone .frame_work .frameTop { min-height: 40px; }
#okanenone .frame_sentaku .frameTop { min-height: 60px; }
#okanenone .frame_kaiwa .frameTop { min-height: 40px; }
#okanenone .frame_extra1 .frameTop { min-height: 60px; }
#okanenone .frame_extra2 .frameTop { min-height: 40px; }
#okanenone .frame_extra3 .frameTop { min-height: 40px; }

#okanenone .frame_manga .pad,
#okanenone .frame_quiz .pad,
#okanenone .frame_work .pad,
#okanenone .frame_sentaku .pad,
#okanenone .frame_kaiwa .pad,
#okanenone .frame_extra1 .pad,
#okanenone .frame_extra2 .pad,
#okanenone .frame_extra3 .pad {
	/*margin-left: -2%;*/
	padding-right: 0;
	/*padding-left: 2%;*/
	max-width: 100% !important;
	background-size: 100%;
	padding:10px 20px 40px;
	text-align: center;
}

#okanenone .frame_quiz .pad h3,
#okanenone .frame_work .pad h3,
#okanenone .frame_sentaku .pad h3,
#okanenone .frame_kaiwa .pad h3,
#okanenone .frame_extra1 .pad h3,
#okanenone .frame_extra2 .pad h3,
#okanenone .frame_extra3 .pad h3,

#okanenone .frame_quiz .pad h4,
#okanenone .frame_work .pad h4,
#okanenone .frame_sentaku .pad h4,
#okanenone .frame_kaiwa .pad h4,
#okanenone .frame_extra1 .pad h4,
#okanenone .frame_extra2 .pad h4,
#okanenone .frame_extra3 .pad h4,

#okanenone .frame_quiz .pad p,
#okanenone .frame_work .pad p,
#okanenone .frame_sentaku .pad p,
#okanenone .frame_kaiwa .pad p,
#okanenone .frame_extra1 .pad p,
#okanenone .frame_extra2 .pad p,
#okanenone .frame_extra3 .pad p,

#okanenone .frame_quiz .pad ul,
#okanenone .frame_work .pad ul,
#okanenone .frame_sentaku .pad ul,
#okanenone .frame_kaiwa .pad ul,
#okanenone .frame_extra1 .pad ul,
#okanenone .frame_extra2 .pad ul,
#okanenone .frame_extra3 .pad ul,

#okanenone .frame_quiz .pad ol,
#okanenone .frame_work .pad ol,
#okanenone .frame_sentaku .pad ol,
#okanenone .frame_kaiwa .pad ol,
#okanenone .frame_extra1 .pad ol,
#okanenone .frame_extra2 .pad ol,
#okanenone .frame_extra3 .pad ol,

#okanenone .frame_quiz .pad dl,
#okanenone .frame_work .pad dl,
#okanenone .frame_sentaku .pad dl,
#okanenone .frame_kaiwa .pad dl,
#okanenone .frame_extra1 .pad dl,
#okanenone .frame_extra2 .pad dl,
#okanenone .frame_extra3 .pad dl {
	margin-right: 5% !important;
	margin-left: 5% !important;
	text-align: left;
}

#okanenone .frame_quiz .pad ol li,
#okanenone .frame_work .pad ol li,
#okanenone .frame_sentaku .pad ol li,
#okanenone .frame_kaiwa .pad ol li,
#okanenone .frame_extra1 .pad ol li,
#okanenone .frame_extra2 .pad ol li,
#okanenone .frame_extra3 .pad ol li {
	margin-bottom: 1em;
}

#okanenone .frame_quiz .pad p img,
#okanenone .frame_work .pad p img,
#okanenone .frame_sentaku .pad p img,
#okanenone .frame_kaiwa .pad p img,
#okanenone .frame_extra1 .pad p img,
#okanenone .frame_extra2 .pad p img,
#okanenone .frame_extra3 .pad p img {
	max-width: 100% !important;
}

/* (MANGA) */
#okanenone .frame_manga .pad img {
	margin-bottom: 10px;
	max-width: 100% !important;
	/*width: 100% !important;*/
}

/* (COLUMN LAYOUT) */
#okanenone .frame_quiz .pad .col2 .column,
#okanenone .frame_work .pad .col2 .column,
#okanenone .frame_sentaku .pad .col2 .column,
#okanenone .frame_kaiwa .pad .col2 .column,
#okanenone .frame_extra1 .pad .col2 .column,
#okanenone .frame_extra2 .pad .col2 .column,
#okanenone .frame_extra3 .pad .col2 .column,
#okanenone .frame_quiz .pad .col3 .column,
#okanenone .frame_work .pad .col3 .column,
#okanenone .frame_sentaku .pad .col3 .column,
#okanenone .frame_kaiwa .pad .col3 .column,
#okanenone .frame_extra1 .pad .col3 .column,
#okanenone .frame_extra2 .pad .col3 .column,
#okanenone .frame_extra3 .pad .col3 .column {
	width: 100%;
}

#okanenone .frame_quiz .pad .col2 .column img,
#okanenone .frame_work .pad .col2 .column img,
#okanenone .frame_sentaku .pad .col2 .column img,
#okanenone .frame_kaiwa .pad .col2 .column img,
#okanenone .frame_extra1 .pad .col2 .column img,
#okanenone .frame_extra2 .pad .col2 .column img,
#okanenone .frame_extra3 .pad .col2 .column img {
	width: 49% !important;
}



#okanenone .frame_quiz .pad .col3 .column img,
#okanenone .frame_work .pad .col3 .column img,
#okanenone .frame_sentaku .pad .col3 .column img,
#okanenone .frame_kaiwa .pad .col3 .column img,
#okanenone .frame_extra1 .pad .col3 .column img,
#okanenone .frame_extra2 .pad .col3 .column img,
#okanenone .frame_extra3 .pad .col3 .column img {
	width: 32% !important;
}

/* (COLUMN LAYOUT:CONTENTSNOTE) */
#okanenone .contentsNote .col2 .column,
#okanenone .contentsNote .col3 .column {
	width: 100%;
}

#okanenone .contentsNote .col2 .column img {
	width: 49% !important;
}

#okanenone .contentsNote .col3 .column img {
	width: 32% !important;
}

/* NAVHEAD */

/* NAVFOOT */
#okanenone ol#navFoot {
	margin: 10px 0 0;
	padding: 5px 0;
	width: auto;
	height: auto;
	border-radius: 5px;
	background-color: #f7f3e7;
}

#okanenone ol#navFoot li {
	float: none;
	margin: 0 5px;
	padding: 5px 0 5px 20px;
	height: auto;
	background: url("/public/document/container/program/index.html") no-repeat 3px 7px #ffffff;
}

#okanenone ol#navFoot li a {
	display: inline;
	float: none;
	overflow: hidden;
	height: auto;
	text-indent: 0;
}
#okanenone ol#navFoot li.btn_theme a,
#okanenone ol#navFoot li.btn_tukaikata a,
#okanenone ol#navFoot li.btn_yakuwari a,
#okanenone ol#navFoot li.btn_kurasi a,
#okanenone ol#navFoot li.btn_sigoto a,
#okanenone ol#navFoot li.btn_shogaku12 a,
#okanenone ol#navFoot li.btn_shogaku34 a,
#okanenone ol#navFoot li.btn_shogaku56 a,
#okanenone ol#navFoot li.btn_home a {
	width: auto;
	background-image: none;
}

/* NAVNEXT */
#okanenone ol#navNext li {
	margin: 0 0 10px 0;
	padding: 0;
}
#okanenone ol#navNext li:last-child {
	margin-bottom: 0;
}

#okanenone ol#navNext li a {
	width: 100%;
	height: auto;
	background-size: 300% 200%;
}
#okanenone ol#navNext li.btn_kodomo a { background-position: 0 0; }
#okanenone ol#navNext li.btn_otona  a { background-position: 50% 0; }
#okanenone ol#navNext li.btn_manga  a { background-position: 100% 0; }
#okanenone ol#navNext li.btn_kodomo a:hover { background-position: 0 100%; }
#okanenone ol#navNext li.btn_otona  a:hover { background-position: 50% 100%; }
#okanenone ol#navNext li.btn_manga  a:hover { background-position: 100% 100%; }

#okanenone ol#navNext li a img {
	max-width: 100% !important;
	width: 100%;
	height: auto;
}

/* CONTENTFOOT */
#okanenone #contentFoot ol#navGakunen {
	width: auto;
	height: auto;
	background-image: none;
}

/* MOVEICON */
#okanenone #moveIcon {
	display: none;
}

/* POPUP */

/* MISCELLANEOUS */
/* (INDENT) */
#okanenone .indent {
	margin-left: 0;
}

#okanenone .contentsNote .indent {
	margin-left: 15px;
}

/* FINE-TUNING TO THE INDIVIDUAL PROBLEM */
/* (shogaku34/kurasi301/otona.html) */
#okanenone #contentBody .contentPad img[src$="images/mark_st.gif"],
#okanenone #contentBody .contentPad img[src$="images/mark_baa.gif"] {
	width: auto;
}

/* (shogaku34/kurasi302/kodomo.html) */
#okanenone #contentBody .contentPad img[src$="images/k302_illust02.gif"],
#okanenone #contentBody .contentPad img[src$="images/k302_illust03.gif"] {
	width: auto;
}

/* (shogaku56/tukaikata504/kodomo.html) */
#okanenone #contentBody .contentPad table td img {
	width: 100%;
}


/* end media query */
}

@media (max-width: 480px) {

#okanenone .frame_extra1 .pad .col2 .column.sp100p img {
 width:90% !important;
}
#okanenone .nodisplay { display: none !important; }

}



















/* ------------------------------------------------------------ */
/*                  2018 JavaScript hanko Engine                */
/* ------------------------------------------------------------ */
.moveicon {
  width: 95px;
  height: 240px;
  background: url(../images/moveicon/balloon.png) no-repeat;
  background-size: auto 85px;
}
.moveicon-msg {
  position: absolute;
  top: 32px;
  left: 8px;
  width: 75px;
  height: 13px;
  background: url(../images/moveicon/msg.png) no-repeat;
  background-size: auto 13px;
}
.moveicon-msg.v1 { background-position: 0px 0; }
.moveicon-msg.v2 { background-position: -75px 0; }
.moveicon-msg.v3 { background-position: -150px 0; }
.moveicon-msg.v4 { background-position: -225px 0; }
.moveicon-msg.v5 { background-position: -300px 0; }

.moveicon-teacher {
  position: absolute;
  top: 85px;
  left: 0px;
  width: 95px;
  height: 140px;
  background: url(../images/moveicon/teacher.png) no-repeat;
  background-size: auto 140px;
}
.moveicon-teacher.v1 { background-position: 0px 0; }
.moveicon-teacher.v2 { background-position: -95px 0; }
.moveicon-teacher.v3 { background-position: -190px 0; }
.moveicon-teacher.v4 { background-position: -285px 0; }
.moveicon-teacher.v5 { background-position: -380px 0; }
.moveicon-teacher.v6 { background-position: -475px 0; }
.moveicon-teacher.v7 { background-position: -570px 0; }
.moveicon-teacher.v8 { background-position: -665px 0; }


.btn-hanko {
  overflow: hidden;
  display: block;
  max-width: 100%;
  width: 378px;
  height: 77px;
  margin: 40px auto;
  background: url(../images/btn/btn-hanko.png) no-repeat;
  background-size: cover;
}
.btn-hanko:hover {
  background-position: 0 -100px;
}
.btn-hanko.done {
  background-position: 0 -200px;
  cursor: default;
}

@media (max-width: 480px) {
  .btn-hanko {
    width: 284px;
    height: 58px;
  }
  .btn-hanko:hover {
    background-position: 0 -75px;
  }
  .btn-hanko.done {
    background-position: 0 -150px;
    cursor: default;
  }
}