@charset "UTF-8";
/* CSS Document */

/*レイアウト*/

/*h1{
	margin:5px 0 0 0;
	font-size: 10px;
	color:#987e37;
}*/
h1 {
	/*display: none;*/
}



h2{
	margin:30px 0 7px 0;
}


#header{
	margin:0 auto;
	padding:25px 0 28px 0;
	width:960px;
	overflow:hidden;
}

#header #logo{
	float:left;
}

#header .right{
	width:510px;
	margin:3px 0 0 0;
	float:right;
	text-align:right;
}


/*コンテンツ*/

#main_bg{
	width:100%;
	overflow:hidden;
	font-size:75%;
	font-family: Meiryo, "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	color:#000;
	letter-spacing:1px;
}

#main{
	width:960px;
	margin:0 auto 60px;
	overflow:hidden;
}

#main .cin1{
	width:960px;
	overflow:hidden;
}



/*下層ページ*/

#maintitle{
	width:960px;
	height:136px;
	margin: 0;

	position: relative;
}
#maintitle a {
	display: inline-block;
	position: absolute;
	right: 25px;
	top: 52px;
}

#maintitle #btn{
	width:220px;
	height:54px;
}

#pagetitle{
	width:960px;
	margin:10px 0 5px 0;
	text-align:center;
}

#main .lbox1{
	width:465px;
	margin:19px 0 0 0;
	float:left;
	clear:both;
}

#main .rbox1{
	width:465px;
	margin:29px 0 0 0;
	float:right;
}

#main .rbox1_2{
	width:465px;
	margin:29px 0 60px 0;
	float:right;
}

#main .rbox1_3{
	width:465px;
	margin:19px 0 0 0;
	float:right;
}

#main .lbox1_2{
	width:465px;
	margin:26px 0 0 0;
	float:left;
	clear:both;
}

#main .rbox1_4{
	width:465px;
	margin:26px 0 0 0;
	float:right;
}

#main .lbox1_3{
	width:465px;
	margin:50px 0 0 0;
	float:left;
	clear:both;
}

#main .rbox1_5{
	width:465px;
	margin:50px 0 0 0;
	float:right;
}


.tbox1{
	width:465px;
	margin:20px 0 0 0;
	font-size:116%;
	line-height:1.8em;
}

.subtitle1{
	width:960px;
	padding:90px 0 20px 0;
	text-align:center;
	clear:both;
}

.subtitle2{
	width:465px;
	text-align:center;
}

#main .sbox1{
	width:465px;
	height:296px;
	margin:20px 0 0 0;
	float:left;
	clear:both;
}

#main .sbox2{
	width:465px;
	height:296px;
	margin:20px 0 0 0;
	/*background:url(../images/step1/select02.jpg);*/
	float:right;
}

#main .sbox3{
	width:465px;
	height:296px;
	margin:20px 0 0 0;
	/*background:url(../images/step1/select03.jpg);*/
	float:left;
	clear:both;
}

#main .sbox4{
	width:465px;
	height:296px;
	margin:20px 0 0 0;
	/*background:url(../images/step1/select04.jpg);*/
	float:right;
}

#main .sbox1 .tbox,
#main .sbox2 .tbox,
#main .sbox3 .tbox,
#main .sbox4 .tbox{
	width:220px;
	margin:111px 0 0 30px;
	line-height:1.5em;
}

#main #nbtn{
	width:435px;
	height:51px;
	margin:0 auto;
	padding:60px 0 0 0;
	clear:both;
}

#main #btnbox{
	width:901px;
	margin:0 auto 60px;
	padding:60px 0 0 0;
	overflow:hidden;
	clear:both;
}


#main #btnbox #pbtn1{
	width:435px;
	height:51px;
	float:left;
}

#main #btnbox #nbtn1{
	width:435px;
	height:51px;
	float:right;
}

#oyano2{
	width:960px;
	height:181px;
	background:url(../images/step1/oyano_bg.jpg) no-repeat;
	clear:both;
}

#oyano2 #btn{
	width:235px;
	height:51px;
	padding:113px 0 0 689px;
}

#main .osusumebox1{
	width:465px;
	height:326px;
	margin:40px 0 0 0;
	background:url(../images/step1/osusume_bg.gif) bottom no-repeat;
	overflow:hidden;
	float:left;
}

#main .osusumebox2{
	width:465px;
	height:326px;
	margin:40px 0 0 0;
	background:url(../images/step1/osusume_bg.gif) bottom no-repeat;
	overflow:hidden;
	float:right;
}

#main .osusumebox3{
	width:465px;
	height:326px;
	margin:40px 0 50px 0;
	background:url(../images/step1/osusume_bg.gif) bottom no-repeat;
	overflow:hidden;
	float:left;
}

#main .osusumebox4{
	width:465px;
	height:326px;
	margin:40px 0 50px 0;
	background:url(../images/step1/osusume_bg.gif) bottom no-repeat;
	overflow:hidden;
	float:right;
}


#main .osusumebox1 .tbox,
#main .osusumebox2 .tbox,
#main .osusumebox3 .tbox,
#main .osusumebox4 .tbox{
	width: 250px;
	margin: 20px 0 0 30px;
	line-height:1.5em;
	float:left;
}

#main .osusumebox1 .ph,
#main .osusumebox2 .ph,
#main .osusumebox3 .ph,
#main .osusumebox4 .ph{
	width:143px;
	margin:20px 22px 0 0;
	float:right;
}

#main #btnbox1{
	width:960px;
	height:96px;
	background:url(../images/step1/btnbg.gif) no-repeat;
	overflow:hidden;
	clear:both;
}

#main #btnbox2{
	width:960px;
	height:96px;
	margin:24px 0 0 0;
	background:url(../images/step1/btnbg.gif) no-repeat;
	overflow:hidden;
}

#main #btnbox1 .title,
#main #btnbox2 .title{
	margin:33px 0 0 27px;
	float:left;
}

#main #btnbox1 .btn,
#main #btnbox2 .btn{
	margin:26px 28px 0 0;
	float:right;
}

#main #gtitle1{
	margin:19px 0 23px 0;
}

#main #gtitle2{
	margin:47px 0 0 0;
}

#main .gbtnbox1{
	width:957px;
	margin:0 0 13px 0;
	overflow:hidden;
}

#main .gbtnbox1 li{
	width:305px;
	height:71px;
	margin:0 7px;
	float:left;
}
#main .gbtnbox1 li:hover {
	opacity: 0.8;
}

.tbox2{
	width:785px;
	margin:20px 0 0 0;
	font-size:116%;
	line-height:1.8em;
}

.gsubbox1{
	width:310px;
	margin:27px 0 0 0;
	line-height:1.8em;
	float:left;
}

.gsubbox2{
	width:280px;
	margin:27px 0 0 20px;
	line-height:1.8em;
	float:left;
}

.gsubbox3{
	width:320px;
	margin:27px 0 0 20px;
	line-height:1.8em;
	float:left;
}

.book_img {
	margin: 10px 0px 0px 40px;
} 
.book_img img {
	height: 200px;
	width: auto;
}

.gsubbox1 ul{
	width:300px;
	margin:16px 0 0 10px;
	font-size: 116%;
}

.gsubbox2 ul{
	width:270px;
	margin:16px 0 0 10px;
	font-size: 116%;
}

.gsubbox3 ul{
	width:310px;
	margin:16px 0 0 10px;
	font-size: 116%;
}

.gsubbox1 ul li .circle,
.gsubbox2 ul li .circle,
.gsubbox3 ul li .circle{
	color:#42a69e;
}

#book{
	width:960px;
	height:266px;
	margin:50px 0 0 0;
	background:url(../images/step2/book_bg.gif) no-repeat;
	overflow:hidden;
}

#book #ph{
	width:180px;
	margin:34px 0 0 22px;
	float:left;
}

#book #rbox{
	width:717px;
	margin:50px 22px 0 0;
	float:right;
	overflow:hidden;
}

#book #rbox #title{
	width:717px;
}

#book #rbox #before{
	margin:30px 0 0 0;
	float:left;
}

#book #rbox #after{
	margin:30px 0 0 0;
	float:right;
}

#illust_center{
	width:960px;
	text-align:center;
}

#jyoukyuu{
	width:960px;
	height:248px;
	margin:50px 0 0 0;
	/*background:url(../images/step2/jyoukyuu_bg.gif) no-repeat;*/
}

#jyoukyuu #title{
	margin:80px 0 0 33px;
}

#jyoukyuu #txt{
	width:627px;
	margin:22px 0 0 33px;
}

#question{
	width:960px;
	margin:20px 0 0 0;
	padding:30px 0 30px 0;
	text-align:center;
	background:#ff9000;
	border-radius:9px;
}

#question .tbox{
	width:900px;
	margin:20px auto 30px auto;
	text-align:left;
	font-size:130%;
	line-height:1.8em;
	font-weight:bold;
	color:#fff;
}

#question .tbox2{
	width:900px;
	margin:20px auto 10px auto;
	text-align:left;
	font-size:130%;
	line-height:1.8em;
	font-weight:bold;
	color:#fff;
}

#question .tbox3{
	width:900px;
	margin:10px auto 0 auto;
	text-align:left;
	font-size:130%;
	line-height:1.8em;
	font-weight:bold;
	color:#fff;
}


#question .arrow{
	width:800px;
	margin:0 auto;
	padding:0 0 0 100px;
	text-align:left;
}

#ebox1{
	width:465px;
	height:236px;
	margin:20px 0 0 0;
	background:url(../images/step2/reibun_bg01.gif);
	float:left;
	clear:both;
}

#ebox2{
	width:465px;
	height:236px;
	margin:20px 0 0 0;
	background:url(../images/step2/reibun_bg02.gif);
	float:right;
}

#ebox3{
	width:465px;
	height:236px;
	margin:20px 0 0 0;
	background:url(../images/step2/reibun_bg03.gif);
	float:left;
	clear:both;
}

#ebox4{
	width:465px;
	height:236px;
	margin:20px 0 0 0;
	background:url(../images/step2/reibun_bg04.gif);
	float:right;
}

#ebox1 .title,
#ebox2 .title,
#ebox3 .title,
#ebox4 .title{
	margin:69px 0 0 29px;
}

#ebox1 .tbox,
#ebox2 .tbox,
#ebox3 .tbox,
#ebox4 .tbox{
	width:405px;
	margin:15px 0 0 30px;
	line-height:1.8em;
}

.tbox3{
	width:785px;
	margin:2px 0 0 0;
	font-size:130%;
	line-height:1.8em;
	font-weight:bold;
}
.tbox3--ma-pc {
	margin: 2px auto 0;
}

.cap1{
	width:960px;
	margin:18px 0 0 0;
	text-align:right;
}

.tbox4{
	width:785px;
	margin:34px 0 0 0;
	font-size:130%;
	line-height:1.8em;
	font-weight:bold;
}

#checkbox{
	width:960px;
	margin:50px 0 0 0;
	overflow:hidden;
}

#checkbox_white{
	width:956px;
	height:552px;
	border-left:#0180c2 solid 2px;
	border-right:#0180c2 solid 2px;
	background:#fff;
	overflow:hidden;
}

#checkbox_white #in{
	width:814px;
	margin:30px 0 0 0;
	text-align:center;
	float:left;
}

#checkbox_green{
	width:960px;
	height:104px;
	background:#0180c2;
	overflow:hidden;
}

#checkbox_white #lbtn{
	width:55px;
	height:154px;
	margin:189px 0 0 20px;
	float:left;
}

#checkbox_white #rbtn{
	width:55px;
	height:154px;
	margin:189px 12px 0 0;
	float:right;
}

#checkbox_green #lbox{
	width:389px;
	margin:0 0 0 79px;
	float:left;
}

#checkbox_green #rbox{
	width:387px;
	margin:0 70px 0 0;
	float:right;
}

#checkbox_green #lbox img,
#checkbox_green #rbox img{
	margin:11px 0 0 0;
}

#qbox{
	width:960px;
	margin:50px 0 0 0;
}

#qbox .abtn{
	width:238px;
	height:53px;
	margin:30px auto 0 auto;
}

#pbox{
	width:960px;
	margin:60px 0 0 0;
	overflow:hidden;
}

#pbox #fleft1{
	width:300px;
	margin:0 0 0 0;
	float:left;
}

#pbox #fleft2{
	width:300px;
	margin:0 0 0 30px;
	float:left;
}

#i_title{
	width:960px;
	text-align:center;
}

.i_box01{
	width:960px;
	margin:60px 0 0 0;
	overflow:hidden;
}

.i_box02{
	width:960px;
	margin:20px 0 0 0;
	overflow:hidden;
}

.i_box01 .ph,
.i_box02 .ph{
	width:228px;
	float:left;
}

.i_box01 .txt,
.i_box02 .txt{
	width:703px;
	float:right;
}

.i_box01 .txtbox,
.i_box02 .txtbox{
	margin:20px 0 0 0;
	line-height:1.8em;
}



.i_box02 .txt2{
	width:703px;
	float:left;
}

.i_box02 .ph2{
	width:228px;
	float:right;
}

#i_btn{
	width:220px;
	height:54px;
	margin:0 auto;
	padding:60px 0 0 0;
	clear:both;
}

#oyano2Prof{
	width:920px;
	background:#fff;
	padding:20px;
	display:none;
}

#oyano2Prof .in{
	width:880px;
	border:solid 1px #ffcf91;
	background:#fffdf7;
	padding:10px 20px;
}




/*フッター*/

#footer_bg{
	width:100%;
	margin:70px 0 0 0;
	text-align:center;
	border-top:3px solid #0180c2;
	background:#FFF;
}

#footer{
	width:960px;
	margin:0 auto;
	padding:25px 0;
	font-size:83%;
	line-height:3em;
}

#footer a{
	color:#00a5ea;
}

#footer a:hover{
	color:#43c7ff;
}


/*---------------------------------

BC_MEM-23383 【教育情報サイト】読書感想文_画像のテキスト化2

---------------------------------*/
/* インタビュー */
.interview-oyano-ttl {
	display: inline-block;
	color: #FF9000;
	font-size: 46px;
	font-weight: bold;
	line-height: 1;
	margin-top: 40px;
	margin-bottom: 12px;

	position: relative;
}
.interview-oyano-ttl::before {
	content: '';
	background-image: url(/dokusho/images/common/20200605/pagetitle.gif);
	background-repeat: repeat-x;

	position: absolute;
	width: 100px;
	height: 30px;
	top: 50%;
	left: -14px;
	-webkit-transform: translate(-100%, -50%);
	    -ms-transform: translate(-100%, -50%);
	        transform: translate(-100%, -50%);
}
.interview-oyano-ttl::after {
	content: '';
	background-image: url(/dokusho/images/common/20200605/pagetitle.gif);
	background-repeat: repeat-x;

	position: absolute;
	width: 100px;
	height: 30px;
	top: 50%;
	right: -14px;
	-webkit-transform: translate(100%, -50%);
	    -ms-transform: translate(100%, -50%);
	        transform: translate(100%, -50%);
}
.interview-oyano-subttl {
	font-size: 28px;
	font-weight: bold;
}
.interview-subttl-tch-name {
	display: inline-block;
	color: #018FCA;
	font-size: 40px;
	margin: 0 12px;
}
.interview-subttl-tch-name rt {
	color: #000;
	font-size: 12px;
	text-align: center;
}

/* インタビューページh2 */
.interview-oyano-h2 {
	margin: 0;

	color: #FF5A00;
	font-size: 29px;
	font-weight: bold;

	border-bottom: dotted 3px #FF5A00;
}
.interview-oyano-h2--01 {
	color: #FF5A00;
	border-color: #FF5A00;
}
.interview-oyano-h2--02 {
	color: #30A65D;
	border-color: #30A65D;
}
.interview-oyano-h2--03 {
	color: #366CA9;
	border-color: #366CA9;
}
.interview-oyano-h2--04 {
	color: #9832B5;
	border-color: #9832B5;
}
.interview-oyano-h2--05 {
	color: #EA4898;
	border-color: #EA4898;
}

/* stepページ メインタイトル */
.step-ttl-area {
	margin-top: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;

	background-image: url(/dokusho/images/step1/20200605/pagetitle01.gif);
	background-size: contain;
	background-repeat: no-repeat;
}
.step-ttl-area--01 {
	background-image: url(/dokusho/images/step1/20200605/pagetitle01.gif);
	padding-top: 18px;
	padding-bottom: 23px;
}
.step-ttl-area--02 {
	background-image: url(/dokusho/images/step2/20200605/pagetitle02.gif);
	padding-top: 42px;
	padding-bottom: 31px;
}
.step-ttl-area--03 {
	background-image: url(/dokusho/images/step3/20200605/pagetitle03.gif);
	padding-top: 43px;
}
.step-ttl-sub {
	color: #fff;
	font-size: 32px;
	font-weight: bold;
	line-height: 1;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 44px 0;
	padding-left: 83px;

	width: 238px;
	position: relative;
}
.step-ttl-sub-num {
	position: absolute;

	color: #FFBA00;
	font-weight: bold;

	top: 50%;
	left: 35px;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	z-index: 10;
}
.step-ttl-sub-num::before {
	content: '';
	background-color: #fff;

	width: 45px;
	height: 45px;
	border-radius: 100%;

	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	z-index: -1;
}
.step-ttl-area--03 .step-ttl-sub-num {
	color: #FF1300;
}
.step-ttl-main {
	color: #fff;
	font-size: 35px;
	font-weight: bold;

	-webkit-box-sizing: border-box;

	        box-sizing: border-box;
	padding-left: 20px;
	line-height: 1.1;
}
.step-ttl-main--min {
	font-size: 24px;
}

.step-point-area {
	padding: 10px 14px 9px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background-color: #009944;
	border-radius: 9px;
	margin-bottom: 20px;
}
.step-point-txt {
	display: inline-block;
	color: #fff;
	font-size: 25px;
	font-weight: bold;
	line-height: 1;

	position: relative;
}
.step-point-num {
	position: absolute;

	top: 50%;
	right: -12px;
	-webkit-transform: translate(-50%, 100%);
	    -ms-transform: translate(-50%, 100%);
	        transform: translate(-50%, 100%);

	color: #009944;
	font-size: 32px;
	font-weight: bold;
}
.step-point-num {
	position: absolute;

	top: 50%;
	right: -24px;
	-webkit-transform: translate(100%, -50%);
	    -ms-transform: translate(100%, -50%);
	        transform: translate(100%, -50%);

	color: #009944;
	font-size: 32px;
	font-weight: bold;
}
.step-point-num::before {
	content: '';
	background-color: #fff;

	width: 54px;
	height: 54px;
	border: solid 3px #009944;;
	border-radius: 100%;

	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	z-index: -1;
}
.step-point-ttl {
	color: #018FCA;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.1;
	padding-bottom: 8px;
	border-bottom: dotted 3px #018FCA;
}

.step-choose-area {
	padding: 10px 14px 9px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background-color: #009944;
	border-radius: 9px;
	margin-top: 60px;
	margin-bottom: 20px;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.step-choose-txt {
	display: inline-block;
	color: #fff;
	font-size: 25px;
	font-weight: bold;
	line-height: 1;

	position: relative;
}
.step-choose-num {
	position: absolute;

	top: 50%;
	right: -12px;
	-webkit-transform: translate(-50%, 100%);
	    -ms-transform: translate(-50%, 100%);
	        transform: translate(-50%, 100%);

	color: #009944;
	font-size: 32px;
	font-weight: bold;
}
.step-choose-num {
	position: absolute;

	top: 50%;
	right: -24px;
	-webkit-transform: translate(100%, -50%);
	    -ms-transform: translate(100%, -50%);
	        transform: translate(100%, -50%);

	color: #009944;
	font-size: 32px;
	font-weight: bold;
}
.step-choose-num::before {
	content: '';
	background-color: #fff;

	width: 54px;
	height: 54px;
	border: solid 3px #009944;;
	border-radius: 100%;

	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	z-index: -1;
}
.step-choose-ttl {
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	line-height: 1;
	padding-left: 70px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.step-choose-subttl {
	color: #018FCA;
	font-size: 25px;
	font-weight: bold;
	line-height: 1.1;
}

.step-star-ttl {
	display: inline-block;
	color: #009944;
	font-size: 46px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	position: relative;
}
.step-star-ttl::before {
	content: '';
	background-image: url(/dokusho/images/common/20200605/pagetitle-green.gif);
	background-repeat: repeat-x;
	position: absolute;
	width: 100px;
	height: 30px;
	top: 50%;
	left: -14px;
	-webkit-transform: translate(-100%, -50%);
	    -ms-transform: translate(-100%, -50%);
	        transform: translate(-100%, -50%);
}
.step-star-ttl::after {
	content: '';
	background-image: url(/dokusho/images/common/20200605/pagetitle-green.gif);
	background-repeat: repeat-x;
	position: absolute;
	width: 100px;
	height: 30px;
	top: 50%;
	right: -14px;
	-webkit-transform: translate(100%, -50%);
	    -ms-transform: translate(100%, -50%);
	        transform: translate(100%, -50%);
}

.step-box-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.step-box {
	width: 465px;
	height: 276px;
	margin-top: 40px;

	-webkit-box-sizing: border-box;

	        box-sizing: border-box;
	padding-top: 44px;
	padding-left: 26px;

	position: relative;
	background-size: contain;
	background-repeat: no-repeat;

	position: relative;
}
.step-box--01 {
	background-image: url(/dokusho/images/step1/20200605/select01_sum.jpg);
}
.step-box--02 {
	background-image: url(/dokusho/images/step1/20200605/select02_sum.jpg);
}
.step-box--03 {
	background-image: url(/dokusho/images/step1/20200605/select03_sum.jpg);
}
.step-box--04 {
	background-image: url(/dokusho/images/step1/20200605/select04_sum.jpg);
}
.step-box-deco {
	position: absolute;
	background-color: #FF9001;

	display: inline-block;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;

	-webkit-box-sizing: border-box;

	        box-sizing: border-box;
	padding: 7px 12px 8px;
	padding-right: 20px;
	border-radius: 6px;

	top: -10px;
	left: 18px;
}
.step-box-deco-num {
	position: absolute;

	top: 50%;
	right: 2px;
	-webkit-transform: translate(100%, -50%);
	    -ms-transform: translate(100%, -50%);
	        transform: translate(100%, -50%);

	color: #FF9001;
	font-size: 30px;
	font-weight: bold;
}
.step-box-deco-num::before {
	content: '';
	background-color: #fff;

	width: 44px;
	height: 44px;
	border: solid 3px #FF9001;;
	border-radius: 100%;

	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	z-index: -1;
}
.step-box-ttl {
	color: #018FCA;
	font-size: 23px;
	letter-spacing: 0;
	font-weight: bold;
	margin-bottom: 8px;
}
.step-box-txt {
	width: 220px;
}

/* 親野先生のコメント */
.prof-area {
	position: relative;
}
.prof-cont {
	background-image: url(/dokusho/images/step1/20200605/oyano_bg.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	height: 181px;
}
.prof-comment {
	position: absolute;
	top: 32px;
	left: 190px;

	color: #fff;
	font-size: 29px;
	font-weight: bold;
}
.prof-name {
	position: absolute;
	top: 118px;
	left: 173px;

	font-size: 29px;
	font-weight: bold;
}
.prof-name-tch-name {
	display: inline-block;
	color: #018FCA;
	font-size: 38px;
	margin: 0 10px;
}
.prof-name-tch-name rt {
	color: #000;
	font-size: 12px;
	text-align: center;
}
.prof-acc-btn {
	position: absolute;
	top: 114px;
	right: 37px;

	cursor: pointer;
}
.prof-acc-btn:hover {
	opacity: .7;
}
.prof-txt {
	width: 920px;
	margin: 20px auto;

	border: solid 1px #ffcf91;
	background: #fffdf7;
	padding: 10px 20px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;

	line-height: 1.8;
}

/* step 3-4 */
.prof-area--step3-4 .prof-cont {
	background-image: url(/dokusho/images/step3/20200605/oyano_bg.jpg);
	height: 259px;
}
.prof-area--step3-4 .prof-comment {
	top: 28px;
	left: 242px;
}
.prof-area--step3-4 .prof-name {
	top: 175px;
	left: 230px;
}

/* step 3-5 */
.prof-area--step3-5 .prof-cont {
	background-image: url(/dokusho/images/step3/20200605/oyano_bg.jpg);
	height: 259px;
}
.prof-area--step3-5 .prof-comment {
	top: 28px;
	left: 242px;
}
.prof-area--step3-5 .prof-name {
	top: 175px;
	left: 230px;
}


.bluebox-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	margin-bottom: 50px;
}
.bluebox {
	width: 465px;
	margin-top: 40px;

	border: solid 2px #0180C2;
	background-color: #0180C2;
	border-radius: 10px;
	overflow: hidden;

	position: relative;
}
.bluebox-name {
	background-color: #0180C2;
	padding: 4px 14px 6px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;

	color: #fff;
	font-size: 26px;
	font-weight: bold;
}
.bluebox-cont {
	background-color: #fff;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	height: 100%;
	padding: 20px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.bluebox__desc-ttl {
	font-size: 20px;
}
.bluebox__desc-txt--prof {
	font-size: 16px;
}
.bluebox__desc-txt--pub {
	font-size: 14px;
}
.bluebox__thumb {
	width: 143px;
}
.bluebox__thumb-img {
	width: 100%;
}

.waylink__item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.waylink__item:not(:last-child) {
	margin-bottom: 60px;
}
.waylink__item-txt {
	width: 640px;

	padding-left: 54px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-size: 27px;

	position: relative;
}
.waylink__item-txt::before {
	content: '';
	width: 24px;
	height: 24px;
	border: solid 1px #000;

	position: absolute;
	top: 50%;
	left: 25px;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
}
.waylink__item-txt::after {
	content: '';
	background-image: url(/dokusho/images/common/20200605/ic-waylink.gif);
	background-size: contain;
	background-repeat: no-repeat;
	width: 92px;
	height: 30px;

	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
}
.waylink__item-link-wrap {
	width: 303px;
}
.waylink__item-link {
	display: inline-block;
}
.waylink__item-link:hover {
	opacity: .7;
}

.blue-ttl {
	background-color: #E7F5FB;
	border-radius: 4px;

	color: #018FCA;
	font-size: 18px;
	font-weight: bold;
	padding: 5px 10px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	line-height: 1;
}
.blue-ttl--strong {
	font-size: 23px;
	padding: 10px 10px;
}

.green-ttl {
	background-color: #009944;
	border-radius: 8px;

	display: inline-block;

	color: #fff;
	font-size: 29px;
	font-weight: bold;
	padding: 8px 16px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	line-height: 1;
	margin-top: 30px;
}
.green-ttl--wide {
	width: 100%;
}
.green-ttl--min {
	font-size: 28px;
}

.orange-ttl-wrap {
	text-align: center;
}
.orange-ttl {
	display: inline-block;
	padding: 4px 24px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-radius: 8px;

	color: #fff;
	font-size: 23px;
	font-weight: bold;
	background-color: #FF9000;
}

.bookbox {
	margin-top: 50px;
	padding-top: 12px;
	border: solid 2px #0180C2;
	background-color: #0180C2;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
.bookbox-inner {
	background-color: #fff;
	padding: 20px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
}
.bookbox-thumb-wrap {
	margin-right: 20px;
}
.bookbox-thumb-link {
	display: inline-block;
}
.bookbox-thumb {
	width: 180px;
}
.bookbox-desc-wrap {
	width: 716px;
}
.booxbox-ttl-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin-bottom: 40px;
}
.bookbox-ttl-lead {
	display: inline-block;

	background-color: #FF9000;
	padding: 0 12px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-radius: 6px;
	margin-right: 12px;

	color: #fff;
	font-size: 21px;
	font-weight: bold;
}
.bookbox-ttl {
	display: inline-block;
	color: #FF9000;
	font-size: 30px;
	font-weight: bold;
}
.bookbox__txtbox-area {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.bookbox__txtbox {
	border: solid 1px #009944;
	position: relative;
	border-radius: 8px;

	padding: 24px 20px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.bookbox__txtbox-ttl {
	position: absolute;
	top: 0;
	left: 20px;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	background-color: #fff;

	color: #009944;
	font-size: 24px;
	font-weight: bold;
	padding: 0 6px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.bookbox__txtbox-txt {
	font-size: 16px;
}

.star-ttl-wrap {
	text-align: center;
	margin-top: 90px;
	margin-bottom: 20px;
}
.star-ttl {
	display: inline-block;
	color: #FF9000;
	font-size: 38px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	position: relative;
}
.star-ttl::before {
	content: '';
	background-image: url(/dokusho/images/common/20200605/pagetitle.gif);
	background-repeat: repeat-x;
	position: absolute;
	width: 100px;
	height: 30px;
	top: 50%;
	left: -14px;
	-webkit-transform: translate(-100%, -50%);
	    -ms-transform: translate(-100%, -50%);
	        transform: translate(-100%, -50%);
}
.star-ttl::after {
	content: '';
	background-image: url(/dokusho/images/common/20200605/pagetitle.gif);
	background-repeat: repeat-x;
	position: absolute;
	width: 100px;
	height: 30px;
	top: 50%;
	right: -14px;
	-webkit-transform: translate(100%, -50%);
	    -ms-transform: translate(100%, -50%);
	        transform: translate(100%, -50%);
}
.star-ttl--min {
	font-size: 31px;
}
.star-ttl--min::before {
	width: 65px;
	height: 19px;
	left: -13px;
	background-size: 23px;
}
.star-ttl--min::after {
	width: 65px;
	height: 19px;
	right: -13px;
	background-size: 23px;
}

.jokyu-ttl {
	color: #018FCA;
	font-size: 24px;
	font-weight: bold;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;

	padding-top: 64px;
	margin-left: 24px;
}

.question-kotoba {
	width: 900px;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 10px;
	padding: 12px 20px;
	padding-left: 76px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;

	color: #30A65D;
	font-size: 28px;
	font-weight: bold;
	text-align: left;

	position: relative;
}
.question-kotoba::before {
	content: '';

	position: absolute;
	top: 50%;
	left: 10px;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	display: inline-block;
	padding: 0 10px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background-color: #30A65D;
	border-radius: 10px;

	color: #fff;
}
.question-kotoba--01 {
	color: #30A65D;
}
.question-kotoba--01::before {
	content: 'Q1';
	background-color: #30A65D;
}
.question-kotoba--02 {
	color: #366CA9;
}
.question-kotoba--02::before {
	content: 'Q2';
	background-color: #366CA9;
}
.question-kotoba--03 {
	color: #9832B5;
}
.question-kotoba--03::before {
	content: 'Q3';
	background-color: #9832B5;
}
.question-kotoba--04 {
	color: #EA4898;
}
.question-kotoba--04::before {
	content: 'Q4';
	background-color: #EA4898;
}

.expbox-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.expbox {
	width: 465px;
	border: solid 2px #0180C2;
	background-color: #0180C2;
	border-radius: 10px;
	padding-top: 12px;
	margin-top: 40px;

	position: relative;
}
.exp-deco {
	position: absolute;
	background-color: #FF9001;
	display: inline-block;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 7px 12px 8px;
	padding-right: 20px;
	border-radius: 6px;
	top: -10px;
	left: 18px;
}
.exp-deco-char {
	position: absolute;
	top: 50%;
	right: 2px;
	-webkit-transform: translate(100%, -50%);
	    -ms-transform: translate(100%, -50%);
	        transform: translate(100%, -50%);
	color: #FF9001;
	font-size: 30px;
	font-weight: bold;
}
.exp-deco-char::before {
	content: '';
	background-color: #fff;
	width: 44px;
	height: 44px;
	border: solid 3px #FF9001;
	border-radius: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	z-index: -1;
}
.expbox-inner {
	height: 100%;
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	padding: 20px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.exp-ttl {
	color: #018FCA;
	font-size: 23px;
	letter-spacing: 0;
	font-weight: bold;
	margin-bottom: 8px;
}

.incont-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	margin-bottom: 30px;
}
.incont-point {
	display: inline-block;
	padding: 2px 12px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-radius: 8px;

	background-color: #FF9000;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	margin-right: 12px;
}
.incont-point-num {
	color: #FF9000;
	display: inline-block;
	position: relative;
	z-index: 5;
	margin-left: 5px;
}
.incont-point-num::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	width: 1.2em;
	height: 1.2em;
	border-radius: 100%;
	background-color: #fff;
	z-index: -1;
}
.incont-txt {
	color: #FF9000;
	font-size: 30px;
	font-weight: bold;
}

.quebox {
	border: solid 2px #30A65D;
	border-radius: 10px;
	padding: 20px 40px;
	padding-right: 0;
	padding-top: 60px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin-top: 80px;

	position: relative;
}
.quebox__head {
	position: absolute;

	width: 900px;
	left: 50%;
	top: 0;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	background-color: #30A65D;
	border-radius: 10px;
	padding: 12px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.quebox__head-deco {
	display: inline-block;
	padding: 2px 11px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-radius: 10px;

	color: #30A65D;
	font-size: 26px;
	font-weight: bold;
	background-color: #fff;
	margin-right: 10px;
}
.quebox__head-ttl {
	color: #fff;
	font-size: 28px;
	font-weight: bold;
}
.quebox__body-item {
	position: relative;
	color: #30A65D;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0;
	padding-left: 2em;
	position: relative;
}
.quebox__body-item:not(:last-child) {
	margin-bottom: 10px;
}
.quebox__body-item::before {
	content: '';

	position: absolute;
	top: 0;
	left: 0;
}
.quebox__body-item--a::before {
	content: 'Ａ：';
}
.quebox__body-item--b::before {
	content: 'Ｂ：';
}

/* 緑 */
.quebox--green {
	border: solid 2px #30A65D;
}
.quebox--green .quebox__head {
	background-color: #30A65D;
}
.quebox--green .quebox__head-deco {
	color: #30A65D;
}
.quebox--green .quebox__body-item {
	color: #30A65D;
}

/* 青 */
.quebox--blue {
	border: solid 2px #366CA9;
}
.quebox--blue .quebox__head {
	background-color: #366CA9;
}
.quebox--blue .quebox__head-deco {
	color: #366CA9;
}
.quebox--blue .quebox__body-item {
	color: #366CA9;
}

/* 紫 */
.quebox--purple {
	border: solid 2px #9832B5;
}
.quebox--purple .quebox__head {
	background-color: #9832B5;
}
.quebox--purple .quebox__head-deco {
	color: #9832B5;
}
.quebox--purple .quebox__body-item {
	color: #9832B5;
}

/* ピンク */
.quebox--pink {
	border: solid 2px #EA4898;
}
.quebox--pink .quebox__head {
	background-color: #EA4898;
}
.quebox--pink .quebox__head-deco {
	color: #EA4898;
}
.quebox--pink .quebox__body-item {
	color: #EA4898;
}


/*---------------------------------

作文ボックス

---------------------------------*/
.cmpbox-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.cmpbox {
	width: 300px;
	border: solid 2px #0180C2;
	background-color: #0180C2;
	border-radius: 10px;
	padding-top: 12px;
	margin-top: 40px;
	position: relative;
}
.cmpbox-ttl {
	position: absolute;
	background-color: #FF9001;
	display: inline-block;
	width: 240px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 7px 12px 8px;
	border-radius: 6px;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}
.cmpbox-inner {
	height: 100%;
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	padding: 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cmpbox-thumb-wrap {
	text-align: center;
}


/*---------------------------------

バナーエリア

---------------------------------*/
.othbnr-area {
	width: 960px;
	margin: 50px auto 0;
}
.othbnr__head {
	text-align: center;
	margin-bottom: 32px;
}
.othbnr__head-link-btn {
	width: 100%;
}
.bnr-img {
	width: 100%;
}
.othbnr__head-link-btn:link,
.othbnr__head-link-btn:active,
.othbnr__head-link-btn:visited {
	color: #0070cb;
}
.othbnr__head-link-btn:hover {
	opacity: .8;
	text-decoration: none;
}
.othbnr__bnr-area {
	display: flex;
	justify-content: center;
	gap: 20px;
}
.othbnr__bnr-link {
	display: inline-block;
	width: 225px;
}
.othbnr__bnr-link:hover {
	opacity: .8;
}
.othbnr__bnr-img {
	max-width: 100%;
}

/*---------------------------------

関連記事エリア

---------------------------------*/
.related-article{
	border: #E5E5E5 2px solid;
	margin-top: 60px;
	padding: 0 24px 20px;
}
.related-article__ttl{
	font-size: 24px;
	line-height: 30px;
	color: #018FCA;
}
.related-article__list-item{
	position: relative;
	font-size: 16px;
	line-height: 24px;
	color: #000000;
	padding-left: 22px;
	margin-top: 8px;
}
.related-article .related-article__list-item a{
	color: #000000;
}
.related-article .related-article__list-item a:hover{
	text-decoration: underline;
}
.related-article__list-item::before{
	position: absolute;
	content: "";
	width: 14px;
	height: 14px;
	background-image: url(/kyouiku/_shared/img/article_arrow.svg);
	background-repeat: no-repeat;
	background-size: contain;
	top: 50%;
	left: 0px;
	transform: translateY(-50%);
}

.shindan-bnr{
	margin: 0 auto 60px;
	display: block;
	max-width: 670px;
}

.shindan-bnr__img{
	padding: 20px 0 30px;
	max-width: 670px;
	margin: 0 auto;
	display: block;
}