@charset "Shift_JIS";

/* 機能紹介　[ style.css ]
=================================
1: 共通

2: まいこ先生トップ [ id="maiko-top" ]

3: 会話の始め方 [ id="maiko-beginning" ]

4: 「まいこ」とは？ [ id="maiko-profile" ]

5: 会話を楽しむポイント [ id="maiko-point" ]

6: デジタルプレゼント [ id="maiko-present" ]
=================================*/


/*1: 共通
=================================*/

#main2 {
	float: none;
	width: 800px;
	margin: 0;
	padding: 0;
	color: #666;
}

/* ナビゲーション */
#lonavi ul {
	width: 801px;
	margin: 0;
	padding:0;
}

ul#maiko-navi li {
	float: left;
}

/* レイアウト枠（サイドバーあり） */
div#main-box {
	width: 800px;
	margin-top: 20px;
	margin-bottom: 20px;
}
div#main-box div#main-box-r {
	width: 205px;
	float: right;
	background: #FFEBF2;
}
div#main-box div#main-box-l {
	width: 570px;
	float: left;
}

/* レイアウト枠（サイドバーなし） */
div#main-box1 {
	float: left;
	width: 160px;
}
div#main-box2 {
	float: right;
	width: 640px;
	margin-bottom: 20px;
	_clear:both;
}

/* 登録できない方へ */
div.maiko-help,
div.maiko-help02 {
	border: 1px solid #E54D72;
	background: #fff;
	padding: 7px;
	margin: 0 30px;
}
div.maiko-help02 {
	margin: 0 0 20px 30px;
	width:580px;
}
div.maiko-help p.title,
div.maiko-help02 p.title {
	font-weight: bold;
	background: url(../img_c/ic001.gif) no-repeat left top;
	padding: 5px 30px;
	zoom: 1;
}
div.maiko-help p.talign-r,
div.maiko-help02 p.talign-r {
	padding-top: 3px;
}
div.maiko-help a.icon-arrow {
	background: url(../img_c/ic002.gif) no-repeat 15px 50%;
	padding-left: 30px;
	zoom: 1;
}
html[xmlns] > /**/div.maiko-help a.icon-arrow { /*--IE5.0 hack--*/
	background:none;
}
p span.arrow {
	display:none;
}
html[xmlns] > /**/p span.arrow { /*--IE5.0 hack--*/
	display: inline;
	background: url(../img_c/ic002.gif) no-repeat 0 0;
	zoom: 1;
}

/* 登録できない方へ（サイドバー内） */
div#main-box-r div.maiko-help {
	margin: 0 10px;
}
div#main-box-r div.maiko-help p.title {
	background: url(../img_c/ic004.gif) no-repeat left top;
	padding: 0 0 10px 19px;
	line-height: 1.2;
}
div#main-box-r div.maiko-help a.icon-arrow {
	display: block;
	background: url(../img_c/ic002.gif) no-repeat 0px 3px;
	padding-left: 15px;
	zoom: 1;
}

/* 会話の始め方（サイドバー内） */
div#main-box-r div.maiko-begin {
	width: 205px;
	height: 107px;
	background: url(../img_c/bg006.gif) no-repeat left top;
	position: relative;
}
div#main-box-r div.maiko-begin p.maiko-bt-begin {
	position: absolute;
	top: 32px;
	left: 13px;
}

/* ステップ説明（サイドバー内） */
div#main-box-r ol#step {
	margin-bottom: 15px;
}
div#main-box-r ol#step li p.text2,
div#main-box-r ol#step li p.text1 {
	margin: 0 10px;
}
div#main-box-r ol#step li#step1,
div#main-box-r ol#step li#step2 {
	padding-bottom: 33px;
	background: url(../img_c/bg007.gif) no-repeat left bottom;
	zoom: 1;
}
/* このページのTOPへ（下線付き） */
div#main2 p.pagetop-border,
div#main2 p.pagetop-border02 {
	background: url(../img_c/bg001.gif) repeat-x left bottom;
	margin-top: 10px;
	margin-bottom: 20px;
}
div#main2 p.pagetop-border02 {
	width:570px;
}
/* 矢印付きリンク */
a.icon-arrow {
	background: url(../img_c/ic002.gif) no-repeat 0% 50%;
	padding-left: 17px;
	padding-top: 1px;
	zoom: 1;
}
html[xmlns] > /**/a.icon-arrow { /*--IE5.0 hack--*/
	background:none;
}
/* 注意書き */
p.maiko-attention {
	font-weight: bold;
	color: #CC0033;
	background: url(../img_c/ic003.gif) no-repeat left top;
	padding-left: 37px;
	padding-bottom: 10px;
}

/* ボタン（会話の始め方） */
p.maiko-bt-begin {
	width: 180px;
	height: 52px;
	text-indent: -9999px;
}
p.maiko-bt-begin a {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img_c/bt001.gif) no-repeat left top;
	outline: 0;
}
p.maiko-bt-begin a:hover,
p.maiko-bt-begin a:active {
	background: url(../img_c/bt001on.gif) no-repeat left top;
}

/* 注釈 */
p.indent {
	text-indent: -1.5em;
	padding-left: 1.5em;
}

/* 特別枠 */
div.special-box {
	padding: 0 12px 12px 12px;
	background: url(../img_c/bg002.gif) no-repeat left bottom;
	zoom: 1;
}
div.special-box p {
	line-height: 1.5;
}

/* 特別枠（570px用） */
div.special-box-570 {
	padding: 0 12px 12px 12px;
	background: url(../img_c/bg004.gif) no-repeat left bottom;
	zoom: 1;
}
div.special-box-570 p {
	line-height: 1.5;
}

/* 特別枠2 */
div.special-box2 {
	width: 640px;
	height: 150px;
	background: url(../img_c/bg003.jpg) no-repeat left top;
	position: relative;
	margin-top: 20px;
}
div.special-box2 h3 {
	text-indent: -9999px;
	font-size: 1px;
}
div.special-box2 p.image {
	position: absolute;
	top: 12px;
	right: 12px;
}
div.special-box2 p.maiko-bt-begin {
	position: absolute;
	top: 65px;
	left: 90px;
}

/* 特別枠2（570px用） */
div.special-box2-570 {
	width: 570px;
	height: 150px;
	background: url(../img_c/bg005.jpg) no-repeat left top;
	position: relative;
	margin-top: 20px;
}
div.special-box2-570 h3 {
	text-indent: -9999px;
	font-size: 1px;
}
div.special-box2-570 p.image {
	position: absolute;
	top: 12px;
	right: 12px;
}
div.special-box2-570 p.maiko-bt-begin {
	position: absolute;
	top: 56px;
	left: 48px;
}

/* 強調テキスト */
.tx-pink {
	color: #CC0033;
	font-weight: bold;
}
.tx-bold {
	font-weight: bold;
}

/* テキスト位置 */
.talign-r {
	text-align: right;
	clear:both;
}
.talign-c {
	text-align: center;
}

/* 行間 */
p.lh150 {
	line-height: 1.5;
}

/* マージン */
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mb5 { margin-bottom: 5px; }

/* パディング */
.pl10 { padding-left: 10px; }


/*2: まいこ先生トップ [ id="maiko-top" ]
=================================*/

/* レイアウト枠 */
#maiko-top div#main-box2-contents p.main-text {
	padding: 15px 30px;
	line-height: 1.5;
}

/* ステップ */
#maiko-top div#step-box {
	padding: 50px 17px 20px 17px;
	background: url(../img/index_bg02.jpg) no-repeat left top;
	zoom: 1;
}
#maiko-top div#step-box ol {
	margin-bottom: 20px;
}
#maiko-top div#step-box ol li {
	width: 186px;
	float: left;
}
#maiko-top div#step-box ol li#step1,
#maiko-top div#step-box ol li#step2 {
	margin-right: 24px;
}
#maiko-top div#step-box ol p.bt {
	margin-bottom: 5px;
}
#maiko-top div#step-box ol li#step2 p.bt a {
	background: url(../img/index_bt02.gif) no-repeat left top;
}
#maiko-top div#step-box ol li#step3 p.bt a {
	background: url(../img/index_bt03.gif) no-repeat left top;
}
#maiko-top div#step-box ol li#step2 p.bt a:hover,
#maiko-top div#step-box ol li#step2 p.bt a:active {
	background: url(../img/index_bt02on.gif) no-repeat left top;
}
#maiko-top div#step-box ol li#step3 p.bt a:hover,
#maiko-top div#step-box ol li#step3 p.bt a:active {
	background: url(../img/index_bt03on.gif) no-repeat left top;
}

/* box1 */
#maiko-top div#box1 {
	margin: 25px 25px 0 25px;
}
#maiko-top div#box1 div {
	float: left;
	margin-top: 15px;
	width: 360px;
}
#maiko-top div#box1 p.maiko-bt-begin {
	float: right;
}


/*3: 会話の始め方 [ id="maiko-beginning" ]
=================================*/

/* レイアウト枠（サイドバーなし） */

/* 見出し */
#maiko-beginning div#main2 h3 {
	margin-top: 20px;
}

/* ページ内リンク */
#maiko-beginning div#main2 ol#step-link {
	width: 640px;
	margin-top: 20px;
}
#maiko-beginning div#main2 ol#step-link li {
	float: left;
}

/* ステップ */
#maiko-beginning div#main2 ol#step {
	margin-top: 20px;
}
#maiko-beginning div#main2 ol#step p.image {
	width: 230px;
	float: right;
	text-align: right;
	margin-bottom: 15px;
}
#maiko-beginning div#main2 ol#step div.left {
	width: 410px;
	float: left;
}
#maiko-beginning div#main2 ol#step p.maiko-attention {
	margin-left: 40px;
	width:600px;
}
#maiko-beginning div#main2 ol#step .pd80 {
	padding-left: 80px;
}
#maiko-beginning div#main2 ol#step .note {
	width:640px;
}


/*4: 「まいこ」とは？ [ id="maiko-profile" ]
=================================*/

/* プロフィール */
#maiko-profile div#profile-box {
	margin-top: 20px;
	margin-bottom: 20px;
	width: 570px;
	height: 344px;
	background: url(../img/profile_bg01.gif) no-repeat left top;
	position: relative;
}
#maiko-profile div#profile-box table {
	position: absolute;
	top: 15px;
	left: 20px;
}
#maiko-profile div#profile-box table th,
#maiko-profile div#profile-box table td {
	font-size: 12px;
	color: #666;
	height: 24px;
}
#maiko-profile div#profile-box table th {
	text-align: left;
	padding-right: 10px;
}
#maiko-profile div#profile-box table p.glass {
	background: url("../img/profile_ic01.gif") no-repeat 0 0;
	color: #CC0033;
	padding-left: 38px;
	_height: 1px;
	padding-bottom: 3px;
}


/*5: 会話を楽しむポイント [ id="maiko-point" ]
=================================*/

/* キーワード */
#maiko-point ul.maiko-keyword {
	margin: 18px 18px 10px 65px;
}
#maiko-point ul.maiko-keyword li {
	font-weight: bold;
	width: 150px;
	float: left;
	font-size: 13px;
	height: 21px;
}

/* box */
#maiko-point div#main-box-l div.box {
	margin-top: 18px;
	width:570px;
}
#maiko-point div#main-box-l div.box p.image {
	width: 280px;
	float: right;
}
#maiko-point div#main-box-l div.box div.box-l {
	width: 270px;
	float: left;
	padding-bottom: 15px;
}
#maiko-point div#main-box-l div.box div.box-l p {
	padding-left: 10px;
}


/*6: デジタルプレゼント [ id="maiko-present" ]
=================================*/
#maiko-present p.env {
	text-indent: -6.5em;
	padding-left: 6.5em;
	margin-top: 30px;
}
html[xmlns] > /**/#maiko-present p.env {/*--IE5.0 hack--*/
	width:570px;
}
html[xmlns]>/**/#maiko-present p.env {/*--FF2.0 hack--*/
	width: 480px;
}

/* アンカーリンク */
/*#maiko-present div.anchor {
	margin-top:15px;
	border-left: 1px dotted #999999;
	min-height:43px;
}
#maiko-present div.anchor p{
	border-right: 1px dotted #999999;
	float:left;
}
#maiko-present div.anchor img{
	margin:7px 9px 5px;
}*/
#maiko-present div.anchor {
	margin-top:15px;
}
/* 第一弾 */
#maiko-present div.present-box1 {
	margin-top: 30px;
	width: 570px;
	height: 184px;
	background: url("../present/img/present_bg02.jpg") no-repeat 0 0;
	position: relative;
}
#maiko-present div.present-box1 h3 {
	text-indent: -9999px;
}
#maiko-present div.present-box1 p.text2 {
	position: absolute;
	top: 70px;
	left: 15px;
	width: 270px;
}
/* 第二弾 */
#maiko-present div.present-box2 {
	margin-top: 15px;
	width: 570px;
	height: 265px;
	background: url("../present/img/present_bg03.jpg") no-repeat 0 0;
	position: relative;
}
#maiko-present div.present-box2 h3,
#maiko-present div.voice h3 {
	text-indent: -9999px;
}
#maiko-present div.present-box2 p.text2 {
	position: absolute;
	top: 70px;
	left: 15px;
	width: 555px;
}
#maiko-present div.present-box2 p{
	position: absolute;
	top: 117px;
}
#maiko-present div.present-box2 p.photo img{
	margin:0 10px 0 9px;
}
#maiko-present div.howto{
	min-height:46px;
	_height:46px;
	width: 570px;
	overflow:hidden;
}
#maiko-present div.howto img{
	float:left;
	margin-top:3px;
}
#maiko-present div.howto p{
	width: 470px;
	min-height:46px;
	float:right;
}
#maiko-present div.voice {
	width: 570px;
	min-height: 200px;
	_height: 200px;
	background: url("../present/img/present_bg04.jpg") no-repeat 0 0;
}
#maiko-present div.voice p{
	width: 390px;
	margin:60px 0 0 18px;
}
#maiko-present div.voice p span{
	font-weight:bold;
	margin-right:20px;
}
#maiko-present div.voice p.profile{
	font-size:70%;
	margin-top:15px;
	line-height:150%;
}
#maiko-present div.voice p.introduction{
	margin-top:10px;
}
#maiko-present div.voice p.introduction span{
	color: #d94267;
	font-weight:normal;
	font-size:80%;
}
#maiko-present div.voice-bottom {
	width: 570px;
	height: 8px;
	background: url("../present/img/present_bg05.gif") no-repeat 0 0;
	margin-bottom:10px;
	_margin-bottom:0;
}
/* ボタン */
#maiko-present div.button-box-l {
	width: 279px;
	float: left;
}
#maiko-present div.button-box-r {
	width: 279px;
	float: right;
}
#maiko-present div.button-box p.tx-bold {
	margin-bottom: 15px;
	margin-top: 10px;
}