body {
  font-family:
    -apple-system,        /* iPhone / Mac（San Francisco） */
    BlinkMacSystemFont,   /* Mac Chrome */
    "Segoe UI",           /* Windows */
    Roboto,               /* Android */
    "Helvetica Neue",
    Arial,
    sans-serif;
}

.spstr{
    display:none;
}

/* @media screen and (max-width: 768px) { */
@media screen and (max-width: 980px) {
  /*ヘッダー部のメニューとタイトル文字を非表示に*/
  #header #hmenu{
    display: none;
  }
  
  #hd1{
    width:100%
  }

  #hd1 h1{
    font-size:0.9rem;
  }

  /* ------------------------------------
     ページ全体の左右余白（基準）
     ------------------------------------ */
  #contents {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px; /* ← 基準となる左右余白 */
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* ------------------------------------
     main（親）
     ------------------------------------ */
  #main {
    width: 100% !important;
    float: none !important;
    padding: 0;
    box-sizing: border-box;
  }

  /* ------------------------------------
     lc / rc（第1階層）
     ------------------------------------ */
  #lc,
  #rc {
    width: 100% !important;
    float: none !important;
    padding: 0 ; /* ← lc と同じ余白 */
    box-sizing: border-box;
    margin: 0 0 20px 0;
  }

  /* ------------------------------------
     lcl / lcr（第2階層：lc の中）
     ------------------------------------ */
  #lcl,
  #lcr {
    width: 100% !important;
    float: none !important;
    padding: 0 ; /* ← lc と同じ余白 */
    box-sizing: border-box;
    margin: 0  0  20px 0;
  }

  /* ------------------------------------
     menubox（lcl の中）
     ------------------------------------ */
  .menubox {
    width: 100% !important;
    padding: 0 ; /* ← lcl と同じ余白 */
    box-sizing: border-box;
    margin: 0 0 20px 0;
  }

  /* ------------------------------------
     menubox（lcl の中）
     ------------------------------------ */
  #ranking {
    width: 100% !important;
    padding: 0 ; /* ← lcl と同じ余白 */
    box-sizing: border-box;
    margin: 20px 0 20px 0;
  }

  #sale   ,
  #sinkan {
    width: 100% !important;
    padding: 0 ; /* ← lcl と同じ余白 */
    box-sizing: border-box;
    margin: 20px 0 20px 0;
  }

  /* ------------------------------------
     商品一覧
     ------------------------------------ */
  .itemlist {
    width: 100% !important;
  }

  .itembox {
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px !important;
  }

  .itembox .photo img {
    display: block;
    margin: 0 auto;
  }

  /* ------------------------------------
     画像全般
     ------------------------------------ */
  img {
    height: auto !important;
  }
}
/* @media screen and (max-width: 768px) { */
@media screen and (max-width: 980px) {

  /* contents の直下の順番を制御 */
  #contents {
    display: flex;
    flex-direction: column;
  }

  /* lc を最上位に（lcr を上に出すため） */
  #lc {
    order: 1;
  }

  /* rc（ランキング）は最後へ */
  #rc {
    order: 6;
  }

  /* lc の中の順番を制御 */
  #lc {
    display: flex;
    flex-direction: column;
  }

  /* lcr を最上位に（新商品が lcr の中にあるため） */
  #lcr {
    order: 1;
  }

  /* lcl はその下へ */
  #lcl {
    order: 2;
  }

  /* lcr の中で (#sale) を最上位に */
  #lcr {
    display: flex;
    flex-direction: column;
  }

  #sale {
    order: 1;
  }

  #sinkan {
    order: 2;
  }

  #pickup {
    order: 3;
  }

  /* lcl の中でカテゴリ → キーワード検索の順に */
  #lcl {
    display: flex;
    flex-direction: column;
  }

  .menubox {
    order: 4;
  }

  .searchbox {
    order: 5;
  }

  /* ランキングは最後 */
  #rannking {
    order: 6;
  }
}
/* @media screen and (max-width: 768px) { */
@media screen and (max-width: 980px) {

  /* テーブル構造を無効化 */
  #sale table,
  #sinkan table,
  #sinkan tbody {
    display: block;
  }

  /* ★ tr を「存在しない扱い」にする */
  #sale tr ,
  #sinkan tr {
    display: contents;
  }

  /* ★ 2列レイアウトの本体 */
  #sale td.sin1,
  #sinkan td.sin1 {
    display: inline-block;
    width: 47%;
    margin: 1%;
    vertical-align: top;
    box-sizing: border-box;
    background: #fff;
    border-radius: 8px;
    padding: 5px;
  }

  /* 画像 */
  #sale td.sin1 img ,
  #sinkan td.sin1 img {
    max-width:250px;
    max-height:350px;
    height: auto;
    /*border-radius: 6px;*/
    display: block;
    margin-bottom: 10px;
  }
  
  .sin1 h3,
  .sin1 h4{
    text-align:center;
  }
}
@media screen and (max-width: 600px) {
  /* 画像 */
  #sale td.sin1 img ,
  #sinkan td.sin1 img {
    max-width:150px;
    max-height:150px;
  }
}




@media screen and (max-width: 980px) {
    .sindata {
        table-layout:auto;
    }
    .sindata .image{
        max-width:130px !important;
        padding:5px;
        height:auto;
        margin:auto;
        white-space: nowrap;     /* 画像が折り返されないようにする */
        vertical-align: top;
        background:#fff;
    }
    .sindata .data{
        width:auto;
        font-size:1.0rem;
    }
    .image img{
        max-width:120px !important;
        height: auto;
        display: block;
        margin: 0 auto;
    }


    /* 商品テーブルを縦並びに */
    table.data2 {
      width: 100%;
      display: block;
    }
  
    table.data2 tr {
      display: block;
      width: 100%;
    }
  
    table.data2 td {
      display: block;
      width: 100%;
      box-sizing: border-box;
    }
    

    #sinkan .menubox2{
      display: block;
      border:none;
    }       

    #sinkan .menubox2 .catelist{
      background:url(../img/book2.gif) no-repeat;
      border-bottom:1px dotted #cccccc;
      padding:0px 0px 3px 13px;
      line-height:1.3em;
      font-size:0.9em;
      text-align:left;
      margin:8px 3px 8px 3px;
    }

    #sinkan .menubox2 .h2rap{
      background:url(../img/menu_back2.jpg) repeat-x;
      background:#F5FAE5;
      background:#E5EFFA;
      border-bottom:1px solid #dddddd;
      margin:1px;
      text-align:left;
    }

    #sinkan .menubox2 h2{
      background:url(../img/new.gif) no-repeat left;
      margin:0 0 0 5px;
      line-height:1.3em;
      padding:7px 5px 5px 15px;
      font-size:1.0em;
      color:#444444;
    }


    .menubox2 .keyword{
      margin:10px;
      text-align:left; 
    }

    .menubox2 .cateslist{
      line-height:1.3em;
      font-size:0.9em;
      border-bottom:1px dotted #cccccc;
      padding-bottom:5px;
    }
    .menubox2 ul {
        list-style-type: disc;
        padding:0;
    }
    .menubox2 li {
        display: block;
    }
    .menubox2 li::before {
      content: "･"; /* または数字など */
    }
    /*
    .incate,
    .inkey {
        display:none;
    }
    */
    .menubox2 {
        display:block;
    }
}

/* @media screen and (max-width: 768px) { */
@media screen and (max-width: 980px) {

  /* lcr 全体をスマホ最適化 */
  #lcr {
    width: 100%;
    overflow: hidden;     /* ← はみ出し防止 */
    box-sizing: border-box;
  }

  /* lcr 内のテーブルが横に広がらないように */
  #lcr table {
    /*width: 100% !important;*/
    table-layout: fixed;  /* ← 列幅を自動調整 */
  }

  /* 画像が大きすぎてはみ出す場合の対策 */
  #lcr img {
    height: auto;
    display: block;
  }

  /* li や .pickup-item が横並びになっている場合の対策 */
  #lcr li,
  #lcr .pickup-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;      /* ← はみ出し防止 */
    width: 100%;
  }
  .cardbrand img{
    display:inline !important;
  }
}

  .bottom-nav {
    display: none;
  }

/* @media screen and (max-width: 768px) { */
@media screen and (max-width: 980px) {

  /* 固定ボトムナビ */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
  }

  .bottom-nav a {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: #333;
    text-decoration: none;
    padding-top: 6px;
  }

  .bottom-nav a img {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto 4px;
  }

  /* 下部ナビの高さ分だけ余白を追加（コンテンツが隠れないように） */
  body {
    padding-bottom: 70px;
  }
}

/* @media screen and (max-width: 768px) { */
@media screen and (max-width: 980px) {
 
  #lcr {
    overflow: visible !important;
  }
  /* カート全体 */
  #cart {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
  }

  /* カートタイトル */
  #cart h2 {
    font-size: 16px;
    margin: 10px 0;
    text-align: center;
  }

  /* 商品テーブルを縦並びに変換 */
  #cart table.sindata,
  #cart table.sindata tbody,
  #cart table.sindata tr,
  #cart table.sindata td,
  #cart table.sindata th {
    display: block;
    width: 100%;
    background: #fff;
    padding:0;
  }

  /* 商品ごとのカード風デザイン */
  #cart table.sindata tr {
    margin-bottom: 15px;
    padding: 0px;
    border-radius: 21px;
    overflow: hidden;
    border:1px solid #ccc;
    box-shadow: 1px 2px 6px rgba(0,0,0,0.1);
  }

  /* 商品画像 */
  #cart td.image img {
    width: 120px;
    height: auto;
    display: block;
    margin: 10px auto 10px;
    border-radius: 6px;
  }

  /* 商品名 */
  #cart td.data h3 {
    font-size: 15px;
    text-align: center;
    margin-bottom: 8px;
    padding:0 5px;
  }

  #cart td.data h4 {
    font-size: 16px;
    text-align: center;
    margin-bottom: 8px;
    padding:10px 5px;
  }

  /* 単価・数量・小計を縦に並べる */
  #cart td.kin,
  #cart td.cen,
  #cart td.kin2 {
    text-align: center;
    font-size: 14px;
    margin-bottom: 6px;
  }

  /* 削除リンク */
  #cart td.cen a {
    display: inline-block;
    padding: 4px 8px;
    background: #f44336;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
  }

  /* 合計金額・注文ボタン */
  #gokei {
    text-align: center;
    font-size: 1.1rem;
    margin: 15px 0;
  }

  .n2 a img {
    width: 180px;
    display: block;
    margin: 0 auto;
  }

  /* 続けて買い物ボタン */
  .n1{
    text-align:center;
  }
  .n1 a img {
    width: 160px;
    display: block;
    margin: 10px auto;
  }
  
  #cart table.sindata tr:first-child {
    display: none !important;
  }

  .menubox  .keyword input[type="text"], 
  .menubox2 .keyword input[type="text"] {
    font-size: 18px !important;
  }
  .sindata .cen input[type="text"] {
    font-size: 16px !important;
  }

  .menubox  .keyword input[type="submit"],
  .menubox2 .keyword input[type="submit"] {
    font-size: 18px !important;
  }
  
  #kessai{
    font-size:16px;
  }
  .spstr{
    display:inline;
  }
  
}


/* @media screen and (max-width: 768px) { */
@media screen and (max-width: 980px) {

  /* テーブル全体をブロック化 */
  #cus,
  #cus tr,
  #cus th,
  #cus td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background:#fff;
    text-align:left;
    border:none;
    overflow: hidden;
  }

  /* 行間の余白 */
  #cus tr {
    margin-bottom: 15px;
    /*border-bottom: 1px solid #ddd;*/
    padding-bottom: 10px;
    overflow: hidden;
  }

  /* 見出し（th）を上に表示 */
  #cus th {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
    border: none;
    padding: 0;
  }

  /* 入力欄を100%幅に */
  #cus td input[type="text"],
  #cus td input[type="number"],
  #cus td input[type="email"],
  #cus td textarea,
  #cus td select {
    width: 100% !important;
    max-width: 100%;
    font-size: 16px; /* iPhoneのズーム防止 */
    padding: 8px;
    box-sizing: border-box;
    overflow: hidden;
    border:1px solid #aaa;
  }

  /* 郵便番号の2つの欄を横並びにしたい場合 */
  #zip1,
  #zip2 {
    width: 48% !important;
    display: inline-block;
  }

  /* 郵便番号ボタン */
  #zipbutton {
    margin-top: 8px;
    width: 100%;
    padding: 10px;
    font-size: 16px;
  }

  /* ラジオボタン・チェックボックスはそのまま */
  #cus td label {
    font-size: 14px;
  }

  /* 「お客様の声」部分の調整 */
  #koe {
    padding: 10px 0;
  }

  #koe h4,
  #koe h5 {
    font-size: 15px;
    margin: 10px 0 5px;
  }

  #koe textarea {
    width: 100% !important;
  }
  /* 郵便番号の行だけ横並びを維持 */
  #cus td #zip1,
  #cus td #zip2 {
    width: 45% !important;
    display: inline-block;
    box-sizing: border-box;
    font-size: 16px; /* iPhoneのズーム防止 */
    height: 40px;          /* ← 高さを固定 */
    line-height: 40px;     /* ← テキスト位置を中央に */
    padding: 0 8px;        /* ← 内側余白 */
    font-size: 16px;       /* ← iPhoneズーム防止 */
    vertical-align: middle;
  }

  /* ハイフンの位置調整 */
  #cus td #zip1 + span,
  #cus td #zip1 + *,
  #cus td #zip1 + * + #zip2 {
    display: inline-block;
    vertical-align: middle;
  }

  /* 郵便番号ボタンは下に配置 */
  #zipbutton {
    margin-top: 8px;
    width: 100%;
    font-size: 16px;
    padding: 10px;
  }

}
/* @media screen and (max-width: 768px) { */
@media screen and (max-width: 980px) {

  .hy1{
      margin:5px 0 0 5px;
      background:#fff;
  }

  /* hy1 の直下の tr のみを縦並びにする */
  table.hy1 > tbody > tr,
  table.hy1 > tr {
    display: block;
    width: 100%;
    padding-bottom: 10px;
    box-sizing: border-box;
    background:#fff;
  }

  /* hy1 の th / td も直下のみ */
  table.hy1 > tbody > tr > th,
  table.hy1 > tr > th,
  table.hy1 > tbody > tr > td,
  table.hy1 > tr > td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background:#fff;
  }

  /* hy2 はテーブルのまま保持 */
  table.hy2 {
    /*width: 100%; 
    display: block; */
    /*overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;*/
    margin-top: 10px;
    
  }
  
  
  /* 見出し */
  table.hy1 > tbody > tr > th,
  table.hy1 > tr > th {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 6px;
    border: none;
    padding: 0;
    background:#fff;
  }

  /* 内容 */
  table.hy1 > tbody > tr > td,
  table.hy1 > tr > td {
    font-size: 15px;
    line-height: 1.6;
    padding: 0;
  }

}

/* 商品詳細 */
/* スマホ向けレイアウト */
@media screen and (max-width: 768px) {
  #product{
    margin:0;
  }

  /* 商品テーブルを縦並びに */
  .product_table {
    width: 100% !important;
    margin:auto;
  }

  .product_table tr {
    display: block;
    width: 100%;
  }

  .product_table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  
  .btitle {
    width: 100%;
    text-align:center;
    padding-bottom:15px;
  }
  .kbtn{
    text-align:center;
  }  

  /* 商品画像を画面幅に合わせる */
  #bookimg {
    width: 85%;
    height: auto;
  }

  /* 商品紹介文の余白調整 */
  #shokai {
    margin-top: 10px;
    font-size: 0.95em;
    line-height: 1.6;
  }

}

@media screen and (max-width: 980px) {
  /* 類似商品グリッド（幅に応じて自動で列数変更） */
  #r {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    padding: 0;
  }

@media screen and (max-width: 980px) {
  #about{
    font-size:1.1rem;
  }
}