/*=========================================================================

    Shogakukan Corpus Network
    last update 2016.8.15  Ver 1.00

=========================================================================*/


/* レイアウト
-------------------------------------------------------------------------*/
#contents #main {
	padding: 20px 0;
}
#contents.twoColumnLeftPane .wrap {
	background: url(/image/common/bg_gray.png) repeat-y left top;
}
#contents.twoColumnLeftPane #main {
	float: right;
	width: 780px;
}
#contents.twoColumnLeftPane #main .text {
	margin: 0;
}
#contents.twoColumnLeftPane #side {
	float: left;
	width: 240px;
	padding: 20px;
}


/* パンくず
-------------------------------------------------------------------------*/
#contents #breadcrumbs {
	font-size: 12px;
	margin: 0 0 20px;
}
#contents #breadcrumbs a {
	color: #272735;
	text-decoration: underline;
}


/* ページタイトル
-------------------------------------------------------------------------*/
#contents #pageTitle {
	margin: 0 0 15px;
	padding: 10px 0 30px;
	background: #f5f4f2;
}
#contents #pageTitle #breadcrumbs {
	margin: 0 0 5px;
}
#contents #pageTitle  h1 {
	font-size: 32px;
	margin: 25px 0 5px;
	text-align: center;
}
#contents #pageTitle  p {
	font-size: 14px;
	margin: 0 0 5px;
	text-align: center;
}


/* メインコンテンツ
-------------------------------------------------------------------------*/
#contents #main a {
	text-decoration: underline;
}
#contents #main a.blank:after {
	content: url(/image/common/icon_link_blank.png);
	margin: 0 0 0 5px;
	vertical-align: -2px;
}

/* メインイメージ */
#contents #main #mainimg {
	margin: 0 0 20px;
}

/* ログイン */
#contents #main .loginBox {
	font-size: 16px;
	margin: 20px 0;
	padding: 20px;
	background: #e3ebf6;
	text-align: center;
}
#contents #main .loginBox .btns .btn {
	display: inline-block;
	width: 240px;
	margin: 0 10px;
}
#contents #main .loginBox .notice {
	margin: 5px 0 0;
}

/* お知らせ */
#contents #main #serviceInfo {
	margin: 40px 0;
}
#contents #main #serviceInfo h2 {
	font-size: 26px;
	padding: 0 0 10px;
	border-bottom: 4px solid #497abc;
}
#contents #main #serviceInfo dl {
	border-bottom: 2px solid #e5e4e3;
	overflow: hidden;
}
#contents #main #serviceInfo dt {
	position: relative;
	font-size: 14px;
	margin: -2px 0 0;
	padding: 10px 40px 10px 10px;
	border-top: 2px solid #e5e4e3;
}
#contents #main #serviceInfo dt .date {
	margin: 0 15px 0 0;
}
#contents #main #serviceInfo dt .title {
	font-size: 16px;
	color: #19447f;
}
#contents #main #serviceInfo dt:after {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 15px;
	height: 8px;
	content: "";
	margin: -4px 0 0;
	background: url(/image/common/icon_close_black.png) no-repeat center center;
	vertical-align: middle;
}
#contents #main #serviceInfo dt.open:after {
	background: url(/image/common/icon_open_black.png) no-repeat center center;
}
#contents #main #serviceInfo dd {
	font-size: 14px;
	padding: 0 10px 10px;
}
#contents #main #serviceInfo .moreLink {
	font-size: 15px;
	margin: 10px 0 0;
	text-align: right;
}
#contents #main #serviceInfo .moreLink a {
	text-decoration: underline;
}
/* テキスト内メールアドレス、SPAM対策 */
.domain::before {
	content: '@'
}
/* テキスト */
#contents #main .text {
	font-size: 16px;
	margin: 0 70px;
}
#contents #main .text .image {
        font-size: 16px;
        margin: 0 36px 18px;
}
#contents #main .text h1 {
	font-size: 32px;
	margin: 30px 0;
	text-align: center;
}
#contents #main .text h1 span {
	display: block;
	font-size: 18px;
	margin: 0 0 5px;
	text-align: center;
}
#contents #main .text h2 {
	clear: both;
	font-size: 24px;
	margin: 40px 0 20px;
	padding: 0 0 10px;
	border-bottom: 4px solid #ddd;
}
#contents #main .text h2:first-child {
	margin-top: 0;
}
#contents #main .text h3 {
	clear: both;
	font-size: 18px;
	margin: 20px 0;
	padding: 10px 15px;
	background: #f5f4f2;
}
#contents #main .text h3 .bugdate {
	font-size: 12px;
	margin: 5px 5px 0 10px;
	text-align: left;
}
#contents #main .text h4.gramUsage {
	clear: both;
	font-size: 16px;
	margin: 15px 0;
	padding: 10px 15px;
	background: #fff;
}
#contents #main .text h4 {
	clear: both;
	font-size: 16px;
	margin: 30px 0;
	padding: 10px 15px;
	background: #f5f4f2;
}
#contents #main .text p {
	line-height: 1.7;
	margin: 0 15px 15px;
}
#contents #main .text p.note {
	padding: 0 0 0 1.5em;
	text-indent: -1.5em;
}
#contents #main .text ul,
#contents #main .text ol {
	margin: 0 15px 15px 50px;
}
#contents #main .text ul li {
	margin: 0 0 10px;
	list-style-type: disc;
}
#contents #main .text ol li {
	margin: 0 0 10px;
	list-style-type: decimal;
}
#contents #main .text .noMark li {
	margin: 0 0 10px;
	list-style-type: none;
	text-indent: -2em;
}
#contents #main .text ol li.noMark {
	margin: 0 0 10px;
	list-style-type: none;
	text-indent: -2em;
}
#contents #main .text li ul,
#contents #main .text li ol {
	margin: 15px 15px 15px 50px;
}
#contents #main .text .borderBox {
	margin: 15px;
	padding: 15px;
	border: 1px solid #aaa;
}
#contents #main .text .borderBox p {
	margin: 0;
}
#contents #main .text .examples {
	margin: 30px 45px;
	padding: 15px 30px;
	background: #eee;
	border-radius: 15px;
}
#contents #main .text .examples p {
	margin: 10px 0;
}
#contents #main .text .examples td {
	padding-right: 20px;
}
#contents #main .text .link {
	display: inline-block;
	padding: 0 0 0 25px;
	background: url(/image/common/icon_arrow_circle_blue.png) no-repeat left 5px;
}
#contents #main .text .imgR {
	float: right;
	margin: 0 0 15px 15px;
}
#contents #main .text .imgL {
	float: left;
	margin: 0 15px 15px 0;
}

#contents #main .text .voice {
	margin: 0 0 50px;
}
#contents #main .text .voice#v02 {
	padding-top: 50px;
	border-top: 4px solid #ddd;
}
#contents #main .text .voice h1 {
	margin: 0 0 15px;
}
#contents #main .text .voice .intro {
	margin: 0 0 50px;
	padding: 15px;
	background: #eee;
	border-radius: 15px;
}
#contents #main .text .voice .desc {
	line-height: 1.6;
	width: 90%;
	margin: 50px 15px 50px 0;
	padding: 20px;
	background: #FAE3D5;
	border-radius: 15px;
	border:solid 2px #758BA3;
}
#contents #main .text .voice .descSmall {
	line-height: 1.6;
	width: 50%;
	margin: 20px 15px 50px 30px;
	padding: 20px;
	background: #FAE3D5;
	border-radius: 15px;
	border:solid 2px #758BA3;
}
#contents #main .text .voice .price {
	width: 30%;
	margin: 20px 0 30px 50px;
  font-size: 18px;
  font-weight: bold;
	padding: 20px;
	background: #FEDBA0;
	border-radius: 15px;
}
#contents #main .text .descTitle {
	margin: 0 0 10px;
  font-size: 16px;
  font-weight: bold;
	text-decoration: underline;
	text-align: center;
}
#contents #main .text .catchcopy {
	width: 60%;
  font-size: 22px;
  font-weight: bold;
  color: #b9332c;
	margin: 0 auto;
}
#contents #main .text .writer {
	color: #999;
	margin: 0 15px 20px;
	text-align: right;
}
#contents #main .text .writer p {
	line-height: 1.5;
	margin: 0;
}
#contents #main .caution {
  font-size: 15px;
  font-weight: bold;
  color: #b9332c;
  margin: 0 3px 0 3px;
}


/* サイドバー
-------------------------------------------------------------------------*/
#contents #side h2 {
	line-height: 1.2;
}
#contents #side .service {
	margin: 0 0 15px;
}
#contents #side .service .serviceName {
	font-size: 32px;
	margin: 0 0 5px;
}
#contents #side .service p {
	font-size: 14px;
	margin: 0 0 15px;
}
#contents #side .service p.meta {
	font-size: 13px;
}
#contents #side .service p.meta span {
	display: inline-block;
	line-height: 18px;
	color: #fff;
	padding: 0 15px;
	background: #282836;
	border-radius: 20px;
}
#contents #side .service p.meta span.gray {
	color: #272735;
	background: #ddd;
}
#contents #side .login p {
	margin: 0 0 10px;
}

#contents #side .sideNav {
	margin: 15px 0;
}
#contents #side .sideNav ul {
	border-top: 1px solid #d4d4d4;
}
#contents #side .sideNav li {
	font-size: 15px;
	line-height: 1.5;
}
#contents #side .sideNav li a {
	display: block;
	color: #262634 !important;
	padding: 10px 0 10px 35px;
	background: url(/image/common/icon_arrow_circle_grey.png) no-repeat 10px 14px;
	border-bottom: 1px solid #d4d4d4;
	text-decoration: none !important;
}
#contents #side .sideNav li.active a {
	background-color: #e3e3e3;
	cursor: default;
}
#contents #side .sideNav li a:hover {
	background-color: #e3e3e3;
}

#contents #side .banner li {
	margin: 0 0 15px;
	text-align: center;
}
#contents #side .banner li img {
	vertical-align: bottom;
}


/* サービス別スタイル
-------------------------------------------------------------------------*/
body.bnc #contents #main a,
body.bnc #contents #main #serviceInfo dt .title {
	color: #19447f;
}
body.bnc #contents #main .text h2,
body.bnc #contents #main #serviceInfo h2 {
	border-color: #19447f;
}
body.bnc #contents #main .text h3,
body.bnc #contents #main .loginBox {
	background-color: #e3ebf6;
}
body.bnc #contents #main .text .link,
body.bnc #contents #side .sideNav li a {
	background-image: url(/image/common/icon_arrow_circle_blue.png);
}
body.bnc #contents #main .loginBox {
	background-color: #e3ebf6;
}

body.wordbanks #contents #main a,
body.wordbanks #contents #main #serviceInfo dt .title {
	color: #bb342e;
}
body.wordbanks #contents #main .text h2,
body.wordbanks #contents #main #serviceInfo h2 {
	border-color: #bb342e;
}
body.wordbanks #contents #main .text h3,
body.wordbanks #contents #main .loginBox {
	background-color: #f5e1e0;
}
body.wordbanks #contents #main .text .link,
body.wordbanks #contents #side .sideNav li a {
	background-image: url(/image/common/icon_arrow_circle_red.png);
}
body.wordbanks #contents #main .loginBox {
	background-color: #f5e1e0;
}

body.jefll #contents #main a,
body.jefll #contents #main #serviceInfo dt .title {
	color: #009595;
}
body.jefll #contents #main .text h2,
body.jefll #contents #main #serviceInfo h2 {
	border-color: #009595;
}
body.jefll #contents #main .text h3,
body.jefll #contents #main .loginBox {
	background-color: #e5f4f4;
}
body.jefll #contents #main .text .link,
body.jefll #contents #side .sideNav li a {
	background-image: url(/image/common/icon_arrow_circle_green.png);
}

body.perc #contents #main a,
body.perc #contents #main #serviceInfo dt .title {
	color: #fd7301;
}
body.perc #contents #main .text h2,
body.perc #contents #main #serviceInfo h2 {
	border-color: #feab0f;
}
body.perc #contents #main .text h3,
body.perc #contents #main .loginBox {
	background-color: #ffeecf;
}
body.perc #contents #main .text .link,
body.perc #contents #side .sideNav li a {
	background-image: url(/image/common/icon_arrow_circle_orange.png);
}


/* スマートフォン用
-------------------------------------------------------------------------*/
@media (max-width: 640px) {
	
	#contents #main,
	#contents #side {
		float: none !important;
		width: auto !important;
		padding: 15px !important;
	}
	#contents .wrap {
		background: #fff !important;
	}
	#contents #side {
		background: #f5f4f3;
	}
	
	/* パンくず */
	#contents #breadcrumbs {
		margin: 0 0 15px;
	}
	
	/* ページタイトル */
	#contents #pageTitle {
		margin: 0;
		padding: 15px;
	}
	#contents #pageTitle .wrap {
		background: none !important;
	}
	#contents #pageTitle  h1 {
		font-size: 32px;
		margin: 15px 0 5px;
		text-align: left;
	}
	#contents #pageTitle  p {
		text-align: left;
	}
	
	/* メインイメージ */
	#contents #main #mainimg {
		margin: 0 -15px 15px;
	}
	
	/* ログイン */
	#contents #main .loginBox .btns .btn {
		display: block;
		width: auto;
		margin: 0 0 10px;
	}
	
	/* お知らせ */
	#contents #main #serviceInfo dt .date {
		margin: 0;
	}
	#contents #main #serviceInfo dt .title {
		display: block;
	}
	
	/* テキスト */
	#contents #main .text {
		margin: 0;
	}
	#contents #main .text h1 {
		text-align: left;
	}
	#contents #main .text h1 br {
		display: none;
	}
	#contents #main .text h2 {
		font-size: 20px;
	}
	#contents #main .text h3 {
		font-size: 16px;
	}
	#contents #main .text p {
		margin: 0 0 15px;
	}
	#contents #main .text ul,
	#contents #main .text ol {
		margin: 0 0 15px 35px;
	}
	#contents #main .text .borderBox {
		margin: 15px 0;
	}
	#contents #main .text .examples {
		margin: 15px 0;
	}
	#contents #main .text .imgR,
	#contents #main .text .imgL {
		float: none;
		margin: 0 0 15px;
		text-align: center;
	}
	
	/* サイドバー */
	#contents #side .sideNav li a:hover {
		background-color: transparent;
	}
	
}