/* =========================================

   Lennon Coffee

   珈琲豆ページ・スマホ用CSS

   ========================================= */

/* 全体 */

* {

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    margin: 0;

    padding: 10px;

    background: #f7f2e8;

    color: #4a3525;

    font-family:

        "Hiragino Kaku Gothic ProN",

        "Yu Gothic",

        Meiryo,

        sans-serif;

    font-size: 14px;

    line-height: 1.5;

}

/* -----------------------------------------

   ページ全体

   ----------------------------------------- */

center {

    width: 100%;

    max-width: 600px;

    margin: 0 auto;

}

/* -----------------------------------------

   看板・メイン画像

   ----------------------------------------- */

table:first-of-type {

    width: 90%;

    margin: 0 auto 10px;

    border: 0;

}

table:first-of-type td {

    text-align: center;

}

table:first-of-type img {

    display: block;

    width: 100%;

    max-width: 500px;

    height: auto;

    margin: 0 auto;

}

/* -----------------------------------------

   メニューボタン

   ----------------------------------------- */

a.menu {

    text-decoration: none;

}

a.menu img {

    display: block;

    width: 100%;

    max-width: 150px;

    height: auto;

    margin: 0 auto;

}

/* メニューのテーブル */




table:nth-of-type(2) td {

    width: 50%;

    padding: 3px;

    border: 0;

}

/* -----------------------------------------

   見出し

   ----------------------------------------- */

body > center {

    color: #4a3525;

}

/* 「定番ブレンド」など */

center > br + * {

    color: #4a3525;

}

/* -----------------------------------------

   商品テーブル

   ----------------------------------------- */
.product-table {
width: 100%;
max-width: 750px;
margin: 0 auto 24px;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid #b2a882;
background: #f7f2e8;
}

.product-table td {
width: 33.333%;
padding: 7px 4px;
text-align: center;
vertical-align: top;
border: 1px solid #b2a882;
overflow-wrap: break-word;
}

/* 商品画像 */
.product-table td img {
display: block;
width: 100%;
max-width: 180px;
height: auto;
margin: 0 auto 8px;
}

/* 商品名 */
.product-table b {
color: #4a3525;
font-weight: bold;
}

/* 価格 /
.product-table span {
font-weight: bold;
}

/* 商品説明 */
.product-table span {
line-height: 1.5;
}

/* 商品購入フォーム */
.product-table form {
margin: 10px 0 0;
padding: 0;
}

/* カートボタン */
.product-table input[type="submit"] {
max-width: 100%;
padding: 5px 3px;
font-size: 10px;
white-space: normal;
}

/* スマホ表示 */
@media screen and (max-width: 600px) {

.product-table {

    width: 100%;

    max-width: 750px;

    table-layout: fixed;

}



.product-table td {

    width: 33.333%;

    padding: 6px 3px;

}



.product-table td img {

    width: 100%;

    max-width: 180px;

    height: auto;

}



.product-table select {

    width: auto;

    max-width: 100%;

    font-size: 11px;

}



.product-table input[type="submit"] {

    max-width: 100%;

    padding: 5px 2px;

    font-size: 10px !important;

}

}


/* -----------------------------------------

   セレクトボックス

   ----------------------------------------- */

select {

    max-width: 100%;

    padding: 3px;

    border: 1px solid #b2a882;

    border-radius: 3px;

    background: #ffffff;

    color: #4a3525;

    font-size: 12px;

}




/* -----------------------------------------

   フォーム

   ----------------------------------------- */

form {

    margin: 4px 0 0;

}

/* -----------------------------------------

   Copyright

   ----------------------------------------- */

table:last-of-type {

    width: 100%;

    margin-top: 20px;

    border: 0;

}

table:last-of-type td {

    padding: 10px 5px;

    border: 0;

    color: #4a3525;

    font-size: 12px;

}

/* -----------------------------------------

   スマホの小さい画面用

   ----------------------------------------- */

@media screen and (max-width: 380px) {

    body {

        padding: 6px;

        font-size: 13px;

    }

    a.menu img {

        max-width: 145px;

    }





    input[type="submit"] {

        padding: 6px 8px;

        font-size: 10px !important;

    }

    select {

        font-size: 11px;

    }

}


/* 商品テーブルの枠線を統一 */

table.product-table {
width: 100% !important;
max-width: 750px;
margin: 0 auto 24px;
table-layout: fixed;
border-collapse: collapse !important;
border: 1px solid #b2a882 !important;
}

/* 商品テーブルのすべてのセル */
table.product-table tr,
table.product-table td {
border: 1px solid #b2a882 !important;
}

/* セルの表示 */
table.product-table td {
padding: 7px 4px;
text-align: center;
vertical-align: top;
}

/* スマホ用 */
@media screen and (max-width: 600px) {
table.product-table {
width: 100% !important;
}

table.product-table td {

    padding: 6px 3px;

}

}
/* =================================
商品テーブルの枠線を完全統一
================================= */

table.product-table {
display: table !important;
width: 100% !important;
max-width: 750px !important;
margin: 0 auto 24px !important;
table-layout: fixed !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
border: 1px solid #b2a882 !important;
background: #f7f2e8 !important;
}

/* 商品テーブルの行 */
table.product-table tr {
border: 1px solid #b2a882 !important;
}

/* 商品テーブルのすべてのセル */
table.product-table td {
width: 33.333% !important;
padding: 7px 4px !important;
text-align: center !important;
vertical-align: top !important;
border: 1px solid #b2a882 !important;
background: #f7f2e8 !important;
}

/* 商品画像 */
table.product-table td img {
display: block;
width: 100% !important;
max-width: 180px !important;
height: auto !important;
margin: 0 auto 8px !important;
}

/* 商品テーブル間の余白 */
table.product-table + br {
display: none;
}

/* スマホ */
@media screen and (max-width: 600px) {
table.product-table {
width: 100% !important;
max-width: 750px !important;
}

table.product-table td {

    width: 33.333% !important;

    padding: 6px 3px !important;

}



table.product-table td img {

    width: 100% !important;

    max-width: 180px !important;

}

}

/* 商品テーブルの枠線を統一 */
table.product-table {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 24px;
  table-layout: fixed;
  border: 1px solid #b2a882 !important;
  border-collapse: collapse;
  border-spacing: 0;
  background: #fffdf8;
}

table.product-table td {
  width: 33.333%;
  padding: 6px 3px;
  text-align: center;
  vertical-align: top;
  border: 1px solid #b2a882 !important;
}

table.product-table td img {
  display: block;
  width: 100%;
  max-width: 107px;
  height: auto;
  margin: 0 auto 6px;
}



/* 動作確認用下部メニューが操作を妨げないようにする */


.bottom-menu{
pointer-events:none;
}

.bottom-menu a{
pointer-events:auto;
}