@import "/common/css/suggest.css";

/*************************************************
公文日本語教室　各国共通スタイルの設定
/jpn/common/css/common.css

09.08.24
*************************************************/

/* HEADER ------------------------------------- */

#pageheader {
	padding-bottom: 17px;
	border-bottom: 3px solid #7DCDF4;
}

/* 共通クラス --------------------------------- */

/*-- TABLE --*/

table.Basic th,
table.Basic td {
	background: #FFFFFF;
}

/*-- TR 縦方向の揃え --*/

table tr.vtop th,
table tr.vtop td {
	vertical-align: top;
}

/*-- TR 行揃え --*/

table tr.cener th,
table tr.center td {
	text-align: center;
}

table tr.left th,
table tr.left td {
	text-align: left;
}

table tr.right th,
table tr.right td {
	text-align: right;
}

/*-- セル 行揃え --*/

table tr th.center,
table tr td.center {
	text-align: center;
}

table tr th.left,
table tr td.left {
	text-align: left;
}

table tr th.right,
table tr td.right {
	text-align: right;
}

/*-- TITLE --*/
h1 {color: #00A0E9; margin-bottom: 10px; border-bottom: 2px solid #7DCDF4; font-size: 185.75%; line-height: 200%;}
h2 {color: #333333; margin-top: 15px; font-size: 150%; line-height: 150%;}
h3 {color: #00b3d5; margin-top: 15px; font-size: 114.5%; line-height: 120%;}
h4 {color: #333333; margin-top: 10px; font-size: 107.5%; line-height: 120%;}
h5 {color: #00A0E9; margin-top: 7px; font-size: 100%; line-height: 120%;}

h1.nrm {border: none;}

/*-- PARAGRAPH --*/

p {font-size: 100%; line-height: 140%;}
#contentMain p {margin-top: 7px;}

/*-- CLASS --*/

.SS {font-size: 77%; line-height: 100%;}
.S {font-size: 85.75%; line-height: 120%;}
.M {font-size: 100%; line-height: 140%;}
.L {font-size: 114.5%; line-height: 180%;}
.LL {font-size: 150%; line-height: 180%;}

/* テキストの装飾 */

strong {
	font-weight: bold;
}

em {
	color: #00A0D2;
	font-style: normal;
}

ul,
ol,
li,
dl,
dt,
dd,
form {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

/* HR */

hr {
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: #CCCCCC;
	height: 1px;
}
.WN {font-weight: normal;}
.c_grn {color: #557630;}
.c_sky {color: #00B3D5;}

/* 汎用クラス --------------------------------- */

/* columns */

*.col-l {
	/* 横幅は適宜指定 */
	float: left;
}

*.col-r {
	/* 横幅は適宜指定 */
	float: right;
}

/* columns */

*.cut-l {
	/* 横幅は適宜指定 */
	margin: 0 20px 12px 0;
	float: left;
}

*.cut-r {
	/* 横幅は適宜指定 */
	margin: 0 0 10px 20px;
	float: right;
}

/* 並列リスト */

ul.row,
dl.row {
	display: inline-block;
}

ul.row,
dl.row {
	/* \*/
	display: block;
	/*  */
}

ul.row:after,
dl.row:after {
	height: 0;
	visibility: hidden;
	display: block;
	clear: both;
	content: ".";
}

ul.row li,
dl.row dt,
dl.row dd {
	width: auto;
	float: left;
	/* for Windows Internet Explorer 5.5 */
	voice-family: "\"}\"";
	voice-family: inherit;
	white-space: nowrap;
}

/* clear */

*.clear {
	clear: both;
}

/* clearfix */

#langNavi,
#globalNavi,
#pagebody,
div.intro,
div.section,
*.clearfix {
	display: inline-block;
}

#langNavi,
#globalNavi,
#pagebody,
div.intro,
div.section,
*.clearfix {
	/* \*/
	display: block;
	/*  */
}

#langNavi:after,
#globalNavi:after,
#pagebody:after,
div.intro:after,
div.section:after,
*.clearfix:after {
	height: 0;
	visibility: hidden;
	display: block;
	clear: both;
	content: ".";
}

/* 矢印アイコン付きリンク */

p.arr {
	text-indent: -16px;
	padding-left: 16px;
	font-size: 100%;
	line-height: 150%;
}

p.arr img.ico {
	position: relative;
	top: -2px;
}

/* 矢印アイコン付きリンク（通常ピンク） */

ul.arr li {
	background: url(/common_new/images/ico_arrow_pink_circle.gif) no-repeat 0 0.25em;
	margin-top: 3px;
	padding-left: 14px;
}

/* 前の画面に戻る */

ul.ftPrev {
	margin-top: 20px;
	padding-top: 7px;
	border-top: 2px solid #D6D6D6;
}

ul.ftPrev li,
ul.prev li {
	background: url(/common_new/images/ico_arrow_pink_circle_left.gif) no-repeat 0 0.25em;
	margin-top: 3px;
	padding-left: 14px;
}

/* 矢印アイコン付きリンク（グレイ） */

ul.arrGray li {
	background: url(/common_new/images/ico_arrow_gray_circle.gif) no-repeat 0 0.25em;
	margin-top: 3px;
	padding-left: 14px;
}

/* icon */

img.ico {
	margin-right: 5px;
	vertical-align: text-bottom;
}

/* notice */

*.notice {
	color: #557630;
	font-weight: bold;
}

#contentMain ul.notice {
	padding: 10px 0 0 20px;
	list-style: disc;
}

/* return */

*.return {margin-top: 10px;}

/* section */

div.section {
	margin-bottom: 15px;
}

/* headerNavi --------------------------------- */

/* langNavi */

#langNavi {
	background: #DFF2FC;
	margin: 1px 0;
	padding: 3px 15px;
	width: 870px;
}

#langNavi li {
	margin: 0 0 0 15px;
	float: right;
}

#langNavi img {
	display: block;
}

/* globalNavi */

#globalNavi {
	background: #00A0E9;
	width: 900px;
}

#globalNavi li {
	float: left;
}

#globalNavi img {
	vertical-align: top;
}

/* contentMain -------------------------------- */

#pagebody {
	margin-top: 20px;
	width: 900px;
}

#pagebody #contentMain {
	width: 684px;
	float: left;
}

/* contentNavi -------------------------------- */

#pagebody #contentNavi {
	width: 196px;
	float: right;
}

/* 資料請求・よくある質問・お問い合わせエリア */

#contentNavi #rnCmn {
	background: #F3F3F3 url(../images/bg_rn_upper.gif) no-repeat;
	margin: 0 0 10px;
	padding: 5px 0 0;
}

#contentNavi #rnCmn img {
	vertical-align: top;
}

#contentNavi #rnCmn div.inner {
	background: url(../images/bg_rn_lower.gif) no-repeat 0 100%;
	margin: 0;
	padding: 0 5px 5px;
}

/* 資料請求 */

#contentNavi #rnCmn div.rnRequest {
	background: #FEDB4F url(../images/rn_bg_request.gif) no-repeat;
}

#contentNavi #rnCmn img.rnReq {
	margin: 7px 5px 7px;
}

/* よくある質問・お問い合わせボタン */

#contentNavi #rnCmn img.rnCmnBtn {
	margin-top: 7px;
}


/* FreeCall */

#contentNavi div.freeCall {
	background: url(../images/bg_rn_fc_upper.gif) no-repeat;
	padding-top: 10px;
}

#contentNavi div.freeCall div.inner {
	background: url(../images/bg_rn_fc_lower.gif) no-repeat 0 100%;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

#contentNavi div.freeCall h3 {
	margin-bottom: 7px;
}

#contentNavi div.freeCall p {
	margin: 0 10px;
	font-size: 85.75%;
	line-height: 140%;
}

#contentNavi div.freeCall p.fc {
	color: #557630;
	padding: 0 0 5px 0;
}

#contentNavi div.freeCall p.fc strong {
	font-size: 185.75%;
	font-family: arial,helvetica,Trebuchet MS;
	line-height: 110%;
}

#contentNavi div.freeCall span.fctxt {
	text-align: center;
	display: block;
}

/* バナー */

#pagebody #contentNavi div.bnr {
	margin-bottom: 10px;
	display: block;
}

#pagebody #contentNavi div.bnr.rear {
	margin: 0;
}

#contentNavi div.bnrarea {
	padding-bottom:10px;
}


/* Company */

#pagebody #contentNavi div.rnCompany {
	background: #F3F3F3;
	margin-bottom: 10px;
	padding: 15px 10px;
}

#pagebody #contentNavi div.rnCompany h3 {
	color: #557630;
	background: url(../images/hr.gif) no-repeat 0 100%;
	margin: 0 0 7px;
	padding-bottom: 7px;
}

#pagebody #contentNavi div.rnCompany p {
	margin-top: 3px;
	font-size: 85.75%;
	line-height: 140%;
}

#pagebody #contentNavi div.rnCompany ul.arrGray {
	margin-top: 7px;
}

/* popup -------------------------------------- */

#popup #contentMain {
	margin: 10px 15px;
	width: 684px;
}

/* 教室だよりクイズ */
#popup h2.quiz img {
	vertical-align:text-top;
}
#popup .translation {
	font-size:108%;
	padding:3px 0 0 28px;
}
#popup .quiztop {
	text-align:center;
	padding-top:20px;
}
#popup ol.quizlist {
	padding-top:15px;
}
#popup ol.quizlist li {
	display:inline;
	padding-right:25px;
}
#popup ol.quizlist li strong {
	font-weight:bold;
	color:#00a0e9;
}
#popup ruby rt {
	font-weight:normal;
}
#popup .quizbottom {
	background:#F5F2E8;
	padding:20px;
	margin-top:20px;
	width:644px;
}
#popup .quizbottom .readtxt {
	color:#557630;
	font-size:107%;
	font-weight:bold;
}
#popup .quizbottom table.quiztable {
	margin:20px 0 0 80px;
}
#popup table.quiztable th {
	padding:8px 15px 5px;
}
#popup table.quiztable td {
	font-weight:bold;
	font-size:107%;
	width:350px;
}
#popup table.quiztable th input {
	width:35px;
	margin-top:2px;
	text-align:center;
	font-weight:bold;
	color:#00a0e9;
}
#popup .submitBtn {
	text-align:center;
	padding-top:20px;
}
#popup .submitBtn input {
	width:160px;
	margin:0 auto;
}
#popup .inputerror {
	background-color: #FFC0C0;
	padding-bottom:10px;
	margin-top:10px;
}
#popup #confirmation {
	display:block;
}
#popup #correct {
	display:none;
	text-align:center;
	font-size:150%;
	color:#00a0e9;
	padding-top:140px;
	font-weight:bold;
	line-height:1.6;
}
#popup #correct input {
	margin-top:150px;
	width:100px;
}
#popup .quizbottom .txtquestion {
	color:#00a0e9;
}
#popup .quizbottom .txtbox {
	text-align:center;
	padding:15px 0;
}
#popup .quizbottom .inbox {
	padding-bottom:10px;
	margin-top:10px;
}
#popup .quizbottom .txtbox input {
	width:100px;
	padding:10px 0;
	color:#00A0E9;
	text-align:center;
	font-size:18px;
}


/*-- TITLE --*/
#popup #contentMain h1 {color: #00A0E9; margin-bottom: 10px; border-bottom: 2px solid #7DCDF4; font-size: 150%; line-height: 150%;}
#popup #contentMain h2 {color: #333333; margin-top: 15px; font-size: 114.5%; line-height: 120%;}
#popup #contentMain h3 {color: #00b3d5; margin-top: 15px; font-size: 107.5%; line-height: 120%;}
#popup #contentMain h4 {color: #333333; margin-top: 10px; font-size: 100%; line-height: 120%;}
#popup #contentMain h5 {color: #00A0E9; margin-top: 7px; font-size: 85.75%; line-height: 120%;}


/* notice */

#contentMain ul.notice li {
	margin-top: 1em;
}

/* note */

.note {
	color: #FF0000;
}