@charset "Shift_JIS";
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Opera !!!!!!!!!!!!!!!!!!!!!!!!!!
@charset宣言の前に文字があると、最初のセレクタが反映されない。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

/*
*****************************************************
FileName:	composition_kitagin.css
Version:	2006/03/10
*****************************************************
*/


/* ####################### first setting ####################### */
/* ======================= anything ======================= */
* {
	line-height: 1em;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
/* ======================= END anything END ======================= */


/* ======================= main frame ======================= */
#frame {
	padding: 3px 0px 3px 0px;
	width: 760px;
/* !CAUTION! */
/*	height: 100%;
/* ! end CAUTION end ! */
}
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Firefox and Mozilla !!!!!!!!!!!!!!!!!!!!!!!!!!
#frame

FirefoxとMozillaのために全コンテンツを包括する要素（div#frame）が必要。
body直下にheaderやfooterを置くと表示が崩れる。
（勝手に不要な縦スクロールバーが表示される。）
？？？
他の設定との兼ね合いで
横スクロールバーが表示されるという問題が発生する場合がある。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Opera !!!!!!!!!!!!!!!!!!!!!!!!!!
	height: 100%;

Operaのために height: 100%; など高さ指定を行なってはならない。
画面外に余白が生まれ表示が乱れる。
（無意味な縦横スクロールバーが表示される。）
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
/* ======================= END main frame END ======================= */
/* ####################### END first setting END ####################### */


/* ####################### parts (class and id) setting ####################### */
/* ======================= header ======================= */
/* ----------------------- header outer ----------------------- */
#header {
	width: 760px;
	height: 71px;
	background: 0px 0px url(../img/header_back001.gif) repeat-x #13327C;
	display: block;
	margin: 0px 0px 0px 3px;
}
/* ----------------------- END header outer END ----------------------- */


/* ----------------------- title ----------------------- */
#title {
	width: 250px;
	height: 50px;
	position: absolute;
	top: 3px;
	left: 3px;
	padding: 20px 0px 0px 1px;
	background: 0px 0px url(../img/corner002.gif) no-repeat;
}


#title h1 {
	font-size: 15px;
	font-weight: bold;
	line-height: 1em;
}

a#TOP {
	width: 250px;
	height: 50px;
	display: block;
}
/* ----------------------- END title END ----------------------- */


#headerMenu {
	width: 461px;
	position: relative;
	top: 21px;
	right: 0px;
	float: right;
	display: block;
}


/* ----------------------- standard menu ----------------------- */
#standardMenu {
	position: relative;
	top: 0px;
	right: 0px;
	width: 200px;
	height: 20px;
	float: right;
}

#standardMenu li {
	width: 100px;
	height: 20px;
	float: left;
	display: block;
}

#standardMenu a {
	width: 100px;
	height: 20px;
	display: block;
	font-size: 0px;
	line-height: 0em;
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#standardMenu a:hover {
	background-position: 0px -17px;
}

#standardMenu a#standardMenuContact {
	background-image: url(../img/standard_menu001.gif);
}

#standardMenu a#standardMenuPrivacy {
	background-image: url(../img/standard_menu002.gif);
}
/* ----------------------- END standard menu END ----------------------- */


/* ----------------------- link to UCcard ----------------------- */
#linkUC {
	position: relative;
	right: 1px;
	bottom: 1px;
	width: 456px;
	height: 30px;
	float: right;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background: 0px 0px url(../img/linkUC001.gif) no-repeat transparent;
}

#linkUC ul {
	position: relative;
	width: 445px;
	height: 30px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 11px;
}

#linkUC li {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height: 30px;
	float: left;
	display: block;
}

#linkUC li#linkAutoSpeech {
	width: 96px;

}

#linkUC li#linkChange {
	width: 90px;
}

#linkUC li#linkLoss {
	width: 70px;
}

#linkUC li#linkRule {
	width: 61px;
}

#linkUC li#linkPolicy {
	width: 61px;
}

#linkUC li#linkMaterial {
	width: 67px;
}

#linkUC a {
	height: 30px;
	display: block;
	font-size: 0px;
	line-height: 0em;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

#linkUC li a:hover {
	background-position: 0px -31px;
}

#linkUC li#linkAutoSpeech a {
	width: 96px;
	background-image: url(../img/linkUC002.gif);
}

#linkUC li#linkChange a {
	width: 90px;
	background-image: url(../img/linkUC003.gif);
}

#linkUC li#linkLoss a {
	width: 70px;
	background-image: url(../img/linkUC004.gif);
}

#linkUC li#linkRule a {
	width: 61px;
	background-image: url(../img/linkUC005.gif);
}

#linkUC li#linkPolicy a {
	width: 61px;
	background-image: url(../img/linkUC005-1.gif);
}

#linkUC li#linkMaterial a {
	width: 67px;
	background-image: url(../img/linkUC006.gif);
}
/* ----------------------- END link to UCcard END ----------------------- */
/* ======================= END header END ======================= */


/* ======================= content area ======================= */
/* ----------------------- content wrapper ----------------------- */
.container {
	width: 760px;
	margin: 3px 0px 0px 3px;
	padding: 0px 0px 0px 0px;
	display: block;
/* !CAUTION! */
/*	height: 100%;
/* ! end CAUTION end ! */
}
/*
$$$$$$$$$$$$$$$$$$$$$$$$$$$ TIPS for Opera $$$$$$$$$$$$$$$$$$$$$$$$$$
	max-width: 100%;
	min-width: 760px;

Operaのために max-width, min-width の設定を行なう。
これで float が意図した通りに並び、リキッドレイアウトも保たれる。
（ないと #content と #subMenu が上下に並ぶ。）
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
*/
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Opera & Firefox !!!!!!!!!!!!!!!!!!!!!!!!!!
	height: 100%;
	max-height: 100%;
	min-height: 450px;

OperaとFirefoxのために height, max-height, min-height を設定しない。
設定すると .container の高さが固定になり途中に #footer が被る。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
/* ----------------------- END content wrapper END ----------------------- */


/* ----------------------- site navigation ----------------------- */
/* ....................... side column A ....................... */
#sideColumnA {
	width: 155px;
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: block;
}
/* ....................... END side column A END ....................... */


/* ....................... navi and login ....................... */
#navi,
#login {
	width: 150px;
	border: 1px solid #13327C;
	border-top: 0px solid #FFFFFF;
	background: 0px 0px url(../img/tab_back001.gif) repeat-x #FFFFFF;
	display: block;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 3px 0px;
}
/* ....................... END navi END ....................... */


/* ....................... main menu ....................... */
#mainMenu {
	width: 146px;
	padding: 22px 0px 1px 0px;
	margin: 0px 0px 0px 0px;
	position: relative;
	top: 0px;
	left: -1px;
	display: block;
	white-space: nowrap;
	background: 0px 0px url(../img/corner001.gif) no-repeat;
	border: 0px solid #FF0000;
}

#mainMenu li.mainMenuItem {
	position: relative;
	top: 0px;
	left: 2px;
	width: 146px;
	height: 23px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 1px 0px;
	list-style: none outside;
	display: block;
	font-size: 0px;
	line-height: 0px;
}

#mainMenu li.mainMenuItem a {
	width: 146px;
	height: 23px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	font-size: 0px;
	line-height: 0px;
	display: block;
	text-decoration: none;
}

#mainMenu li.mainMenuItem a:hover {
	background-position: 0px -23px;
}

#mainMenu a#mainMenuAbout {
	background-image: url(../img/mainMenu001.gif);
}

#mainMenu a#mainMenuCard {
	background-image: url(../img/mainMenu002.gif);
}

#mainMenu a#mainMenuService {
	background-image: url(../img/mainMenu003.gif);
}

#mainMenu a#mainMenuLocal {
	background-image: url(../img/mainMenu004.gif);
}
/* ....................... END main menu END ....................... */


/* ....................... login ....................... */
#loginMenu {
	width: 146px;
	padding: 22px 0px 5px 2px;
	margin: 0px 0px 0px 0px;
	position: relative;
	top: 0px;
	left: -1px;
	display: block;
	white-space: nowrap;
	background: 0px 0px url(../img/corner001.gif) no-repeat;
}

#loginMenu table {
	width: 145px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	display: table;
	white-space: nowrap;
	border-spacing: 0px;
	border-collapse: collapse;
}

#loginMenu td {
	border: 0px solid #000000;
	margin: 0px;
	padding: 0px;
}
/* ....................... END login END ....................... */
/* ----------------------- site navigation ----------------------- */


/* ----------------------- main Content area ----------------------- */
/* ....................... main column ....................... */
#mainContent {
	width: 608px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 1px solid #13327C;
	border-top: 0px solid #FFFFFF;
	border-bottom: 0px solid #FFFFFF;
	position: absolute;
	top: 77px;
	left: 155px;
	display: block;
	background: 0px 0px url(../img/tab_back001.gif) repeat-x #FFFFFF;
/* !CAUTION! */
/*	height: 100%;

/*	max-height: 100%;
	min-height: 350px;
/* ! end CAUTION end ! */
}
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Opera & Firefox !!!!!!!!!!!!!!!!!!!!!!!!!!
	height: 100%;
	max-height: 100%;
	min-height: 450px;

OperaとFirefoxのために height, max-height, min-height の設定しない。
設定すると .mainContent の高さが固定になり途中に #footer が被る。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
/* ....................... END main column END ....................... */


/* ....................... real content ....................... */
.content {
	width: 603px;
	padding: 26px 0px 0px 0px;
	margin: 0px 3px 0px 0px;
	position: relative;
	top: 0px;
	left: -1px;
	display: block;
	background: 0px 0px url(../img/corner001.gif) no-repeat transparent;
/* !CAUTION!
	float: right;
*/
/* !CAUTION! */
/*	height: 100%;

/*	max-height: 100%;
	min-height: 350px;
/* ! end CAUTION end ! */
}
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for IE !!!!!!!!!!!!!!!!!!!!!!!!!!
	float: right;

IEのために float: right; の設定はしない。
IEは内包した要素の幅に合わせるため、文章が少ないなどで幅が狭いと
包んだ要素を float: right; しているため、
メニューは左端、コンテンツは右端に寄り、中央に空白が生まれてしまう。
これで float が意図した通りに並び、リキッドレイアウトも保たれる。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Firefox !!!!!!!!!!!!!!!!!!!!!!!!!!
	height: 450px;
	max-height: 100%;
	min-height: 350px;

Firefoxのために height, max-height, min-height を設定しない。
設定すると .content の高さが低い時に #footer が押し下げられて
不要な縦スクロールバーが表示される。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/


.unity {
	width: 425px;
	margin: 0px 7px 35px 18px;
	padding: 0px 0px 9px 0px;
	background: left bottom url(../img/dot001.gif) repeat-x transparent;
}
/* ....................... END real content END ....................... */
/* ----------------------- END main content area END ----------------------- */

/* ----------------------- side column B ----------------------- */
#sideColumnB {
	width: 138px;
	float: right;
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	border: 1px solid #13327C;
	border-top: 0px solid #FFFFFF;
	background-color: #FFFFFF;
	display: block;
}

h2.columnHeading {
	position: relative;
	top: -1px;
	left: -1px;
	padding: 6px 0px 6px 0px;
	font-size: 11px;
	font-weight: normal;
	line-height: 1em;
	display: block;
	color: #13327C;
	text-align: center;
	background: 0px 0px url(../img/corner001_2.gif) no-repeat;
}

h2.columnHeading.top {
	background: 0px 0px url(../img/corner001.gif) no-repeat;
}


/* ....................... info & banner space ....................... */
#info, #banner {
	width: 138px;
	padding: 0px 0px 10px 0px;
	border-top: 1px solid #13327C;
	text-align: left;
	display: block;
}

#info li {
	width: 134px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 3px 4px;
	list-style: none outside;
	display: block;
}

#info a,
#info a:link,
#info a:visited {
	width: 130px;
	padding: 0px 0px 0px 15px;
	background: 0px -15px url(../img/icon_info.gif) no-repeat transparent;
	color: #13327C;
	white-space: normal;
	display: block;
	text-align: left;
	overflow: hidden;
	font-size: 11.5px;
	font-weight: normal;
	line-height: 15px;
	border-right: 1px solid #FFCCCC;
	border-bottom: 1px solid #FFCCCC;
}

#info a:hover {
	background-position: -15px 0px;
	text-decoration: underline;
	border-right: 1px solid #FF0000;
	border-bottom: 1px solid #FF0000;
}


#banner li {
	width: 120px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 2px 8px;
	background-color: #EEEEEE;
	list-style: none outside;
	display: block;
}

#banner li.bordered {
	border: 1px solid #13327C;
}

#banner a {
	text-align: center;
	display: block;
}

#banner img {
	text-align: center;
}
/* ....................... END info space END ....................... */
/* ----------------------- END side column B END ----------------------- */
/* ======================= END content area END ======================= */


/* ======================= footer ======================= */
/* ----------------------- footer outer ----------------------- */
#footer{
	width: 100%;
	height: 16px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	white-space: nowrap;
	clear: both;
	background-color: #13327C;
	display: block;
}
/* ----------------------- END footer outer END ----------------------- */


/* ----------------------- copyright ----------------------- */
#copyright {
	height: 16px;
	padding: 3px 0px 0px 0px;
	color: #FFFFFF;
	text-align: center;
	font-size: 11px;
	font-weight: normal;
	line-height: 1em;
	letter-spacing: 0.1ex;
	white-space: nowrap;
	display: block;
}
/* ----------------------- END copyright END ----------------------- */
/* ======================= END footer END ======================= */
/* ####################### END parts (class and id) setting END ####################### */