<!--
 ◆ 曲線などを引くには
 VML(Vector Markup Language)を使う必要がある
 参考サイト：http://www.tohoho-web.com/wwwvml.htm

 ◆フォント色
 color: red; 

 ◆フォントサイズ
 font-size:15px;

 ◆太文字表示
 font-weight:bold;

 ◆背景色
 background-color:#FFFF99;

 ◆幅指定（文字の上・右・下・左の幅を指定）
 ↓(こっちを使うとFireFoxだと利かない)
 margin:5px,10px,15px,20pt;
 ↓(IEとFireFoxでも有効)
 margin-top:1px; 
 margin-bottom:1px;
 margin-right: 1px;
 margin-left: 1px;

 ◆下線を引くには
 text-decoration:underline;

 <u>下線文字</u>

 ◆線を引く(枠を作る)
 太さを変えるときは、pxを1px・・・3pxにする

 border-top: 1px solid gray; 
 border-bottom: 1px solid gray;
 border-right: 1px solid gray;
 border-left: 1px solid gray;

 border:1px solid gray;

 ◆点線をを引くには
 border-bottom:1px dotted gray;
 
 タグなし

 ◆枠と文字の幅
 padding:4px;
 
 ◆取り消し線
 text-decoration:line-through;

 タグ3種類
 <s>取り消し線</s>
 <strike>取り消し線</strike>
 <del>取り消し線</del> 

-->

<!-- フォントの指定 -->
BODY, TH, TD {
 font-family: 'sans-serif';
 }

<!-- リンクの下線を消す -->
A {
}

<!-- リンクの文字色を変更する -->

A.link
{
  text-decoration: none; 
  font-size:8px;
  color:#FFFFFF;
  font-weight:bold;

}

A:hover {
     color: red; 
}

A.NO_UNDER
{
  text-decoration: none; 
}

<!-- **********************************
 ★【リストを横並びさせる方法】
 ここに記述しても有効に機能しないＨＭＬ上にかかないと* 
 @list-style:none;⇒※これはOLまたはULタグ内に記述すると、リストのマークを非表示にする。
 Afloat:left;⇒リストを横並びにする
 Bmargin:10px 5px 10px 5px⇒枠線の外側の余白の指定を0にする。
   margin:top right bottom left ⇒時計回り
 Cpadding:10px 5px 10px 5px⇒枠線の内側の予約の指定をする
   padding:top right bottom left ⇒時計回り

例：
  --------------------------------
 |   -------------------------------
 |<->|
 | B|<-->タイトルサンプル
 |   | C
 |   |
 |   ---------------------------------
  *********************************** -->
OL{
}

OL.waku{
  list-style:none;
  border:1px solid gray;
  font-size:14px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 3px;

  padding-left: 5px;
  padding-right: 5px;
  padding-top: 3px;
  padding-bottom: 3px;

  background-color:F6F6BF;


}

UL{ 
  list-style: none;
  text-align: left;
  margin-left: 0px;

}
UL.yoko{
  padding: 0px 1px 0px 0px;
}


UL.yoko LI {
  list-style:none;
  float:left;
  font-size:17px;
  width:171px;
  border:1px solid gray;
  margin: 0px 0px 0px 0px;
  padding: 5px 5px 0px 5px;
  background-color:F6F6BF;

}

<!-- **********************************
共通のスタイルシート
[重要]以下のフォントはあらゆるタグで、
classに以下のように記述されば使える
例: <div class=red font-20 inline-center
  *********************************** -->

<!-- [注意 bold]font-sizeの下で定義しないと bolo表示されない -->

<!-- コメント直下のスタイルが使えないのでdummyをおいてある -->
.dummy {
}

.bold {
  font-weight:bold;
}

.red {
  color: #FF0000;
}

.blue {
  color:blue;
}

.white {
  color:#FFFFFF;
}

.dilute-gray {
  color:#444444;
}

.font-10
{
  font-size:12px;
}

.font-12
{
  font-size:12px;
}
.font-14 {
  font-size: 14px;
}
.font-15 {
  font-size: 15px;
}

.font-20 {
  font-size: 20px;
}

.inline-center {
  text-align: center;
}

.inline-left{
  text-align: left;
}

.inline-right{
  text-align: right;
}

.bgcolor1
{
   background-color:F6F6BF;
}

.bgcolor-yellow
{
  background-color:FFFF99;
}
.font-mincho
{
    font-family:'ＭＳ 明朝';
}

.waku-gray
{
    border:1px solid gray;
}

.margin-2
{
  margin: 2px 0px 0px 0px;
}

.padding-2
{
  padding: 2px 0px 0px 0px;
}


 /* ↓商品紹介部分のスタイル↓ */
      
#contents-box {
  border-bottom: 1px dotted #FFCC33;
  padding-top:5px;
  margin-bottom: 20px;
}

#catch3 {
  font-size: 15px;
  line-height:1.5em;
  margin-top: 20px;
}

.price-box {
  width:100%;
  line-height:1.5em;
  margin:10px 0;
}

#catch7 {
  font-size: 20px;
  line-height:1.5em;
  margin: 40px 50px;
}

#bottom-name {
  margin:0;
  line-height:1.5em;
}

.line-title {
  background-color: #FEFF74;
  padding: 5px;
  margin: 50px 50px 0;
}

.item-explain {
  margin: 20px 50px;
}
        
#item-cart {
  width: 520px;
  padding: 5px 20px 0;
  margin: 30px auto;
  background-color: #FCFAAE;
}

#item-cart img {
  margin:5px;
}

 /* ↓商品スペックのスタイル↓ */

#item-detail {
  border: 1px solid #F0E68C;
  width: 680px;
  margin: 10px auto;
}

#item-detail-in {
  padding: 5px 10px;
}

.spec {
  padding:0 10px;
}

