/*全体--------------------------------*/

* {
  padding: 0;
  margin: 0;
}

address,em,strong {font-style:normal;font-weight:normal;}
li {list-style:none;}
h1,h2,h3,h4 {font-size:100%;font-weight:normal;}
img {border:0;}

a:link {
  color: #db4ba8;
  text-decoration: underline;
}

a:visited {
  color: #029dff;
  text-decoration: underline;
}

a:hover {
  color: #20a817;
  text-decoration: underline;
}

/* ---------------------------------------- フォントスタイル フォントサイズ */
body {
  font-size: 1.0em;
  text-align: center;
  line-height:1.6em;
  color:#565971;
  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka","Arial","ＭＳ Ｐゴシック",Helvetica,sans-serif,Osaka, "ＭＳ Ｐゴシック", "MS PGothic",'Lucida Grande',Arial,Helvetica,sans-serif, sans-serif'Lucida Grande';
  padding: 0;
  margin: 0;
  background-color:#FFFFFF;
}

/* ---------------------------------------- レイアウトに関する指定 */

#wrapper {
	text-align: left;
	margin:0;
	width: 100%;
	background-color:#fff49f;
	background-image: url(../images/shopping_bg.gif);
	background-position: center;
}

#header {
  padding:0px;
  background:url(../images/shopping_template_h1.jpg) no-repeat;
  background-position: center center;
  height:160px;
}

#header .wrapper_in {
	text-align: left;
	margin:0 auto;
	width: 740px;
	padding: 0 30px;
}

#container{
	width:800px;
	background-color:#FFFFFF;
	margin:0 auto;
}

#container #contents {
  /*padding:2em 29px 4em 30px;*/
  margin:10px;
}

#footer {
  clear: both;
  padding: 0.5em 0 1em;
}

#footer #copyright{font-size:10px;}

.clear{clear:both;}

.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


/* ---------------------------------------- #header内の指定 */

/* -- 見出しレベル1 -- */
h1 {
  font-size: 1.6em;
  font-weight:bold;
  color:#ffffff;
  padding:25px 0px 5px 0px;
  /*margin-bottom: 0.5em;*/
}

/* -- 概要 -- */
#header .description {color:#0219c6;
font-size: 0.8em;
margin-bottom: 0.5em;}

#contents .description {font-size: 1em;
  margin-bottom: 0.5em; }

/* ---------------------------------------- #contents内の指定 */

/* -- 見出し -- */
h2 {
	font-size: 1.2em;
	font-weight:bold;
	color:#ffffff;
	margin-top:1em;
	margin-bottom: 1.5em;
	padding: 7px 0 7px 70px;
	background:url(../images/shopping_template_h2.jpg) no-repeat;
	background-position: center;
}


/* -- 文字 -- */
#contents p {
  line-height: 1.6em;
  margin-bottom: 0.5em;
}

#contents .f_l{float:left;}
#contents .f_r{float:right;}


/* -- 以下 リスト関係 -- */
#contents dl { margin: 1em 0; }

#contents dt {
  margin-bottom: 0.5em;
  font-weight: bold;
  border-bottom: 1px dotted #666666;
}

#contents dd { margin-bottom: 2em; }

/*#contents ul { margin: 1em 0 1em 20px; }
#contents ol { margin: 1em 0 1em 30px; }
#contents li { margin-bottom: 0.5em; }*/


#contents .con{width:96%;
text-align:left;
margin:0 auto;}

/* -- APIを使ってみよう！ -- */
#api .php_area{padding:15px 20px 30px 20px;}

/* -- バナー広告を張ってみよう！ -- */
#contents #banner ul li{float:left;
margin:15px 20px 15px 0px;}

/* -- バナー広告を張ってみよう！ -- */
#contents #banner ul li{float:left;
margin:15px 20px 15px 0px;}


/* -- MyLinkを使ってみよう！ -- */
/*#contents #mylink p{margin:15px;}*/
#contents #mylink p.f_r{
max-width:30em;
min-width:10em;
position: relative;
  /* IE用 */
  width: expression(document.body.clientWidth < 501? "10em" : document.body.clientWidth > 901? "30em" : "auto");
}
#contents #mylink img {
margin:5px 20px 20px 0px;
float:left;
}

/* -- 商品リンクを使ってみよう！ -- */
#contents #product ul li{float:left;
margin:15px 20px 15px 0px;
width:100px;}



/* ---------------------------------------- #footer内の指定 */
#footer{
	text-align: center;
	height:30px;
	background:url(../images/shopping_template_fotter.jpg) no-repeat;
	background-position: center center;
	margin: 0 auto;
	width: 800px;
}

#footer #copyright{
	font-size:0.8em;
	color: #ffffff;
	margin-top: 10px;
}

/* 以下 CSSデザインサンプルクレジット部分 */
#cds{ display: none; }