@charset "UTF-8";

/* 色
#72b31c	強調色
#E4DBC5	グレー
*/

/*================================================
 *  CSSリセット
 ================================================*/
* { margin:0; padding:0; border:0; outline:0; font-size:14px; line-height:1.6; vertical-align:baseline; background:transparent; font-weight:normal; }
article, section, div, footer, header, nav, ul, dl, dt, dd { display:block; overflow:hidden; }
ul { list-style:none; }
a { margin:0; padding:0; vertical-align:baseline; background:transparent; text-decoration:none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); }
a:hover, a:focus { text-decoration:none; outline:none; }
a:hover { opacity:0.7; }
a:link, a:visited { text-decoration:none; }
table { border-collapse:collapse; border-spacing:0; table-layout:fixed; }
hr { display:block; height:1px; border:0; border-top:1px solid #E4DBC5; margin:1em 0; padding:0; }
input, textarea { -webkit-appearance:none; border-radius:0; }

/*================================================
 *  タグ設定
 ================================================*/
* { font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; }
html { background-color:#E4DBC5; }
body { -webkit-text-size-adjust:100%; color:black; }
h1 { font-size:28px; }
h2 { font-size:24px; background-color:#E4DBC5; text-align:center; margin-bottom:1em; padding:5px 0; font-weight:bold; }
h3 { font-size:20px; margin-bottom:1em; }
h4 { font-size:16px; margin-bottom:1em; }
article { background-color:white; }
a { color:black; }
p { margin-bottom:5px; }
ol { margin-left:25px; padding-left:10px; }
input, textarea { border:1px solid gray; padding-left:5px; padding-right:5px; }
table { border:1px solid #e4dbc5; margin-bottom:10px; }
th, td { padding:7px 10px; }
th { background-color:#e4dbc5; border-bottom:1px solid white; font-weight:normal; vertical-align:middle; }
tr:last-child th { border-bottom:1px solid #e4dbc5; }
td { border-width:1px 1px 1px 0; border-style:solid; border-color:#e4dbc5; }
th:not(:last-child) { border-right:1px solid white; }

/*================================================
 *  クラス設定
 ================================================*/
.center { text-align:center; margin:0 auto; }
.right { text-align:right; }
.empha { font-weight:bold; color:#72b31c; }
.error { color:red; font-weight:bold; text-align:center; margin-top:10px; margin-bottom:10px; }
.inner { width:960px; margin-left:auto; margin-right:auto; }
.mincho, .mincho * { font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
input[type="submit"], .button { display:block; border:0; background-color:#72b31c; color:white; text-align:center; }
.buttons { display:flex; justify-content:center; margin-top:40px; }
.buttons .button, .buttons input[type="submit"] { width:200px; height:40px; line-height:40px; cursor:pointer;}
.buttons .button+* { margin-left:20px; }
.list_head { text-align:center; margin-top:20px; margin-bottom:20px; }
.nobr { white-space:nowrap; display:inline-block; }
.loading { position:fixed; z-index:9999; top:0; left:0; width:100%; height:100%; background:transparent; display:none; justify-content:center; align-items:center; }

/*================================================
 *  ヘッダ
 ================================================*/
header { padding-top:20px; background:#E4DBC5; }
header .inner { padding-bottom:20px; display:flex; justify-content:space-between; flex-wrap:wrap; }
header .inner a.header_logo span { font-weight:bold; }
/* header .inner a.header_logo span.header_small { font-size:20px; } */
header .inner a.header_logo span.header_large { font-size:30px; }
header div.header_right { display:flex; justify-content:space-between; align-items:center; }
header div.header_right span.header_name { margin-right:20px; }
header div.header_right a { display:block; width:120px; height:40px; line-height:40px; text-align:center; background-color:#72b31c; color:white; font-weight:bold; }
.header_cart { background-image:url('images/common_cart.png') ; background-repeat:no-repeat; background-position:10px center; }
.header_cart span { margin-left:40px; border:2px solid white; border-radius:18px; display:inline-block; width:40px; height:24px; line-height:24px; text-align:center; font-weight:bold; font-size:16px; }

/*================================================
 *  本文共通
 ================================================*/
div.contents { background-color:white; padding-top:50px; padding-bottom:50px; min-height:300px; }

/*================================================
 *  モーダル
 ================================================*/
.modal { display:none; position:fixed; top:0; height:100vh; width:100%; }
.modal_bg { position:absolute; height:100vh; width:100%; background:rgba(0,0,0,0.8); }
.modal_content { display:none; position:absolute; z-index:99; top:50%; transform:translate(-50%,-50%); left:50%; width:60%; padding:40px; background:white; }

/*================================================
 *  ページナビ
 ================================================*/
.page_nav { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; }
.page_nav span, .page_nav a { display:block; width:40px; margin:5px 3px; padding:2px 5px; text-align:center; }
.page_nav span { background-color:#E4DBC5; }
.page_nav a { background-color:#72b31c; color:white; }

/*================================================
 *  ログイン
 ================================================*/
p.login_mes { color:red; margin-bottom:20px; }
form.login { text-align:center; height:300px; }
form.login div { display:inline-block; }
form.login div p { text-align:left; font-size:18px; }
form.login div input[type="text"] { font-size:18px; width:288px; ime-mode:inactive; }
form.login div input[type="submit"] { margin-left:auto; margin-right:auto; margin-top:40px; width:200px; height:40px; line-height:40px; }

/*================================================
 *  注文入力共通
 ================================================*/
div.prod { display:flex; background-color:#E4DBC5; }		/* 商品表示ブロック */
div.prod:not(:last-child) { margin-bottom:10px; }
div.prod div.cover { background-color:#E4DBC5; background-position:center center; background-repeat:no-repeat; width:200px; height:200px; background-size:cover; flex-shrink:0; }	/* 商品写真 */
.prod_text { width:calc(100% - 240px); padding:20px; flex-shrink:0; }	/* 商品説明文＋数量等 */
.prod_text .prod_name { font-weight:bold; font-size:16px; }
.prod_text .prod_price_block { margin-top:20px; height:40px; display:flex; align-items:center; flex-wrap:wrap; }
.prod_text .prod_tanka, .prod_text .prod_num, .prod_price, .prod_to_cart { flex-shrink:0; margin-bottom:0; }
.prod_text .prod_tanka { width:150px; }
.prod_text .prod_num { width:200px; }
.prod_cart_button { width:120px; height:40px; line-height:40px; text-align:center; background-color:#72b31c; color:white; font-weight:bold; cursor:pointer; }

/*================================================
 *  トップ
 ================================================*/
/* 検索ボックス */
form.p_search { display:flex; justify-content:center; margin-bottom:20px; }
form.p_search input[type="submit"], form.p_search a.button { width:100px; height:30px; line-height:30px; margin:0 0 0 10px; }
/* カテゴリブロック */
div.top h2 { margin-bottom:0; }
div.category { display:flex; justify-content:space-between; }
div.category a { display:block; border:1px solid #72b31c; text-align:center; width:100%; height:30px; line-height:30px; }
div.category a:not(:last-child) { border-right:0; }
div.category a.cate_selected, div.category a:hover { background-color:#72b31c; color:white; font-weight:bold; }
/* 数量・単価・カート追加等 */
.prod_price_block { height:40px; }
.prod_num label { margin:0 10px; line-height:26px; vertical-align:middle; }
.prod_num input { display:inline-block; width:30px; text-align:right; height:28px; vertical-align:middle; }
.prod_num input[type="button"] { width:30px; text-align:center; height:30px; line-height:26px; vertical-align:middle; background-color:#72b31c; color:white; }
.prod_num input[type="text"] { background-color:white; }
.prod_num input[value="-"] { border-right:0; }
.prod_num input[value="+"] { border-left:0; }
.prod_num span { margin-left:10px; line-height:26px; }
.prod_price { width:190px; }
.prod_to_cart { display:none; }
.prod_cart_added { text-align:right; color:red; margin-left:10px; }
/* 追加商品関連 */
div.prod_add { padding:20px; margin-bottom:20px; text-align:center; background-color:#e4dbc5; }
div.prod_add_header { text-align:left; }
div.prod_add_header span { display:inline-block; text-align:center; }
div.prod_add_header span.prod_add_header_name { width:calc(100% - 460px); }
div.prod_add_header span.prod_add_header_num { width:105px; }
div.prod_add_header span.prod_add_header_tanka { margin-left:32px; width:107px; }
div.prod_add_header span.prod_add_header_tax_type { margin-left:24px; }
div.prod_add_line { display:flex; justify-content:flex-start; align-items:center; margin-bottom:10px; }			/* 追加商品の行 */
div.prod_add div.prod_add_line:last-child  { margin-bottom:0; }
div.prod_add_column1, div.prod_add_column2 { display:flex; justify-content:flex-start; align-items:center; }
div.prod_add_column1 { width:calc(100% - 460px); }
div.prod_plus_button { width:20px; border-radius:10px; background-color:#72b31c; color:white; margin-right:5px; }
div.prod_plus_button.hidden { visibility:hidden; }
div.prod_name { width:calc(100% - 30px); }
div.prod_name input[type="text"] { width:calc(100% - 12px); background-color:white; }
div.prod_tanka input[type="text"] { width:95px; background-color:white; margin-left:5px; text-align:right; }
div.prod_tax_type input[type="checkbox"] { display:none; }
div.prod_add label { margin-left:3px; margin-right:10px; }			/* 「個」「円」 */
div.prod_add label.tax_type { position:relative; cursor:pointer; display:block; margin-top:0; width:23px; height:22px; border:1px solid gray; background-color:white; }
div.prod_add label.tax_type::after { position:absolute; top:0; left:4px; display:block; width:11px; height:11px; border-bottom:4px solid #72b31c; border-left:4px solid #72b31c; transform:rotate(-45deg); }
div.prod_tax_type input[type="checkbox"]:checked+label.tax_type::after { content:''; }

/*================================================
 * ショップ
 ================================================*/
div.entry form { margin-bottom:50px; }
/* 商品購入数確認部 */
div.entry .prod_text .prod_num { width:100px; }
div.entry h3 { font-weight:bold; }
div.entry div.prod_add_line:not(:last-child) { border-bottom:1px solid white; }
div.entry div.prod_add_line span.prod_add_no { display:none; }
div.entry div.prod_add_line div { text-align:left; }
div.entry div.prod_add_line .prod_name { width:400px; font-weight:bold; }
div.entry div.prod_add_line .prod_tanka { width:130px; }
div.entry div.prod_add_line .prod_num { width:90px; }
div.entry div.prod_add_line .prod_shokei { width:180px; }

/* お客様情報入力部分 */
div.entry form table.custom tr th { width:169px; }
div.entry form table.custom tr td { width:748px;}
div.entry form table.custom input.zip { width:45px; }
div.entry form table.custom input.add { width:730px; }
div.entry form table.custom input.tel { width:150px; }
div.entry form table.custom input.email { width:400px; }
div.entry form table.custom textarea { width:730px; height:150px; }

/* ご利用ガイド */
div.shop_guide { border:2px solid #72b31c; padding:20px; margin-bottom:20px; }
div.shop_guide ul { margin-left:20px; }

/* 確認画面の価格表示部分 */
div.entry form table.price { margin-bottom:20px; }
div.entry form table.price thead tr th:nth-of-type(1), div.entry form table.price tbody tr td:nth-of-type(1) { width:544px; }
div.entry form table.price thead tr th:nth-of-type(2), div.entry form table.price tbody tr td:nth-of-type(2) { width:100px; }
div.entry form table.price thead tr th:nth-of-type(3), div.entry form table.price tbody tr td:nth-of-type(3) { width:50px; }
div.entry form table.price thead tr th:nth-of-type(4), div.entry form table.price tbody tr td:nth-of-type(4) { width:20px; }
div.entry form table.price thead tr th:nth-of-type(5), div.entry form table.price tbody tr td:nth-of-type(5) { width:140px; }
div.entry form table.price tfoot tr th { width:777px; }
div.entry form table.price tfoot tr td { width:140px; }
div.entry form table.price tfoot tr td.price_all { font-weight:bold; }
div.entry form table.price tfoot tr td.price_all input { width:110px; margin-right:2px; text-align:right; }

/* カード決済部分 */
.entry_pay #checkout { margin-top:25px; padding:25px; border:1px solid #000; }

/* 結果表示画面 */
div.entry_result { text-align:center; margin-top:50px; }
div.entry_result div.entry_message { margin-bottom:50px; }
div.entry_result div.entry_message p { font-size:20px; line-height:30px; font-weight:700; }
div.entry_result div.entry_message p.result_no { border:1px solid black; width:400px; margin:20px auto; padding:15px; }

/*================================================
 *  特商法
 ================================================*/
div.tokusho table { width:100%; margin-bottom:10px; }
div.tokusho table tr th { padding:10px; }
div.tokusho table tr th { border-bottom:1px solid white; border-right:1px solid #c9deae; width:180px; }
div.tokusho table tr:last-child th { border-bottom:1px solid #c9deae; }
div.tokusho table tr td { width:717px; border-width:1px 1px 1px 0; border-style:solid; border-color:#c9deae; background-color:white; padding:10px 20px; }
div.tokusho table tr td p:last-child { margin-bottom:0 }

/*================================================
 *  フッタ
 ================================================*/
footer { text-align:center; margin-top:40px; padding:30px 20px 80px; }
footer div.footer_menu { display:flex; justify-content:center; margin-bottom:40px; }
footer div.footer_menu a:not(:last-child) { margin-right:40px; }
footer p { margin-bottom:30px; }
footer .footer_corp { display:inline-block; font-size:20px; margin-bottom:10px; }
footer p.copyright { margin-top:20px; }

/*================================================
 *  ページトップへの戻り
 ================================================*/
#page-top { position:fixed; bottom:20px; right:100px; }
#page-top a { display:block; width:50px; height:50px; line-height:50px; background-color:#72b31c; font-size:30px; color:white; font-weight:bold; text-align:center; border:1px solid white; background-image:url("images/totop.png"); }

/*================================================
 *  404エラー
 ================================================*/
div.error404 { text-align:center; }
div.error404 p { margin:100px 0; font-size:24px; text-shadow:1px 1px 1px gray; font-weight:700; }


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■  タブレット向け  ■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
@media screen and (max-width:980px) {

/* タグ・クラス */
h2 { font-size:20px; }
h3 { font-size:18px; margin-bottom:0.5em; }
h4 { margin-bottom:0.5em; }
.inner { width:calc(100% - 20px); }
input[type="submit"], .button { width:250px; height:40px; line-height:40px; margin:10px 10px; font-size:16px; }

/* ヘッダ */
header .inner a.header_logo span.header_small { font-size:16px; }
header .inner a.header_logo span.header_large { font-size:24px; }
header div.header_right span.header_name { margin-right:10px; }

/* 本文共通 */
div.contents { padding-top:20px; padding-bottom:20px; padding-left:10px; padding-right:10px; }

/* 注文入力共通 */
div.prod div.cover { width:160px; height:160px; }
div.prod_add { padding:10px; }

/* トップ */
.prod_text { padding:10px; width:calc(100% - 180px); }
.prod_text .prod_price_block { margin-top:0; height:auto; }
div.top p.prod_price { width:auto; margin-right:10px; }

/* ショップ */
div.entry form { margin-bottom:10px; }
div.prod_add_line { flex-wrap:wrap; }

/* お客様情報入力部分 */
div.entry form table.custom { width:100%; }
div.entry form table.custom tr th { width:119px; }
div.entry form table.custom tr td { width:100%; }
div.entry form table.custom input.add { width:calc(100% - 14px); }
div.entry form table.custom textarea { width:calc(100% - 14px); }
/* ご利用ガイド */
div.shop_guide { padding:10px; margin-bottom:10px; }
div.shop_guide ul { margin-left:10px; }
/* 確認画面 */
div.entry form table.price tfoot tr td.price_all input { width:calc(100% - 29px); }
/* 特商法 */
div.tokusho table tr th { width:140px; }
div.tokusho table tr td { width:100%; }
/* フッタ */
footer { margin-top:20px; padding:15px 10px 40px; }
footer ul { margin-bottom:20px; }
footer .footer_corp { font-size:18px; }
/* ページトップへの戻り */
#page-top { right:20px; }
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■  タブレット小向け  ■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
@media screen and (max-width:640px) {

/* トップ */
header div.inner { display:block; text-align:center; }
header div.header_right { justify-content:center; }

/* 商品検索窓 */
input.search_text { width:calc(100% - 220px); }

/* カテゴリブロック */
div.category { display:block; }
div.category a { width:calc(100% - 2px); }
div.category a:not(:last-child) { border-top:1px solid #72b31c; border-right:1px solid #72b31c; border-bottom:0; }

/* 注文入力共通 */
div.prod { display:block; }
div.prod div.cover { margin:5px auto 0; }
.prod_text { width:auto; }
div.top .prod_text .prod_tanka { width:auto; }
div.prod_add_header { text-align:center; }
div.prod_add_header span.prod_add_header_name, div.prod_add_header span.prod_add_header_num, div.prod_add_header span.prod_add_header_tanka, div.prod_add_header span.prod_add_header_tax_type { width:auto; margin-left:5px; margin-right:5px; }
div.prod_add_column1 { width:calc(100%); }
div.prod_add_column2 { margin-top:5px; }
div.prod_add_column2 .prod_num { margin-left:25px; }
div.prod_add .prod_price_block { height:auto; }

/* ショップ */
div.entry form { margin-bottom:50px; }
div.entry div.prod_add { padding:10px; }

/* お客様情報入力部分 */
div.entry form { margin-bottom:15px; }
div.entry form table.custom, div.entry form table.custom tbody, div.entry form table.custom tbody tr, div.entry form table.custom tbody tr th, div.entry form table.custom tbody tr td { display:block; }
div.entry form table.custom, div.entry form table.custom tr, div.entry form table.custom th, div.entry form table.custom td { border:0; }
div.entry form table.custom { margin-bottom:0; }
div.entry form table.custom tr th, div.entry form table.custom tr td { width:100%; padding-left:0; padding-right:0; }
div.entry form table.custom input, div.entry form table.custom textarea { box-sizing:border-box; }
div.entry form table.custom input.name { width:100%; }
div.entry form table.custom input.zip { width:55px; }
div.entry form table.custom input.add { width:100%; }
div.entry form table.custom input.tel { width:100%; }
div.entry form table.custom input.email { width:100%; }
div.entry form table.custom textarea { width:100%; height:150px; }

/* フッタ */
footer { padding:10px 10px 30px; }
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■     スマホ向け     ■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
@media screen and (max-width:640px) {

/* 商品入力フォーム */
.prod_num input { width:21px; }
div.prod_tanka input[type="text"] { width:70px; }
.prod_cart_button { height:30px; line-height:30px; }
.prod_to_cart { margin-top:5px; }

}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■     スマホ向け     ■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
@media screen and (max-width:480px) {

/* クラス・タグ */
* { font-size:16px; }
h2 { font-size:18px; }
h3 { font-size:16px; }

/* ヘッダ */

/* トップ */
form.p_search { flex-wrap:wrap; }
input.search_text { width:100%; margin-bottom:5px; }

/* 商品購入数入力部分 */
div.entry form div.prod_block div.prod_info div.prod_detail p { font-size:14px; }
div.entry form div.prod_add div.prod_button div.prod_add_column2 { display:block; text-align:left; }
div.entry form div.prod_add div.prod_button div.prod_add_column2 div.prod_num { margin-bottom:5px; }
.prod_to_cart { margin-left:24px; }

/* 確認画面のテーブル分 */
div.entry form table.price, div.entry form table.price * { display:block; border:0; }
div.entry form table.price thead { display:none; }
div.entry form table.price tbody { border:1px solid gray; }
div.entry form table.price tbody tr { border-bottom:1px solid gray; }
div.entry form table.price tbody tr:last-child { border-bottom:0; }
div.entry form table.price tbody tr td:nth-of-type(1) { width:calc(100% - 20px); }
div.entry form table.price tbody tr td:nth-of-type(2), div.entry form table.price tbody tr td:nth-of-type(3), div.entry form table.price tbody tr td:nth-of-type(4) { display:inline; padding:0 0 0 10px; }
div.entry form table.price tbody tr td:nth-of-type(2):after { content:'×'; }
div.entry form table.price tbody tr td:nth-of-type(3):after { content:'＝'; }
div.entry form table.price tfoot { margin-top:5px; }
div.entry form table.price tfoot tr { display:flex; }
div.entry form table.price tfoot tr th { width:50%; border-bottom:1px solid white; }
div.entry form table.price tfoot tr td { width:50%; border-bottom:1px dotted gray; }
div.entry form table.price tfoot tr:last-child td { border-bottom:0; }
div.entry form table.price tfoot tr td.price_all input { display:inline-block; border:1px solid gray; width:calc(100% - 34px); }
div.entry form table.price tfoot tr td.price_all span { display:inline-block; }
/* 確認画面の価格表示部分 */
div.entry form table.price thead tr th, div.entry form table.price thead tr td { padding-left:5px; padding-right:5px; }
/* 特商法 */
div.tokusho table, div.tokusho table tbody, div.tokusho table tbody tr, div.tokusho table tbody tr th, div.tokusho table tbody td { display:block; width:100%; border:0; }
div.tokusho table tbody tr { margin-bottom:5px; }
div.tokusho table tbody tr th, div.tokusho table tbody td { padding:5px 0; }
/* 結果表示画面 */
div.entry_result { margin-top:30px; box-sizing:border-box; }
div.entry_result div.entry_message { margin-bottom:30px; }
div.entry_result div.entry_message p { font-weight:normal; font-size:16px; }
div.entry_result div.entry_message p.result_no { width:280px; }
/* フッタ */
footer * { font-size:14px; }
footer ul li { margin:0 10px; }
}