@charset "utf-8";

@import "/manual/css/manual_common.css"; 	/* common css 読み込み */



/* ------------------------------ 招待客リスト */


/* ------------------------------  index */

/* 目次 */
#content ul.invitation li {
	list-style: disc inside;
	padding: 0px 0px 0px 100px;
}


/* ------------------------------no1. step1 招待客リスト */

/* ゲストリスト download */
#content .guestlist {
	width: 255px;
	padding: 15px;
	margin: 0px 0px 0px 50px;
	border: 1px solid #999999;
}

#content .guestlist p {
	width: 185px;
	float: left;
	padding: 0px;
	margin: 0px;
	font-weight: bold;
}

#content .guestlist img {
	float: right;
	margin: 0px 10px 0px 0px;
	display: inline;
}



/* ------------------------------no2. step6 招待状の選び方 */

/* デザインのイメージ */
#content .step6-pic-right {
	width: 730px;
	height: 210px;
	background: url(../img/step6-pic.gif) no-repeat 400px 0px;
}

#content .step6-pic-right p {
	width: 320px;
}

/* デザインの選び方 */
/* 大枠 */
#content .step6 {
	width: 730px;
	height: 150px;
	margin: 0px 0px 35px 30px;
}

/* 小枠：共通 */
#content .step6 dl {
	width: 235px;
	margin: 0px;
	padding: 0px;
	float: left;
}

#content .step6 dl.step-box1 { background: url(/manual/img/common/no01.gif) no-repeat 0px 0px;}
#content .step6 dl.step-box2 { background: url(/manual/img/common/no02.gif) no-repeat 0px 0px;}
#content .step6 dl.step-box3 { background: url(/manual/img/common/no03.gif) no-repeat 0px 0px;}

/* 中見出し */
#content .step6 dl dt {
	margin: 0px 0px 0px 30px;
	padding: 0px;
}

/* テキスト */
#content .step6 dl dd {
	width: 185px;
	height: 86px;
	line-height: 20px;
	margin: 16px 0px 0px 0px;	
}



/* ------------------------------no3. step7 手作り招待状の作り方 */

/* 招待状アイデア */
#content .step7-ps dl {
	width: 660px;
	height: 90px;
	padding: 20px 20px 20px 0px;
	margin: 0px 0px 20px 50px;
	border: 1px solid #999999;
}

#content .step7-ps dl dt {
	padding: 0px;
	margin: 0px 0px 0px 20px;
}

#content .step7-ps dl dd {
	width: 270px;
	float: left;
	padding: 0px 0px 5px 0px;
	margin: 0px 0px 0px 50px;
	line-height: 20px;
	display: inline;
}

/* キヤノンボタン */
#content .step7-ps .temp-btn {
	margin: 25px 0px 0px 77px;
}

#content .step7-ps .temp-btn p {
	margin: 10px 15px 0px 295px;
}

/* キヤノンタイアップ */
#content .canon {
	margin: 50px 0px 0px 0px;	
}

#content .canon dl {
	margin: 0px;
}

#content .canon dl dt {
	margin: 15px 0px 0px 0px;
}

#content .canon dl dd {
	margin: 25px 0px 0px 15px;
	float: left;
	display: inline;
}



/* ------------------------------no4. step2 招待状の書き方 招待状の文面例 */

/* 大枠 */
#content .step2-examples {
	width: 730px;
	padding: 0px 20px;
}


/* 名義 */
#content .step2-examples p {
	color: #666666;
	font-weight: bold;
	padding: 0px;
	margin:	10px 0px 20px 30px;
}

/* ------------------------------ 例文 */
#content .step2-examples .examples {
	width: 690px;
	margin: 0px 0px 15px 15px;
	border-left: 1px solid #999999;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
	background: url(/manual/img/common/examples-bg.gif) no-repeat 50px 70px;
}

/* ボタン：大枠 */
#content .step2-examples .button { background-color: #000000;}

/* ボタン：共通 */
#content .step2-examples .examples dl.button-pre, 
#content .step2-examples .examples dl.button-next {
	width: 344px;
	height: 46px;
	font-size: 10px;
	background-color: #000000;
}

/* ボタン：個別指定 */
#content .step2-examples .examples dl.button-pre { float: left;}
#content .step2-examples .examples dl.button-next { float: right;}

/* ボタン画像：共通 */
#content .step2-examples .examples dl.button-pre dt, 
#content .step2-examples .examples dl.button-next dt {
	width: 110px;
	padding: 0px;
	display: inline;
	letter-spacing: 0px;
}

/* ボタン画像：個別指定 */
#content .step2-examples .examples dl.button-pre dt { float: left; margin: 0px 5px 0px 0px;}
#content .step2-examples .examples dl.button-next dt { float: right; margin: 0px 0px 0px 5px;}

/* ボタンテキスト：リンク共通 */
#content .step2-examples .examples dl.button-pre dd, 
#content .step2-examples .examples dl.button-next dd {
	padding: 0px;
	margin: 0px;
	line-height: 46px;
}

/* ボタンテキスト：個別指定 */
#content .step2-examples .examples dl.button-next dd { text-align: right;}

/* ボタンテキスト：リンク指定 */
#content .step2-examples .examples dl.button-pre a, 
#content .step2-examples .examples dl.button-next a {
	color: #FFFFFF;
}

#content .step2-examples .examples dl.button-pre a:hover, 
#content .step2-examples .examples dl.button-next a:hover {
	color: #F9396F;
}

/* 例文画像 */
#content .step2-examples .examples img.step2-pic {
	margin: 20px 0px 0px 0px;
}

/* 注意書き */
#content .step2-examples p.notes {
	padding: 0px;
	margin: 0px 0px 0px 35px;
	line-height: 20px;
	font-weight: normal;
}

/* ------------------------------ 例文リスト(3つ並びバージョン) */
/* 大枠 */
#content .examples-list3 {
	width: 690px;
	padding: 0px 0px 20px 0px;
	margin: 0px 0px 30px 35px;
	border: 1px solid #999999;
}

/* タイトル */
#content .examples-list3 img.list-ttl {
	margin: 30px 0px 0px 30px;
}

/* リスト */
#content .examples-list3 ul {
	padding: 0px;
	margin: 20px 15px 15px 35px;
	list-style: none;
}

#content .examples-list3 ul li {
	float: left;
	padding: 10px 10px 10px 70px;
	margin: 0px;
	background: url(/manual/img/common/link-back.gif) no-repeat 55px 15px;
}



/* ------------------------------no5. step5 招待状の書き方 付箋の文面例 */

/* 大枠 */
#content .step5-examples {
	width: 730px;
	height: 670px;
	padding: 0px 20px;
}

/* 名義 */
#content .step5-examples  p {
	color: #666666;
	font-weight: bold;
	padding: 0px;
	margin:	10px 0px 20px 30px;
}

/* ------------------------------ 例文 */
#content .step5-examples .examples {
	width: 690px;
	padding: 0px 0px 10px 0px;
	margin: 0px 0px 30px 15px;
	border-left: 1px solid #999999;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
	background: url(/manual/img/common/examples-bg.gif) no-repeat 50px 70px;
}

/* ボタン：大枠 */
#content .step5-examples .button { background-color: #000000;}

/* ボタン：共通 */
#content .step5-examples .examples dl.button-pre, 
#content .step5-examples .examples dl.button-next {
	width: 344px;
	height: 46px;
	font-size: 10px;
	background-color: #000000;
}

/* ボタン：個別指定 */
#content .step5-examples .examples dl.button-pre { float: left;}
#content .step5-examples .examples dl.button-next { float: right;}

/* ボタン画像：共通 */
#content .step5-examples .examples dl.button-pre dt, 
#content .step5-examples .examples dl.button-next dt {
	width: 110px;
	padding: 0px;
	display: inline;
	letter-spacing: 0px;
}

/* ボタン画像：個別指定 */
#content .step5-examples .examples dl.button-pre dt { float: left; margin: 0px 5px 0px 0px;}
#content .step5-examples .examples dl.button-next dt { float: right; margin: 0px 0px 0px 5px;}

/* ボタンテキスト：リンク共通 */
#content .step5-examples .examples dl.button-pre dd, 
#content .step5-examples .examples dl.button-next dd {
	padding: 0px;
	margin: 0px;
	line-height: 46px;
}

/* ボタンテキスト：個別指定 */
#content .step5-examples .examples dl.button-next dd { text-align: right;}

/* ボタンテキスト：リンク指定 */
#content .step5-examples .examples dl.button-pre a, 
#content .step5-examples .examples dl.button-next a {
	color: #FFFFFF;
}

#content .step5-examples .examples dl.button-pre a:hover, 
#content .step5-examples .examples dl.button-next a:hover {
	color: #F9396F;
}

/* 例文画像 */
#content .step5-examples .examples img.step5-pic {
	margin: 20px 0px 20px 20px;
}

/* ------------------------------ 例文リスト(5つ並びバージョン) */
/* 大枠 */
#content .examples-list5 {
	width: 690px;
	padding: 0px 0px 20px 0px;
	margin: 0px 0px 30px 35px;
	border: 1px solid #999999;
}

/* タイトル */
#content .examples-list5 img.list-ttl {
	margin: 30px 0px 0px 30px;
}

/* リスト */
#content .examples-list5 ul {
	padding: 0px;
	margin: 20px 15px 15px 35px;
	list-style: none;
}

#content .examples-list5 ul li {
	float: left;
	padding: 10px 10px 10px 45px;
	margin: 0px;
	background: url(/manual/img/common/link-back.gif) no-repeat 30px 15px;
}



/* ------------------------------no6. step3 宛名の書き方 */

/* 画像 */
#content ul.step3-pic1 {
	width: 730px;
	padding: 0px;
	margin: 0px 0px 0px 20px;
}

#content ul.step3-pic1 li {
	padding: 0px;
	margin: 0px;
	display: inline;
}

/* 注意書き */
#content ul.step3-text {
	width: 700px;
	padding: 0px;
	margin: 10px 0px 0px 45px;
	list-style-position: outside;
	line-height: 20px;
}

/* 招待状の文面例：番号共通 */
#content ul.step3-text li {
	padding: 5px 0px 0px 20px;
	margin: 0px;
}

/* 招待状の文面例：番号個別 */
#content ul.step3-text li.no1 { background:url(/manual/img/common/no1.gif) no-repeat 0px 4px;}
#content ul.step3-text li.no2 { background:url(/manual/img/common/no2.gif) no-repeat 0px 4px;}
#content ul.step3-text li.no3 { background:url(/manual/img/common/no3.gif) no-repeat 0px 4px;}
#content ul.step3-text li.no4 { background:url(/manual/img/common/no4.gif) no-repeat 0px 4px;}
#content ul.step3-text li.no5 { background:url(/manual/img/common/no5.gif) no-repeat 0px 4px;}

/* 切手の貼り方 */
#content .step3-pic-right {
	width: 730px;
	height: 200px;
	background: url(../img/step6-pic04.gif) no-repeat 560px 0px;
}

#content .step3-pic-right p {
	width: 480px;
	padding: 0px;
	margin: 10px 0px 15px 50px;
}

/* 切手の貼り方 */
#content .step3-pic-right p.notes {
	padding: 0px;
	margin: 0px 0px 0px 50px;
}



/* ------------------------------no7. step8 招待状の送り方 */

/* 招待状発送前のチェックポイント */
#content .step8-check {
	height: 300px;
	margin: 0px 0px 30px 40px;
}

/* 枠 */
#content .step8-check .box {
	width: 225px;
	height: 155px;
	float: left;
	padding: 0px;
	margin: 0px 0px 10px 10px;
	display: inline;
	line-height: 20px;
	background-color: #ECECEC;
}

/* タイトル */
#content .step8-check h4 {
	padding: 0px;
	margin: 10px 0px 0px 10px;
	font-weight: bold;
	color: #666666;
}

/* テキスト */
#content .step8-check .box ul {
	height: 120px;
	padding: 0px;
	margin: 2px 0px 0px 5px;
}

#content .step8-check .box ul li {
	padding: 0px;
	margin: 0px 0px 0px 15px;
	list-style: disc;
	list-style-position: outside;
	letter-spacing: 0px;
}



/* ------------------------------no8. step4 招待状の封の仕方 */

/* 招待状の入れ方 */
#content .step4-pic {
	height: 530px;
	padding: 0px;
	margin: 20px 0px 0px 110px;
	background: url(../img/step4-pic01.gif) no-repeat 0px 0px;
}

/* 注意書き */
#content .step4-pic ul.step4-text {
	padding: 300px 0px 0px 40px;
	margin: 0px;
	list-style-position: outside;
	line-height: 20px;
}

/* 招待状の文面例：番号共通 */
#content .step4-pic ul.step4-text li {
	width: 230px;
	padding: 5px 0px 0px 20px;
	margin: 0px;
}

/* 招待状の文面例：番号個別 */
#content .step4-pic ul.step4-text li.no1 { background:url(/manual/img/common/no1.gif) no-repeat 0px 4px;}
#content .step4-pic ul.step4-text li.no2 { background:url(/manual/img/common/no2.gif) no-repeat 0px 4px;}
#content .step4-pic ul.step4-text li.no3 { background:url(/manual/img/common/no3.gif) no-repeat 0px 4px;}
#content .step4-pic ul.step4-text li.no4 { background:url(/manual/img/common/img/no4.gif) no-repeat 0px 4px;}
#content .step4-pic ul.step4-text li.no5 { background:url(/manual/img/common/img/no5.gif) no-repeat 0px 4px;}

/* 発送別 */
#content h4.step4 {
	font-weight: bold;
	color: #666666;
	margin: 0px 0px 0px 50px;
}



/* ------------------------------no9. step9 招待状にまつわるマナー */

/* リスト */
#content .step9 ul {
	width: 650px;
	padding: 0px;
	margin: 15px 0px 40px 60px;
}

#content .step9 ul li {
	padding: 0px;
	margin: 0px 0px 0px 15px;
	list-style: disc;
	list-style-position: outside;
	line-height: 25px;
}

/* ----------------------------------- Adsense&Dart */

/* 広告枠 */
#content .cgm-ad{
	margin: 30px 15px 0 45px;
	padding: 20px 0;
	background: #F5F5F5;
}

/* インパクト枠 */
#content .cgm-ad .impact-ad{
	float: left;
	margin: 0 0 0 20px;
	display: inline;
}

#content .cgm-ad .impact-ad a img{border: 1px #C6C6C6 solid;}
#content .cgm-ad .impact-ad a:hover img{border: 1px #F9396F solid;}


/* アドセンス枠 */
#content .cgm-ad .adsense-ad{
	width: 300px;
	margin: 0 0 0 360px;
	padding: 0 10px;
	background-color: #FFF;
	text-align: center;
}