@charset "Shift_Jis"; 

/* To Live Is To LoveのindexのCSS基本デザイン */
/* index以外のCSSはmenuとmainの仕切り線の調節で済む */
/* このCSSを使う場合はmainだけをいじる */

/* wrapperの背景色はheaderの背景色で設定 */

/* munuよりmainが長い場合のCSSデザイン */

/* ★menu又はmainの背景色は★背景色が短く表示される色をcontentsに設置する。
★menuとmain★の間の黒ラインは、長くなる方に設定する。
その時、ラインがrihgtかleftかを設定する。mainの場合はleftで、menuの場合はrightで、
ラインの3pxも幅にプラスされるので、menuとmainの幅数字も設定変更する */


/* ★★bodyのデザイン★★背景を含むページ全体の設定 */
body {
	background-color: #fff7f7;
	background-image : url("../a/bk1.gif");
	background-attachment: fixed;/* 背景画像の位置が固定、スクロール動かない設定 */
	margin: auto;
	}

/* ★★Wrapperのデザイン★★全てのセレクタをまとめるセレクタである */
#wrapper{
	width: 900px;
	color: #666666;
	font-family:メイリオ,Meiryo,"ＭＳ Ｐゴシック", Osaka, sans-serif;
	border: solid 7px #000000;/* 触るな！HP全体の黒縁線の設定 */
	text-decoration: none;/* 触るな！リンク設定時、文字下線を無しに */
	background-color: #ffe8e8;
	margin: auto;
	}

/* ★★headerのデザイン★★ */
#header h1 {
	height: 162px;
	background-color: #ffe8e8;
	text-align: center;
	margin-top: 3px;/* 触るな！margin設定でheader画像を真ん中に */
	margin-bottom: 3px;
	margin-right: 47.5px;
	margin-left: 47.5px;
	}

/* headerの画像にリンクを設定するため */
a.hl1 {
	display: block;
	text-indent: -9999px;
	width: 805px;
	height: 162px;
	background-image : url("../a/hl4.gif");
	background-repeat: no-repeat;
	background-position: center;
	background-color: #ffe8e8;
	text-align: center;
	}

/* ★★上の＜navi＞のデザイン★★ */
#navi {
	width: 900px;
	clear: both;
	text-align: center;
	background-color: #000000;
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
	font-size: 80%;
	}
#navi a {
	color: #ffffff;
	margin: 0px 1em;
	text-decoration: none;
	}
#navi a:hover {
	color: #ff0066;
	}

/* ★★contentsのデザイン★★menuとmainとdamiをまとめるセレクタである */
#contents {
	width: 900px;
	}

/* ★★menuのデザイン★★ */
#menu {
	float: left;
	width: 165px;
	padding-bottom: 20px;
	background-color: #ffe8e8;
	margin: auto;
	}
#menu h2 {
	text-align: center;
	margin-top: 15px;/* 触るな！margin設定でメニューボタンを真ん中に */
	margin-bottom: 5px;
	margin-right: 10px;
	margin-left: 10px;
	font-size: 100%;
	}
#menu ul {
	text-align: left;
	margin: 0px;
	padding-left: 15px;
	list-style-type: none;
	font-size: 70%;
	}
#menu a {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	}
#menu a:hover {
	color: #ff0066;	
	}

/* ★menuのボタン画像（ロールオーバー）の設定★ */
a.blouse {
	display: block;
	text-indent: -9999px;
	width: 145px;
	height: 41px;
	background-image : url("../a/blouse.gif");
	background-repeat: no-repeat;
	background-color: #ffe8e8;
	}
a.blouse:hover {
	background-position: 0 -41px;
	}

a.hat {
	display: block;
	text-indent: -9999px;
	width: 145px;
	height: 41px;
	background-image : url("../a/hat1.gif");
	background-repeat: no-repeat;
	background-color: #ffe8e8;
	}
a.hat:hover {
	background-position: 0 -41px;
	}

a.shirt {
	display: block;
	text-indent: -9999px;
	width: 145px;
	height: 41px;
	background-image : url("../a/shirt.gif");
	background-repeat: no-repeat;
	background-color: #ffe8e8;
	}
a.shirt:hover {
	background-position: 0 -41px;
	}

a.tops {
	display: block;
	text-indent: -9999px;
	width: 145px;
	height: 41px;
	background-image : url("../a/tops.gif");
	background-repeat: no-repeat;
	background-color: #ffe8e8;
	}
a.tops:hover {
	background-position: 0 -41px;
	}

a.bottoms {
	display: block;
	text-indent: -9999px;
	width: 145px;
	height: 41px;
	background-image : url("../a/bottoms.gif");
	background-repeat: no-repeat;
	background-color: #ffe8e8;
	}
a.bottoms:hover {
	background-position: 0 -41px;
	}

a.tshirt {
	display: block;
	text-indent: -9999px;
	width: 145px;
	height: 41px;
	background-image : url("../a/tshirt.gif");
	background-repeat: no-repeat;
	background-color: #ffe8e8;
	}
a.tshirt:hover {
	background-position: 0 -41px;
	}

a.goods {
	display: block;
	text-indent: -9999px;
	width: 145px;
	height: 41px;
	background-image : url("../a/goods.gif");
	background-repeat: no-repeat;
	background-color: #ffe8e8;
	}
a.goods:hover {
	background-position: 0 -41px;
	}

a.easy {
	display: block;
	text-indent: -9999px;
	width: 145px;
	height: 41px;
	background-image : url("../a/easy.gif");
	background-repeat: no-repeat;
	background-color: #ffe8e8;
	}
a.easy:hover {
	background-position: 0 -41px;
	}

a.size {
	display: block;
	text-indent: -9999px;
	width: 145px;
	height: 29px;
	background-image : url("../a/size.gif");
	background-repeat: no-repeat;
	background-color: #ffe8e8;
	}
a.size:hover {
	background-position: 0 -29px;
	}

a.order {
	display: block;
	text-indent: -9999px;
	width: 145px;
	height: 29px;
	background-image : url("../a/order.gif");
	background-repeat: no-repeat;
	background-color: #ffe8e8;
	}
a.order:hover {
	background-position: 0 -29px;
	}

a.contact {
	display: block;
	text-indent: -9999px;
	width: 145px;
	height: 29px;
	background-image : url("../a/contact.gif");
	background-repeat: no-repeat;
	background-color: #ffe8e8;
	}
a.contact:hover {
	background-position: 0 -29px;
	}

/* ★★mainのデザイン★★ */
#main {
	float: right;
	width: 672px;
	padding-top: 20px;/* mainの内枠余白 */
	padding-bottom: 30px;
	padding-right: 30px;
	padding-left: 30px;
	background-color: #ffffff;
	line-height : 150%;/* 行間を空ける余白 */
	font-size: 80%;/* orderのmainの文字大きさは大きめに９０％してある */
	color: #666666;
	border-left: solid 3px #000000;/* 触るな！mainの左端黒ラインの設定★この線幅もHPの総幅に入る */
	}

/* リンク設定をした時の状態 */
#main a {
	text-decoration: underline;
	color: #68b4ff;
	}

/* カーソルを上に乗せた時　ブルー色 */
#main a:hover {
	color: #ff66b3;
	}

/* mainのtableの文字と表の空間設定 */
#main table {
	width: 100%;
	}
#main tr,td {
	text-align: left;
	}

/* ★★damiのデザイン★★サイドメニューとメインの背景色の為のダミーブロック */
#dami {
	clear: both;
	}

/* ★★下の＜navi１＞のデザイン★★ */
#navi1 {
	clear: both;
	width: 900px;
	text-align: center;
	background-color: #000000;
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
	font-size: 80%;
	}
#navi1 a {
	color: #ffffff;
	margin: 0px 2em;
	text-decoration: none;
	}
#navi1 a:hover {
	color: #ff0066;
	}

/* ★★footerのデザイン★★ */
#footer {
	clear: both;
	width: 900px;
	background-color: #ffe8e8;
	font-size: 80%;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	}
#footer a {
	color: #666666;
	}
#footer a:hover {
	color: #ff0066;
	}