/* -------------------- */
   /* ▼メニューバーの装飾 */
   /* -------------------- */

   /*  border: 1px solid red; /* 項目左側の枠線(灰色で1pxの実線) */

@charset "utf-8";

body {
  margin: 0;
  font-family: "Futura", Helvetica, sans-serif;

}

   /* パスワードをお忘れですか？ */
.text_note{
    font-size: 12px;
    text-align: left;
    color: #555555;
}

.item{
    width 260px;
    font-size: 16px;
    margin-left: 35px;
    margin-right: 35px;
}

.icon_cart {
    display: inline-block;
    width: 24px;
    height: 19px;
    background: url(./images/icon_cart.png) no-repeat;
}

.icon_search {
    display: inline-block;
    width: 31px;
    height: 41px;
    background: url(./images/icon_search.png) no-repeat;
}

.icon_key {
    display: inline-block;
    width: 21px;
    height: 24px;
    background: url(./images/icon_key.jpg) no-repeat;
}

.icon_normal {
    display: inline-block;
    width: 21px;
    height: 24px;
    background: url(./images/icon_normal.jpg) no-repeat;
}
.icon_blog {
    display: inline-block;
    width: 54px;
    height: 25px;
    background: url(./images/icon_blog.png) no-repeat;
}

.icon_butterfly {
    display: inline-block;
    width: 27px;
    height: 25px;
    background: url(./images/icon_butterfly.png) no-repeat;
}

.icon_twitter {
    display: inline-block;
    width: 27px;
    height: 25px;
    background: url(./images/icon_twitter.png) no-repeat;
}

.icon_youtube {
    display: inline-block;
    width: 23px;
    height: 19px;
    background: url(./images/icon_youtube.png) no-repeat;
}

.icon_instagram {
    display: inline-block;
    width: 24px;
    height: 23px;
    background: url(./images/icon_instagram.png) no-repeat;
}

.icon_facebook {
    display: inline-block;
    width: 25px;
    height: 26px;
    background: url(./images/icon_facebook.png) no-repeat;
}

.alert{
   font-size: 14px;
   color: red;

    display: inline-block;
    width: 51px;
    height: 181px;
    background: url(./images/icon_alert.jpg) no-repeat;
}

.sold_out{
  color: red;
  font-weight:bold;
}
.low_stock{
  color: orange;
  font-weight:bold;
}
.in_stock{
  color: royalblue;
  font-weight:bold;
}
   /* フロート解除 */
.clearfix { clear : both ; }

/* ヘッダー 下 文字リンク ログイン 事前登録会 */
.label{
  font-size: 16px;
  text-align: left;
  margin-left: 5px;
  margin-top: 5px;
/*  width:185px; */
  width:135px;
  position: relative;    /* 要素の位置を相対的に左へ-32px 移動 */
/*  left: -32px; */
  padding: 2px;
}

   /* ボタン */
input[type="submit"], input[type="button"], input[type="reset"]{
  background: #ff8b00;
  border: 1px #555555;
  color: white;
  font-size:16px;
  font-weight:bold;
  padding: 6px 30px; /* 内側の余白 上下 6px, 左右 30px */
  margin:  10px;      /* 外側の余白 */
  cursor:pointer;
}

input[type="submit"]:hover, input[type="button"]:hover{
  background-color:#ff9f2e;
  border-color:#555555;
}

   /* ログイン、お勧め商品、カテゴリ検索のボタン */
.hp-itemBox input[type="submit"], input[type="button"]{
   position: relative;    /* 要素の位置を相対的に左へ-32px 移動 */
  
/* left: -32px; 2025/03/13 修正  */
   left: 0px;
}
   /* 入力フィールド */
input[type="text"],[type="password"],input[type="email"], select{
  font-size: 14px;
  width: 180px;
  border: solid 1px #aaa;
  border-radius:5px;
  padding: 5px 5px;      /* 内側の余白 */
  position: relative;    /* 要素の位置を相対的に左へ-32px 移動 */
  left: -32px;
  /* 2025/03/13 修正  */
  left: 0px;
}
  /* 2025/03/16 ４行追記  */
 textarea{
  width: 100%;
  height: 210px;
}

input:focus, select:focus, textarea:focus,file:focus{
  background: #FFFF99;
}

#mainWrapper{
   width: auto;             /* 横幅 */
}

#hp-container{
    width: 1002px;
}

   /* A gift of the best quality for top lovers */
#hp-title{
    width: 1000px;
    font-weight: none;
    font-size: 12px;
    color: #555555;
    text-align:  left;        /* 文字左せ */
    margin: 15px;
}

   /* ForTopLovers */
#headerLogo{
    width: 1000px;
    height: 120px;
    font-weight: bold;
    font-size: 42px;
    line-height: 120px;
    text-align:  left;        /* 文字左せ */
   /* border: solid 1px blue; */   /* 枠線指定 */
}

#headerLogo a{


}

#cartInfo{
    width: 280px;
    height: 120px;
    float: right;
}

#navi-Menu{
    width: 1000px;
}

.bannerImage {
    text-align:  center;    /* 文字中央寄せ */
    padding:  150px;        /* 余白指定 */
    border: none;      /* 枠線指定 */
    background-image: url(./images/main_img-1000x400.jpg);    /* 背景画像指定 */
    background-repeat : no-repeat;
    background-position: center center;  /* 背景画像の表示位置 */
}

   /* 検索ボックス */
.kyc-search-bar{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 250px;
    border-radius: 8px;
    border-radius: 0px;
    margin: 5px;
    border: solid 1px #dcdcdc;
}
    
.kyc-search-box{
    font-size: 12px;
    width: 100%;
    border: none;
    outline: none;
}

i.kyc-search-mark{
    margin-left: 10px;
    margin-right: 5px;
    color: #9aa0a6;
}

i.kyc-search-mic{
    margin-right: 10px;
    cursor: pointer;
    color: #9aa0a6;
}

@media only screen and (max-width:480px){
    .kyc-search-bar{
        width: 90%;
    }
}

   /* [ログイン][事前登録会]リンク */
#lnk-member{
   font-size: 12px;
   line-height: 20px;
   height: 20px;
   margin-bottom: 5px;     /* リンク項目外側の余白(下に 5px）*/
   padding-left:35px;      /* リンク項目内側の余白(左に35px) */
   width: 260px;           /* リンク項目全体の横幅(260px) */
}

ul.memberlnk li{

   width: 55px;           /* リンク項目の横幅(55px) */
   display: inline-block; /* ★横並びに配置する */
   list-style-type: none; /* ★リストの先頭記号を消す */
   position: relative;    /* ★サブメニュー表示の基準位置にする */
   padding-left:5px;      /* リンク項目内側の余白(左に5px) */
   border-left: 1px solid #888888; /* 項目左側の枠線(灰色で1pxの実線) */
}

ul.memberlnk a {
   color: #555555;
   text-align: left;        /* メインメニューの文字列の配置(中央寄せ) */
   font-size: 11px;
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-weight: none;         /* 太字に：しない: none, する: bold; */
}

   /* サブページのメイン記述ブロック（=商品一覧リスト）の表示 */
#mainBlock{
  margin-top: 5px;
  width: 1000px;
  height: 250px;
/*  border: solid 1px blue; */   /* 枠線指定 */
}

   /* メインページの商品一覧リストの表示 */
#itemList{
  margin-top: 5px;
/* width: auto;
  height: 250px; */

  width: 1000px;
  height: auto;

 /* border: solid 1px blue;     枠線指定 */
}

   /* 機能エリアの表示 */
#colmnsArea{
  width: 1000px;
  height: 255px;
}

   /* --- colmnsArea内 hp-itemBox --- */
 .title_key{
    width 260px;
    margin-top: 5px;
    margin-right: 35px;
    padding-left: 21px;  /* アイコンの幅と同じ */
    line-height: 24px;   /* アイコンの高さと同じ */
    text-align:  left;   /* 文字左寄せ */
    font-weight: bold;
    font-size: 14px;
    color: rgb(31, 40, 55);
    border-bottom: solid 3px rgb(238, 238, 238);
    padding: 5px;
 }

 .title_normal{
    width 260px;
    margin-top: 5px;
    margin-right: 35px;
    padding-left: 21px;  /* アイコンの幅と同じ */
    line-height: 24px;   /* アイコンの高さと同じ */
    text-align:  left;   /* 文字左寄せ */
    font-weight: bold;
    font-size: 14px;
    color: rgb(31, 40, 55);
    border-bottom: solid 3px rgb(238, 238, 238);
    padding: 5px;
 }

   /* ログイン／お勧め商品／カテゴリ検索の各ボックスエリア */
.hp-itemBox{
    font-size: 12px;
    width: 330px;
    height: 250px;
    float: left;
    border: none;
 /*  border: 1px solid #888888;  項目左側の枠線(灰色で1pxの実線) */
}

   /* 商品リスト画面に表示される商品情報（商品画像・価格・商品名） */
.cart-itemBox{
    font-size: 12px;
    width:  180px;
    height: 215px;
    margin: 5px 8px; /* 上下: 2px, 左右:8px */
    float: left;
    border: none;
  /*   border: 3px solid #888888; 項目左側の枠線(灰色で1pxの実線) */
}

   /* 商品リスト画面に表示される商品画像 */
.cart-itemImage{
    width:  178px;
    height: 180px;
    margin: 0px 1px; /* 上下: 0px, 左右:1px */
    border: none;
  /*   border: 1px solid orange; 項目左側の枠線(灰色で1pxの実線) */
}

   /* 商品リスト画面に表示される商品情報 */
.cart-itemPrice{
    width:  178px;
    height: 15px;
    font-size: 15px;
    text-align: right;
    font-weight:bold;
    color: rgb(35, 41, 37);
    margin: 0px 0px; /* 上下: 0px, 左右:0px */
    border: none;

  /*   border: 1px solid blue; 項目左側の枠線(灰色で1pxの実線) */
}
.cart-itemName{
    width:  178px;
    height: 15px;
    font-size: 15px;
    text-align: left;
    color: rgb(128, 128, 128);
    font-size: 12px;
    text-align: left;
    color: rgb(128, 128, 128);
    margin: 0px 0px; /* 上下: 0px, 左右:0px */
    padding-top: 2px;
    border: none;

  /*   border: 1px solid red; 項目左側の枠線(灰色で1pxの実線) */
}

               /**************************************************
               *           商品詳細説明のサブ・ページ            *
               ***************************************************/

   /* 商品詳細説明ページの全体エリア */
#productBlock {
   margin-top: 5px;
   width: 1000px;
 /*  height: 750px; */
   border: none;
}

   /* 商品詳細説明の写真 */
.productImage {
    width: 400px;
    text-align:  center; /* 文字中央寄せ */
    padding:  10px;      /* 余白指定 */
    margin: 10px 5px;    /* 上下: 10px, 左右:5px */
    border: none;        /* 枠線指定 */
    float: left;
}

   /* 商品詳細説明のProduct-Code 入力エリア*/
#productCD{
    color: black;
    width: 510px;
    height: 120px;
    margin: 20px 0px;
    text-align:  center; /* 文字中央寄せ */
}
   /* Product-Code 入力ボックス*/
#productCD input[type="text"] {
    font-size: 14px;
    width: 60px;
    border: solid 1px #aaa;
    border-radius:5px;
    padding: 5px 5px;      /* 内側の余白 */
}

.button-area {
    width: 510px;
    height: 50px;
    text-align:  center; /* 文字中央寄せ */

/*  border: 1px solid gray;   項目左側の枠線(灰色で1pxの実線) */

}
   /* ボタンの色*/
#productCD  input[type="submit"], input[type="button"]{
    background: seagreen;
}
#productCD input[type="submit"]:hover, input[type="button"]:hover{
    background-color:rgb(35, 209,174);
    border-color:#999999;
}

   /* --- 非有効化 --- */
input[type="button"].btn-unenabled, input[type="button"]:hover.btn-unenabled{
  background-color:#999999;
  cursor:none;
}

.productDescription input[type="text"] {
    font-size: 14px;
    width: 60px;
    border: solid 1px #aaa;
    border-radius:5px;
    padding: 5px 5px;      /* 内側の余白 */
  position: relative;    /* 要素の位置を相対的に左へ20px 移動 */
  left: 20px;

}

.productDescription  input[type="submit"], input[type="button"]{
    background: seagreen;
}
.productDescription input[type="submit"]:hover, input[type="button"]:hover{
    background-color:rgb(35, 209,174);
    border-color:#999999;
}

.button-area  input[type="submit"], input[type="button"], input[type="reset"]{
    background: seagreen;
}
.button-area input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover{
    background-color:rgb(35, 209,174);
    border-color:#999999;
}


   /* 商品詳細説明の文 */
.productDescription {
    float: right;
    width: 530px;
    line-height: 28px;
    text-align:  left;    /* 文字左寄せ */
    padding:  10px;       /* 余白指定 */
    margin: 10px 5px;     /* 上下: 10px, 左右:5px */
    border: none;         /* 枠線指定 */
}

.field{
/*  overflow: hidden;*/
  margin-bottom: 0px;
}

/*warnings, errors, messages*/
.messageStackInfo, .messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
        width: 100%;
	line-height: 1.8em;
	padding: 0.2em;
	border: 1px solid #000000;
}

.messageStackInfo {
	background-color: rgb(239, 239, 255);
	color: rgb(0, 0, 156);
	border: 1px solid blue;
}
.messageStackWarning, .messageStackError {
	background-color: #ffffff;
	color: #ff0000;
	border: 1px solid #ff0000;
}
.messageStackSuccess {
  	background-color: #CCFFCC;
	color: #333333;
}
.messageStackCaution {
  	background-color: #FFFF99;
  	color: #333333;
}
.messageStackError {
  	background-color: #FFEFEF;
  	color: #333333;
}

table.cart{
  border-collapse:collapse;
  font-size: 100%;
}

table.cart col.fields {
  width: 170px;
  background: #F5F5F5;
  border:1px solid #BBB5C3;
}
table.cart col.value {
  width: 330px;
  background: #FFFFFF;
  border:1px solid #BBB5C3;
}

table.cart th{
  border:1px solid #BBB5C3;
}

table.cart td{
  padding: 8px 12px;
  border:1px solid #BBB5C3;
  background:#FFFFFF;
}

/* --- マウスオーバー時 --- */
table.cart body tr:hover {
background-color: #ccffcc; /* 行の背景色 */
}


.sold_out, .low_stock, .in_stock{
  <!-- font-family: 'Times New Roman'; -->
  <!-- font-style: italic; -->
  font-weight: bold ;
  font-size: 100%;
  float: center;
  padding: 0px;
  margin:0px;
}
               /**************************************************
               *          注文時の送付先住所の入力フォーム       *
               ***************************************************/
   /* 入力フォーム・ページの全体エリア */
#formBlock {
   margin-top: 5px;
   padding-top: 15px;
   width: 1000px;
   border: none;
}

   /* 入力フォーム */
#formBlock form{
   width:680px;
   margin: auto;
}

#formBlock item{
  overflow: hidden;
  margin-bottom: 20px;
}

/* *** sample-form3 新規作成 2024/09/14 *** */
/* 入力フォーム確認用 */
#formBlock lbltext{
  float: left;
  width: 280px;       /* form width:460px の設定時; */
  height: 24px;      /* multitext を設定時は削除; */
  font-size: 16px;   /* + padding 上下値 = height(24px) */
  text-align: left;
  background: rgb(248, 248, 248);
  padding:5px 14px;  /* 上下5px, 左右14px  */
  margin: 5px 15px;
  margin-right: 60px;

  margin-bottom: 10px;

  /*   border: 1px solid blue; 項目左側の枠線(青色で1pxの実線) */

}

#formBlock inputs{
  float: left;
 /* width:320px; */     /* form width:680px の設定時; */
/*  height: 28px; */

}

#formBlock label{
  text-align: left;
  float: left;
  width:185px; 
  height: 24px;      /* multitext を設定時は削除; */
  font-size: 16px;   /* + padding 上下値 = height(24px) */
  font-weight:bold;
  color: #333333;
  padding:4px 14px;  /* 上下4px, 左右14px  */
  padding-left: 10px;
  border-left: solid 3px seagreen;
  background: #E8F4E2;
  margin-left: 10px;
}

/*  ----- 2024/09/18 １行修正 ------ */
/*  #formBlock form .input[type="text"] ,input[type="password"] .input[type="email"] { */
    #formBlock form .inputs {
       width:245px;
       height: 23px;      /* multitext を設定時は削除; */
       border: solid 1px #aaa;
       border-radius:5px;
       padding:3px;
       font-size: 14px;
       padding-right:20px;
       margin-right: 50px;
       margin-top: 5px;
}

               /**************************************************
               *   メッセージサービス ログイン画面（サービス用） *
               ***************************************************/
   /* ログイン画面（サービス用） */
#loginBlock{
   margin-top: 5px;
   width: 1000px;
   height: 750px;
   border: none;
}
   /* ログイン画面（ロゴ画像 + ログイン情報） */
.loginArea{
   width:770px;
   height: 470px;
}

   /* ログイン画面（左ロゴ画像） */
.loginImage{
   float: left;
   width:300px;
   height: 350px;
   padding:  10px;      /* 余白指定 */
   margin: 10px 5px;    /* 上下: 10px, 左右:5px */
   margin-left: 15px;
   border: 1px solid rgb(236, 236, 236);        /* 枠線指定 */
   background: url(./images/img_service_top_lovers.jpg) no-repeat;
}
   /* ログイン画面（ユーザーID、パスワード入力） */
.loginInfo {
   float: right;
   width: 400px;
   height: 320px;
   line-height: 28px;
   text-align:  center; /* 文字左寄せ */
   padding-top:  50px;      /* 余白指定 */

   margin: 10px 5px;    /* 上下: 10px, 左右:5px */
   margin-right: 15px;
   border: 1px solid rgb(236, 236, 236);        /* 枠線指定 */
   background-color:rgb(251, 251, 251);
}

               /**************************************************
               *            コンテンツ・ページ                   *
               ***************************************************/
   /* コンテンツ・ページ全体 */
#contentsBlock{
   margin-top: 5px;
   width: 1000px;
 /*   height: 750px;*/
   border: none;
}
   /* コンテンツ画像 + 文章 */
.contentsArea{
   width:805px;
 /*  height: 480px;*/

/*  border: 1px solid blue;  項目左側の枠線(青色で1pxの実線) */

}
   /* コンテンツ内チェックボックス */
.chkBox{
   float: left;
   width:10px;
   padding-top: 200px;
}

   /* コンテンツ画像 */
.contentsImage{
   float: left;
   width:300px; 
/* height: 350px;  2025/03/16 修正 */
   height: 420px;

   padding:  10px;      /* 余白指定 */
   margin: 10px 5px;    /* 上下: 10px, 左右:5px */
   margin-left: 15px;
   border: 1px solid rgb(236, 236, 236);        /* 枠線指定 */
  /*   background: url(./images/img_service_top_lovers.jpg) no-repeat; */
}
   /* ZOOMページでのコンテンツ画像 ******* 2025/04/27 追記 ******* */
.contentsImageZoom{
   float: left;
   width:780px;
   height: auto;
   padding:  10px;      /* 余白指定 */
   margin: 10px 5px;    /* 上下: 10px, 左右:5px */
   margin-left: 15px;
  /*   border: 1px solid orange;  */    /* 枠線指定 */
  /*   background: url(./images/img_service_top_lovers.jpg) no-repeat; */
}
   /* コンテンツ画像 ZOOMページへリンク文字 ******* 2025/04/27 追記 ******* */
.linkText{
   width: 230px;
   height: auto;
   padding-top: 6px;      /* 余白指定 */

   font-size: 14px;
}
   /* コンテンツ Contact Form  ******* 2025/04/27 追記 ******* */
.contactFormArea{
   width:780px;
   height: auto;
 /*  height: 480px;*/

   border: 1px solid blue;  /*   /* 項目左側の枠線(青色で1pxの実線) */

}

   /* コンテンツ 文章内容 */
.contentsInfo {
   float: right;
   width: 420px;
   height: 320px;
   line-height: 28px;
   text-align:  left; /* 文字左寄せ */
   padding-top:  10px;      /* 余白指定 */
   padding-left: 10px;      /* 余白指定 */

   margin: 10px 5px;    /* 上下: 10px, 左右:5px */
   margin-right: 15px;
   border: 1px solid rgb(236, 236, 236);        /* 枠線指定 */
   background-color:rgb(251, 251, 251);
}

   /* コンテンツ 文章（ヘッダー・下線付き（緑）） */
 .title {
   margin: 10px;
   padding:2px 15px;
   font-weight: bold;
   font-size: 18px;
   border-bottom: solid 2px green;
   border-left: solid 5px green;
 }

   /* コンテンツ 文章（【投稿日時】、【投稿者】、【カテゴリ】） */
 .title_info {
   margin: 10px;
   padding:2px 2px;
   font-size: 16px;
   color: #555555;
   border: 1px solid rgb(236, 236, 236);        /* 枠線指定 */

 }


   /* コンテンツ 文章（ヘッダー） */
 .sub_title_noline {
   margin: 10px;
   padding:2px 15px;
   font-weight: bold;
   font-size: 18px;
 }

   /* コンテンツ２（事前登録会について） 文章内容 */
.documentsInfo {
   float: right;
   width: 860px;
   height: auto;
   line-height: 28px;
   text-align:  left; /* 文字左寄せ */
   padding-top:  10px;      /* 余白指定 */
   padding-left: 10px;      /* 余白指定 */

   margin: 10px 5px;    /* 上下: 10px, 左右:5px */
   margin-right: 15px;
   border: 1px solid rgb(236, 236, 236);        /* 枠線指定 */
   background-color:rgb(251, 251, 251);
}
   /* コメント投稿欄 */
.comentsArea{
   width:800px;
   height:280px;
   height:auto;
   padding-top:  10px;      /* 余白指定 */
   border: 2px solid #7F7F7F;  項目左側の枠線(灰色で2pxの実線) 
}
.prevnextArea{
   width:780px;
   height:20px;
}