@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/* メモ */
/* 濃い緑：#004d2b */
/* 濃い茶：#6f654b */
/* 濃い灰：#888    */
/* 中間灰：#bbb    */
/* 薄い灰：#ddd    */

/*================================================
 *  CSSリセット
 ================================================*/
* { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; word-wrap:break-word; box-sizing:border-box; }
h1, h2, h3, h4, h5, footer, header, nav, article, section { display:block; font-weight:normal; }
div, nav, article, section, dl, ul { overflow:hidden; }
ul { list-style-type:none; }
ul, ol { list-style-position:outside; }
table { border-collapse:collapse; border-spacing:0; table-layout:fixed; }
th { font-weight:normal; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input[type="submit"], input[type="button"] { border-radius:0; -webkit-box-sizing:content-box; -webkit-appearance:button; appearance:button; border:none; box-sizing:border-box; cursor:pointer; }
/* input[type="text"], input[type="text"], button, textarea, select { -webkit-appearance:none; -moz-appearance:none; appearance:none; } */
strong { font-weight:normal; }

/*================================================
 *  タグ定義
 ================================================*/
body, input, select, option, textarea, button { font-family:'Noto Sans JP', sans-serif; font-size:14px; line-height:1.6; color:#333; }
body { margin:0 auto; -webkit-text-size-adjust:none; background-color:white; }
section { margin-bottom:25px; min-height:500px; }
a { background:transparent; text-decoration:none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); color:#333; }
a:hover, a:focus { text-decoration:none; outline:none; opacity:0.7; }
h1 { font-size:24px; }
h2 { font-size:20px; background-color:#888; color:white; padding:5px 0; margin-bottom:15px; text-align:center; }
h3 { font-size:16px; background-color:#aaa; color:white; padding:5px 0; text-align:center;  margin-top:25px; margin-bottom:25px; }
table { margin-left:auto; margin-right:auto; }
table, tr, th, td { border:1px solid #aaa; }
th { padding:2px 10px; }
td { padding:2px 5px; }
td { text-align:left; }
input[type="text"], input[type="password"], textarea, select { border:1px solid gray; width:300px; }
input[type="text"], input[type="password"], select { padding-left:5px; padding-right:5px; }
textarea { padding:5px; }
button:not(:disabled) { cursor:pointer; }

/*================================================
 *  ヘッダ・ナビ類
 ================================================*/
/* ヘッダ */
header { display:flex; justify-content:space-between; align-items:center; padding:10px 0; color:#004d2b; }
header img, header h1, header span { display:inline; vertical-align:middle; }
header img { margin-right:10px; height:50px; }
.header_buttons { display:flex; justify-content:center; }
.header_buttons a { display:flex; justify-content:center; align-items:center; }
span.header_name { font-size:20px; }
.header_account, .header_list { display:block; height:50px; padding-left:15px; padding-right:15px; text-align:center; background-color:#004d2b; color:white; }
.header_list:not(:last-child) { border-right:1px dotted white; }

/* メニュー */
nav { color:white; display:flex; margin-bottom:10px; }
nav p, nav a { color:white; flex:1; text-align:center; display:block; padding-top:5px; padding-bottom:5px; }
nav p { background-color:#888; }
nav a { background-color:#004d2b; }
nav p, nav a:not(:last-child) { border-right:1px solid white; }

/* スマホメニューボタン */
div.sp_menu_button { display:none; position:absolute; z-index:2; top:10px; right:10px; width:50px; height:60px; cursor:pointer; }
div.sp_menu_button div, div.sp_menu_button div span { display:inline-block; transition:all .4s; box-sizing:border-box; }
div.sp_menu_button div { position:relative; left:7.5px; width:35px; height:35px; }
div.sp_menu_button div span { position:absolute; left:0; width:100%; height:4px; background-color:#267edf; border-radius:4px; }
div.sp_menu_button div span:nth-of-type(1) { top:5px; }
div.sp_menu_button div span:nth-of-type(2) { top:15px; }
div.sp_menu_button div span:nth-of-type(3) { top:25px; }
div.sp_menu_button.active div span:nth-of-type(1) { -webkit-transform:translateY(10px) rotate(-45deg); transform:translateY(10px) rotate(-45deg); }
div.sp_menu_button.active div span:nth-of-type(2) { opacity:0; }
div.sp_menu_button.active div span:nth-of-type(3) { -webkit-transform:translateY(-10px) rotate(45deg); transform:translateY(-10px) rotate(45deg); }
div.sp_menu_button p { font-size:13px; line-height:13px; text-align:center; color:#267edf; }

/* ページ遷移 */
.page_nav { display:flex; justify-content:center; text-align:center; }
.page_nav:not(:first-child) { margin-top:10px; }
.page_nav span, .page_nav a { display:block; margin:0 5px; padding:5px 10px; min-width:35px; }
.page_nav span { background-color:#888; color:white; }
.page_nav a { background-color:#004d2b; color:white; }

/*================================================
 *  フッタ
 ================================================*/
footer { padding-top:25px; padding-bottom:50px; text-align:center; border-top:1px solid #bbb; }
footer div.buttons { margin-top:0; }
footer a { margin-top:0; margin-bottom:25px; }
footer small { margin-top:25px; }

/*================================================
 *  ページトップへの戻り
 ================================================*/
.go_to_top { display:block; position:fixed; bottom:20px; right:10vw; width:60px; height:60px; background-color:#004d2b; color:white; font-size:40px; line-height:60px; text-align:center; border:1px solid white; z-index:2; text-decoration:none; opacity:0.8; cursor:pointer; }
.go_to_top:hover { opacity:1; }

/*================================================
 *  ページ共通
 ================================================*/
/* ブロック要素 */
.inner { width:1020px; margin-left:auto; margin-right:auto; }
.center { margin-left:0; margin-right:0; text-align:center; }
.center_wrapper { text-align:center; }
.center_inner { display:inline-block; text-align:left; }
div.buttons { display:flex; justify-content:center; margin-top:25px; }
button, .button, input[type="submit"] { display:block; width:200px; padding:10px 0; text-align:center; background-color:#004d2b; color:white; }
button:not(:last-child), .button:not(:last-child), input[type="submit"]:not(:last-child) { margin-right:25px; }
div.buttons form button, div.buttons form input[type="submit"] { margin-right:0; }
button:hover, .button:hover, input[type="submit"]:hover { opacity:0.7; }
table.noborder, table.noborder tr, table.noborder th, table.noborder td { border:0; }
table:not(:first-child) { margin-top:25px; }
.table_list th, .table_detail th { background-color:#ddd; }
.table_list tbody th { text-align:right; padding:0; }
.table_list th a { display:block; width:auto; min-width:50px; padding:2px 10px; background-color:#004d2b; color:white; }
.table_list td { padding:2px 10px; }
.table_detail td { min-width:250px; }
.line_del td { background-color:gray; text-decoration:line-through; }
.with_button input { display:inline-block; margin-left:25px; }
.with_button input[type="submit"] { width:150px; padding:5px 0; }
.gray { background-color:#ddd; }
.page_lead { margin-bottom:25px; text-align:center; }
.search { margin-bottom:10px; }
.search th { padding-right:10px; }
.search td input, .search td a { display:inline-block; }
.search td input[type="submit"], .search td a { width:100px; margin-left:10px; margin-right:0; padding:6px 0; }

.error404 { margin-top:100px; }

/* テキスト要素 */
.message, .error { color:red; text-align:center; margin-bottom:1em; }
.right { text-align:right; }
.f_req:after { content:'必須'; margin-left:5px; display:inline-block; border-radius:3px; color:white; background:#ee6868; padding:0 5px; }
input[type="text"].tinynum { width:60px; }
input[type="text"].smallnum { width:80px; }
input[type="text"].longtext { width:500px; }
select[name="u_typename"] { width:200px; }
input[name="u_meigi_fn"], input[name="u_meigi_ln"] { width:200px; }
.gray_text { color:#999; }
.nobr { white-space:nowrap; display:inline-block; }

/*================================================
 *  各ページ
 ================================================*/
/* ----- ログイン関連 -----*/
.login { margin-bottom:50px; }
.login_forget p:not(:last-child) { margin-bottom:1em; }
.login_forget p a { color:red; }
.regist_message { margin-top:50px; margin-bottom:50px; padding:10px; border:1px solid #888; }
.regist2 td input+span { margin-left:10px; }
.regist2 td span.nobr { margin-right:10px; }
.regist2 td span.nobr label { margin-right:5px; }

/* ----- 一般・管理者共通：注文履歴 ----- */
.history h3+p { margin-top:10px; }
.history_detail:not(:first-child), .history_pay:not(:first-child) { margin-top:25px; }
.order_cancel { background-color:red; color:white; padding:10px; font-size:16px; }
.order_sendmail { margin-right:25px; }

/* ----- 管理者：注文入力 ----- */
span.dairi_user { display:inline-block; margin-left:25px; padding-left:25px; padding-right:25px; background-color:white; color:#333; font-size:16px; }
.shop .category_list { float:left; width:300px; margin-right:25px; }
.shop h3 { margin-top:0; }
.shop .category_list h3 { margin-bottom:5px; }
.shop .category_list a, .shop .category_list p { display:block; padding:5px 10px; color:white; }
.shop .category_list a { background-color:#004d2b; }
.shop .category_list p { background-color:#64a29a; }
.shop .category_list a:not(:last-child), .shop .category_list p:not(:last-child) { margin-bottom:1px; }
.shop .category_product h3 { margin-bottom:10px; }
.shop .category_product div.buttons { margin-top:5px; }
.shop .category_product div.category_product_scroll { height:500px; overflow-y:scroll; background-color:#fcfcfc; }
.shop .category_product table { width:678px; table-layout:fixed; }
.shop .category_product table td { line-height:20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop .category_product table .p_no    { width:80px; }
.shop .category_product table .p_cate  { width:200px; }
.shop .category_product table .p_name  { width:346px; }
.shop .category_product table .p_tanka { width:100px; }
.shop .category_product table .p_num   { width:59px; }
.shop .category_product table .p_tax   { width:36px; }
.shop .category_product table .p_buy   { width:56px; }
.shop .category_product table td.category_product_num { padding:2px 4px; }
.shop .category_product table td.category_product_num_with_input { padding:4px 4px 2px 4px; vertical-align:middle; }
.shop .category_product table td.category_product_num_with_input input { display:block; width:50px; height:18px; padding:0 5px; }
.shop .category_product table td:last-child { padding:0; vertical-align:middle; }
.shop .category_product table td button { width:55px; height:24px; line-height:1; padding:0; }
span.cart_num { padding-right:6px; }
.cart_button { background-color:#004d2b; color:white; display:inline-block; width:auto; padding:2px 20px; }

/* ----- 管理者：配送先 ----- */
.ship_disable input:disabled { background-color:#888; }

/* ----- 管理者：注文確認 ----- */
.order table.table_detail { margin-top:25px; }

/* ----- 管理者：決済額 ----- */
.pay_diff_not_zero { color:red; font-weight:bold; }
input.pay_submit:disabled, button.pay_add_line:disabled { background-color:#888; cursor:not-allowed; }
.pay_univa { text-align:center; }
.pay_univa button, .pay_del { display:inline-block; width:auto; padding:2px 20px; }

/* ----- 管理者：カード決済 ----- */
.pay2_id { width:80px; }
.pay2.table_list tbody th { padding:2px 10px; }
.pay2 td a.button { width:140px; margin:0 auto; }

/* ----- 管理者：ユーザ管理 -----*/
.user_list_id    { width:78px; }
.user_list_name  { width:309px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user_list_email { width:340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user_list_type  { width:150px; }
.user_list_code  { width:92px; }
.user_list_widthdraw { width:50px; }
.user_onnze td { color:#004d2b; font-weight:bold; }
.user_not_entry td { color:red; font-weight:bold; }
.user_withdraw td { background-color:#bbb; }

/* ----- 管理者：注文一覧 -----*/
.pay_search { margin-bottom:10px; display:flex; justify-content:center; }
.pay_search input[type="text"] { margin-right:10px; width:180px; color:red; }
.pay_search input[name="s_date"] { margin-right:10px; width:100px; }
.pay_search input[type="submit"], .pay_search .button, .pay_search .sort_selected { display:block; height:25px; padding:0; }
.pay_search input[type="submit"] { width:100px; }
.pay_search input[type="submit"]:not(:last-child) { margin-right:10px; }
.pay_search .button, .pay_search .sort_selected { width:100px; }
.pay_search .sort_selected { background-color:gray; color:white; font-weight:bold; padding-top:1px; }
.pay_search input[type="submit"].longsubmit { width:120px; }
.pay_search_sub { display:flex; justify-content:center; }
.pay_search_sub:not(:last-of-type) { margin-right:30px; }
.sort_select *:first-child { margin-right:10px; }

/* ----- 管理者：カテゴリー管理 -----*/
.category table:not(:first-child) { margin-top:25px; }

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

/* ページ共通 */
.inner { width:100%; }
section>div { padding-left:10px; padding-right:10px; }

/* ヘッダ */
header img { margin-left:10px; height:40px; }

}

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

/* ページ共通 */
section { min-height:300px; }
input[type="text"], input[type="password"], textarea, select { max-width:100%; }
input[type="text"].longtext { max-width:100%; }

/* 表 */
table, tbody, tfoot, tr, th, td { display:block; }
table, tbody, tfoot, th, td { border:0; }
table { width:100%; }
table.table_simple th, table.table_simple td { text-align:center; }
table.table_simple td input { margin-left:0; }
table.table_simple td input[type="submit"] { margin-top:10px; }
thead { display:none; }
tr { margin-bottom:5px; }
th { padding:2px 5px; }
th.right { text-align:left; }
td.gray { display:none; }
.p_no:before { content:'型番：'; padding-right:5px; }
.c_name:before { content:'カテゴリー：'; padding-right:5px; }
.p_tanka:before { content:'単価：'; padding-right:5px; }
.od_num:before, .cart_num:before { content:'数量：'; padding-right:5px; }
.p_keigen { text-align:right; }
.p_keigen:not(:empty):before { content:'税率：'; padding-right:5px; }
.pay2 .pay_id { text-align:center; }
.pay2 .pay_id:before { content:'決済ID：'; }
.pay2 td.right { text-align:center; }

/* ヘッダ */
header { display:block; }
.header_title { display:block; text-align:center; margin-bottom:10px; }
header img { margin-left:0; }
.header_buttons a { width:calc(50% - 1px); margin-bottom:2px; }
.header_account:not(:last-child) { border-right:0; }

}

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

/* ページ共通 */
body, input, select, option, textarea, button { font-size:16px; }
h1 { font-size:20px; }
h3 { font-size:18px; }
input[type="text"], input[type="password"] { font-size:16px; }
.with_button input[type="submit"] { width:180px; }

}