@charset "utf-8";

/* init **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
*{ margin:0; padding:0; box-sizing:border-box; /*-webkit-appearance:none;*/ }
select option{ padding:0 5px; }
body{ color:#333; background-color:#fff; font:14px "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; line-height:1.6; -webkit-text-size-adjust:100%; overflow-x:hidden; }
h1 , h2 , h3 , h4 , h5 , h6 , address{ font-style:normal; font-weight:normal; font-size:100%; }
ul{ list-style-type:none; }
img{ border:0; vertical-align:bottom; }

table{ border-spacing:0; border:0; }
table th{ text-align:left; vertical-align:middle; font-weight:normal; }
table td{ word-break:break-all; }

.floatR{ float:right; }
.floatL{ float:left; }

.alignL{ text-align:left; }
.alignR{ text-align:right; }
.alignC{ text-align:center; }

.rel{ position:relative; }
.abs{ position:absolute; }


/* clearfix **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.cf:after{ content:" "; display:block; clear:both; }


/* link **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
a:link , a:visited{ color:#333; text-decoration:underline; }
a:hover{ color:#666; text-decoration:underline; }

a , a img , input.search-btn{ transition:all 0.4s; }
a:hover , a img:hover , input.search-btn:hover{ opacity:0.8; }

a.more{ display:block; width:120px; height:40px; color:#999; text-decoration:none; text-align:center; background:url(../images/listmark_arrow_gray.svg) 15px 12px / 7px 10px no-repeat; border:solid 2px #eee; border-radius:5px; padding:7px 0 0 10px; }
a.more:hover{ border:solid 2px #92c626; }

a.glink{ color:#5fad3c; }


/* font decoration **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* size */
.fontSS{ font-size:10px; }
.fontS{ font-size:12px; }
.fontL{ font-size:16px; }
.fontLL{ font-size:18px; }
.fontLLL{ font-size:20px; }

/* color */
.txt-gray{ color:#999; }
.txt-green{ color:#5fad3c; }

/*indent */
.idt{ padding-left:1.0em; text-indent:-1.0em; }
.idt-half{ padding-left:0.5em; text-indent:-0.5em; }
.idt3{ padding-left:3.5em; text-indent:-3.5em; }

/*other */
.str{ font-weight:bold; }
.str-reset{ font-weight:normal; }


/* space **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* padding */
.spt0{ padding-top:0px !important; }
.spt5{ padding-top:5px !important; }
.spt10{ padding-top:10px !important; }
.spt15{ padding-top:15px !important; }
.spt20{ padding-top:20px !important; }
.spt25{ padding-top:25px !important; }
.spt30{ padding-top:30px !important; }
.spt35{ padding-top:35px !important; }

.spb0{ padding-bottom:0px !important; }
.spb5{ padding-bottom:5px !important; }
.spb10{ padding-bottom:10px !important; }
.spb15{ padding-bottom:15px !important; }
.spb20{ padding-bottom:20px !important; }
.spb25{ padding-bottom:25px !important; }
.spb30{ padding-bottom:30px !important; }
.spb35{ padding-bottom:35px !important; }

/* margin */
.smt0{ margin-top:0px !important; }
.smt5{ margin-top:5px !important; }
.smt10{ margin-top:10px !important; }
.smt15{ margin-top:15px !important; }
.smt20{ margin-top:20px !important; }
.smt25{ margin-top:25px !important; }
.smt30{ margin-top:30px !important; }
.smt35{ margin-top:35px !important; }
.smt40{ margin-top:40px !important; }
.smt45{ margin-top:45px !important; }
.smt50{ margin-top:50px !important; }
.smt55{ margin-top:55px !important; }
.smt60{ margin-top:60px !important; }

.smb0{ margin-bottom:0px !important; }
.smb5{ margin-bottom:5px !important; }
.smb10{ margin-bottom:10px !important; }
.smb15{ margin-bottom:15px !important; }
.smb20{ margin-bottom:20px !important; }
.smb25{ margin-bottom:25px !important; }
.smb30{ margin-bottom:30px !important; }
.smb35{ margin-bottom:35px !important; }
.smb40{ margin-bottom:40px !important; }
.smb45{ margin-bottom:45px !important; }
.smb50{ margin-bottom:50px !important; }
.smb55{ margin-bottom:55px !important; }
.smb60{ margin-bottom:60px !important; }

.sml0{ margin-left:0px !important; }
.sml10{ margin-left:10px !important; }
.sml20{ margin-left:20px !important; }
.sml30{ margin-left:30px !important; }
.sml50{ margin-left:50px !important; }

.smr0{ margin-right:0px !important; }
.smr20{ margin-right:20px !important; }
.smr30{ margin-right:30px !important; }
.smr50{ margin-right:50px !important; }

/* input */
input , textarea , select{ font-size:16px; } /*スマホで選択した時の自動ズーム解除*/
input.ctl , select.ctl{ padding:5px; }
/*
input.sizeS , select.sizeS{ width:150px; }
input.sizeM , select.sizeM{ width:300px; }
input.sizeL{ width:650px; }
*/

/* wrap **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.wrap{ width:1200px; position:relative; margin:0 auto; }

@media only screen and (max-width: 1200px){
.wrap{ width:100%; padding:0 10px; }
.sl_container .wrap{ padding:0; }
}


/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.header{ text-align:center; margin-top:30px; }
.header p{ margin-top:20px; }
.header .ctl{ position:absolute; top:0; right:10px; }
.header .ctl .mypage , .header .ctl .search{ float:left; }
.header .mypage{ margin-right:20px; }
.header .mypage a{ display:block; width:100px; height:36px; color:#999; text-decoration:none; background:url(../images/icon_mypage.svg) left 8px / 18px 20px no-repeat; padding:8px 0 0 25px; }
.header .search{ width:220px; height:36px; text-align:left; background:url(../images/icon_search.svg) 13px 6px / 18px 20px no-repeat; border:solid 2px #eee; border-radius:20px; }
.header .search .search-txt{ width:160px; height:32px; border:transparent; position:absolute; top:2px; right:18px; padding:2px; }

/* sp gnav btn */
.header .sp-search-btn{ position:absolute; top:3px; right:20px; cursor:pointer; display:none !important; }

.header .sp-gnav-btn{ position:absolute; top:3px; left:20px; width:28px; height:22px; cursor:pointer; display:none !important; }
.header .sp-gnav-btn span{ position:absolute; left:0; width:100%; height:2px; background-color:#999; border-radius:6px; }
.header .sp-gnav-btn , .header .sp-gnav-btn span{ display:inline-block; transition:all 0.4s; }
.header .sp-gnav-btn span:nth-of-type(1){ top:0; }
.header .sp-gnav-btn span:nth-of-type(2){ top:10px; }
.header .sp-gnav-btn span:nth-of-type(3){ bottom:0; }

.header .sp-gnav-btn.active span:nth-of-type(1){ -webkit-transform:translateY(10px) rotate(-45deg); transform:translateY(10px) rotate(-45deg); }
.header .sp-gnav-btn.active span:nth-of-type(2){ opacity:0; }
.header .sp-gnav-btn.active span:nth-of-type(3){ -webkit-transform:translateY(-10px) rotate(45deg); transform:translateY(-10px) rotate(45deg); }

.info_en {margin: 55px auto 0; position: absolute; right: 0px; width: 65px;}
.info_en img { width: 100%; }

.bp {margin: 55px auto 0; position: absolute; right: 75px; top: 0; width: 70px;}
.bp img { width: 100%; }

/* gnav **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.gnav ul{ margin-top:20px; margin-left:-4%; }
.gnav ul li{ width:calc(80% / 5); -webkit-width:calc(80% / 5); float:left; margin-left:4%; }
.gnav ul li a{ display:block; width:100%; text-align:center; border-bottom:solid 2px #eee; position:relative; padding:10px; }
.gnav ul li a.home{ background:url(../images/gnav_icon_home.svg) 8px 17px / 18px 16px no-repeat; }
.gnav ul li a.book{ background:url(../images/gnav_icon_book.svg) 11px 17px / 12px 16px no-repeat; }
.gnav ul li a.contents{ background:url(../images/gnav_icon_contents.svg) 8px 17px / 18px 16px no-repeat; }
.gnav ul li a.author{ background:url(../images/gnav_icon_author.svg) 7px 17px / 16px 16px no-repeat; }
.gnav ul li a.media{ background:url(../images/gnav_icon_media.svg) 7px 17px / 16px 16px no-repeat; }


/* hover , active */
.gnav ul li a , .gnav ul li a:before , .gnav ul li a:after{ transition:all 0.4s; }
.gnav ul li a:before , .gnav ul li a:after{ display:block; width:0; height:2px; background-color:#62ae3a; position:absolute; bottom:-2px; content:""; }
.gnav ul li a:before{ left:50%; }
.gnav ul li a:after{ right:50%; }
.gnav ul li a:hover:before , .gnav ul li a:hover:after{ width:50%; }
.gnav ul li a.home:hover , .gnav ul li a.home.active{ background:url(../images/gnav_icon_home_on.svg) 8px 17px / 18px 16px no-repeat; }
.gnav ul li a.book:hover , .gnav ul li a.book.active{ background:url(../images/gnav_icon_book_on.svg) 11px 17px / 12px 16px no-repeat; }
.gnav ul li a.contents:hover , .gnav ul li a.contents.active{ background:url(../images/gnav_icon_contents_on.svg) 8px 17px / 18px 16px no-repeat; }
.gnav ul li a.author:hover , .gnav ul li a.author.active{ background:url(../images/gnav_icon_author_on.svg) 7px 17px / 16px 16px no-repeat; }
.gnav ul li a.media:hover , .gnav ul li a.media.active{ background:url(../images/gnav_icon_media_on.svg) 7px 17px / 16px 16px no-repeat; }
.gnav ul li a.active:before , .gnav ul li a.active:after{ width:50%; }


/* sp-open **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.sp-open{ position:fixed; top:80px; left:0; width:100%; height:calc(100% - 80px); -webkit-height:calc(100% - 80px); background-color:rgba(255,255,255,1); overflow:auto; z-index:9999; border-top:solid 1px #eee; padding:0 20px; display:none; }

/* sp-search */
.sp-search{ padding-top:40px; }
.sp-search .search{ width:100%; height:50px; background:url(../images/icon_search.svg) 14px 12px / 20px 22px no-repeat; border:solid 2px #eee; border-radius:10px; position:relative; }
.sp-search .search .search-txt{ width:calc(100% - 60px); -webkit-width:calc(100% - 60px); height:46px; border:transparent; position:absolute; top:0; left:50px; padding:5px; }
.sp-search .search .search-icon{ position:absolute; top:13px; left:20px; }

.sp-search .sp-search-close{ text-align:center; cursor:pointer; margin-top:20px; }

/* sp-gnav */
.sp-gnav ul li a{ display:block; width:100%; text-align:center; border-bottom:solid 1px #eee; padding:16px 0 20px; }
.sp-gnav ul li a.home{ background:url(../images/gnav_icon_home.svg) 10px 20px / 24px 20px no-repeat; }
.sp-gnav ul li a.book{ background:url(../images/gnav_icon_book.svg) 16px 20px / 13px 20px no-repeat; }
.sp-gnav ul li a.contents{ background:url(../images/gnav_icon_contents.svg) 10px 20px / 26px 20px no-repeat; }
.sp-gnav ul li a.author{ background:url(../images/gnav_icon_author.svg) 12px 20px / 20px 20px no-repeat; }
.sp-gnav ul li a.media{ background:url(../images/gnav_icon_media.svg) 12px 20px / 20px 20px no-repeat; }
.sp-gnav ul li a.information{ background:url(../images/gnav_icon_information.svg) 12px 20px / 20px 20px no-repeat; }
.sp-gnav ul li a.bpsp{ background:url(../images/gnav_icon_bp.svg) 10px 20px / 25px 25px no-repeat; }

.sp-gnav .mypage a{ display:block; width:100%; height:60px; color:#999; text-decoration:none; text-align:center; font-size:18px; background:url(../images/icon_mypage.svg) 20px 16px / 22px 24px no-repeat; border:solid 2px #eee; border-radius:10px; padding-top:16px; margin:20px 0; }


/* footer **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.footer{ text-align:center; border-top:solid 1px #eee; padding-top:30px; margin-top:60px; }
.footer p{ margin-top:20px; }
/*.footer ul{ display:table; font-size:12px; margin:30px auto 0; }*/
.footer ul{ display:flex; flex-wrap: wrap; font-size:12px; margin:30px auto 0; justify-content: center; }
/*.footer ul li{ display:table-cell; background:url(../images/listmark_arrow_gray.svg) 8px 5px / 5px 8px no-repeat; padding:0 20px; }*/
.footer ul li{ background:url(../images/listmark_arrow_gray.svg) 8px 8px / 5px 8px no-repeat; padding:0 20px; line-height: 2; }
.footer ul li a{ color:#999; text-decoration:none; }
.footer .copy{ background-color:#f6f6f6; font-size:12px; color:#999; padding:20px 0 15px; margin-top:30px; }

.wrap_banner ul { display:flex; flex-wrap: nowrap; font-size:12px; margin:0px auto 40px; justify-content: center; }
.wrap_banner ul li { background:none; margin-bottom: 0px; padding: 0px;}
.wrap_banner ul li img {width: 60%;}

/* pr area **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.pr-list-area ul{ margin:10px; border-top:solid 1px #eee; }
.pr-list-area ul li{ border-bottom:solid 1px #eee; padding:24px 0 21px 60px; display:table; width:100%; font-size:16px; }
.pr-list-area ul li span{ width:90px; display:table-cell; color:#999999; font-family:Arial, Helvetica, sans-serif; }
.pr-list-area ul li a{ text-decoration:none; }
.pr-list-area ul .new{ background:url(../images/icon_light.svg) 20px 20px / 14px 26px no-repeat; padding: 24px 0 21px 60px; }


@media only screen and (max-width: 1120px){
.footer div.footer_br { width: 100%; }
}


@media only screen and (max-width: 970px){
/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.header .mypage{ margin-right:10px; }
.header .search{ width:130px; }
.header .search .search-txt{ width:70px; }


/* footer **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.footer ul li{ background:url(../images/listmark_arrow_gray.svg) 8px 3px / left 10px no-repeat; padding:0 8px 0 20px; }


}




/* ★★★ タブレット ★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 768px){
/* wrap **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.sl_container .wrap{ width:100%; padding:0 10px; }


/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.header h1 img{ width:170px; height:auto; }

.header .mypage{ display:none; }
.header .search{ display:none; }

.header .sp-search-btn{ display:block !important; }
.header .sp-gnav-btn{ display:block !important; }

/* sp gnav btn */
.header .sp-gnav-btn{ display:block !important; }
.info_en { display: none; }
.bp { display: none; }

/* gnav **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.gnav{ display:none; }


/* footer **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.footer a img{ width:170px; height:auto; }
.footer ul , .footer ul li{ display:inherit; }
.footer ul{ text-align:center; margin-top:20px; }
.footer ul li{ background:none; border-bottom:solid 1px #eee; padding:0; margin:0; }
.footer ul li:last-child{ border-bottom:none; }
.footer ul li a{ display:block; padding:14px 0 12px; }
.footer .copy{ margin-top:0; }
.wrap_banner ul{ text-align:center; margin-top:0px;  margin-bottom:20px;}
.wrap_banner ul li{ background:none; border:none;}
.wrap_banner ul { display:flex; flex-wrap: nowrap; font-size:12px; margin:0px auto 40px; justify-content: center; }
.wrap_banner ul li img {width: 100%;}
.wrap_banner ul li a { padding:5px 12px;}
}




/* ★★★ スマホ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 480px){
/* pr area **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.pr-list-area ul li{ border-bottom:solid 1px #eee; padding:24px 0 22px 30px; display:table; width:100%; font-size:16px; }
.pr-list-area ul li span{ display:block; }
.pr-list-area ul .new{ background:url(../images/icon_light.svg) 0 20px / 14px 26px no-repeat; padding: 24px 0 22px 30px; }


/* footer **********
///////////////////////////////////////////////////////////////////////////////////////////////*/

.wrap_banner ul { margin:0px auto 30px; justify-content: center; }
.wrap_banner ul li img {width: 100%;}
.wrap_banner ul li a { padding:0 5px;}
}

/* ★★★ add by JCity*/
#errorList{
	text-align: left;
}
	#errorList ul{
        /*animation-duration: 1.5s;
		animation-timing-function :ease;
		animation-name: showFadeIn;
		overflow: hidden;
		border: 2px solid #ef9292;
		background: #fdeded;
		border-radius: 5px;
        margin-bottom: 20px;*/
	}  
    #errorList ul{
        /* 20180214 add start */
        animation-duration: 1.5s;
        animation-timing-function :ease;
        animation-name: showFadeIn;
        overflow: hidden;
        border: 1px solid #b63b34;
        padding: 10px 20px;
        background: #ffebeb;
        margin-bottom: 45px;
        outline: 3px solid #fff;
        outline-offset: -4px;
        color: #c12820;
        /* 20180214 add end */
    }

    #errorList li{
		margin-top: -1px;
		/*border-top: 1px dotted indianred; delete 20180214*/
		padding-top: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: 10px;
        /* 20180214 add start */
        font: 15px "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif!important;
        text-shadow: 0.5px 0.5px 0px #fff;
        /* 20180214 add end */
	}

#msgList{
}
	#msgList ul{
		animation-duration: 1.5s;
		animation-timing-function :ease;
		animation-name: showFadeIn;
		overflow: hidden;
		border: 2px solid #ffcc80;
		background: #fffbdf;
		border-radius: 5px;
		margin-bottom: 20px;

	}
	#msgList li{
		margin-top: -1px;
		border-top: 1px dotted indianred;
		padding-top: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}

/* 各画像サイズの指定 add 2017/02/01 */
img.editorImg {
	/* 編集者画像 */
	max-width:36px;
	max-height:36px;
}
img.bookImg {
	/* 書籍画像 */
	max-width:163px;
	max-height:240px;
}
img.contentImg {
	/* 教材画像 */
	max-width:270px;
	max-height:240px;
}
img.bookImgRank {
	/* 書籍画像(ランキング用) */
	max-width:110px;
	max-height:160px;
}
img.contentImgRank {
	/* 教材画像(ランキング用) */
	max-width:180px;
	max-height:160px;
}
img.authorImg {
	/* 著者画像 */
	max-width:270px;
	max-height:240px;
}