@charset "UTF-8";

/* --------------------------------------------------
# General Settings
-------------------------------------------------- */
body { margin: 20px 0 0 0; padding: 0; background-color: #111; color: #333333; font-family: 'Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',Meiryo,'メイリオ','ＭＳ Ｐゴシック',sans-serif; line-height: 1.5; text-align: center; }
h1 { margin: 0; padding: 0 0 0 5px; font-size: 120%; border-left: solid 5px #f30a0a; }
img { border: 0; -ms-interpolation-mode: bicubic; }
form { margin: 0; padding: 0; }
a { outline: none; }
a:link { color: #0000ff; text-decoration: underline; }
a:visited { color: #0000ff; text-decoration: underline; }
a:hover { color: #0000ff; text-decoration: none; }
.clear { height: 0px; font-size: 0px; line-height: 0px; float: none; clear: both; }
#preload { position: absolute; filter: alpha(opacity=0); opacity: .0; }

/* --------------------------------------------------
# Global Header
-------------------------------------------------- */
#global_header { padding: 20px 0; }
#global_header_inner { margin: 0 auto; width: 1200px; color: #fff; font-size: 120%; text-align: left; position: relative; }
#global_header_inner span { display: block; text-align: left; margin-bottom: 10px; }
#global_header_inner p { margin: 0; padding: 5px 10px; text-align: left; border: 1px solid #fff; font-size: 75%; display: inline-block; }
.user-info { min-width: 180px; position: absolute; top: 0px; right: 20px; color: #fff; font-size: 90%; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.user-menu { display: none; position: absolute; top: 100%; right: 0; background: #222; border: 1px solid #fff; padding: 5px 0; z-index: 999; }
.user-menu ul { list-style: none; margin: 0; padding: 0; }
.user-menu li { padding: 5px 15px; }
.user-menu li a { color: #fff; text-decoration: none; }
.user-menu li a:hover { text-decoration: underline; }
.user-box { display: flex; align-items: center; gap: 6px; }
.user-icon-wrap { display: flex; align-items: center; justify-content: center; line-height: 1; }
.user-icon-wrap i { font-size: 120%; margin-right: 5px; color: #fff; }

/* --------------------------------------------------
# Global Footer
-------------------------------------------------- */
#global_footer { padding: 20px 0 40px 0; }
#global_footer_inner { margin: 0 auto; width: 1200px; color: #fff; font-size: 80%; }

/* --------------------------------------------------
# Login
-------------------------------------------------- */
#login { padding: 20px 0; background-color: #fff; }
#login_inner { margin: 0 auto; width: 1200px; font-size: 100%; text-align: left; }
#login_inner table { margin: 0 auto 15px auto; width: 50%; border-collapse: collapse; }
#login_inner table td input#loginId { margin: 0 0 0 15px; padding: 5px; width: 80%; font-size: 100%; }
#login_inner table td input#loginPass { margin: 0 0 0 15px; padding: 5px; width: 80%; font-size: 100%; }
#login_inner table th { width: 176px; border: solid 1px #ccc; border-left: 0; background-color: #ddd; text-align: center; }
#login_inner table td { padding: 10px 0; width: 704px; border: solid 1px #ccc; }
#login_inner table td ul { margin: 0; padding: 0; list-style: none; }
#login_inner table td ul li { width: 176px; float: left; height: 3.5em; }
#login_inner table td ul li label { padding: 5px 15px; display: block; }
#login_inner table td select { margin: 5px 0 5px 15px; }
#login_inner div#form_button { text-align: center; }

/* --------------------------------------------------
# Search
-------------------------------------------------- */
#search { padding: 20px 0; background-color: #fff; }
#search_inner { margin: 0 auto; width: 1200px; font-size: 100%; text-align: left; }
#search_inner #search_inner_left { width: 50%; float: left; }
#search_inner #search_inner_right { width: 45%; float: right; }
#search_inner #search_inner_right #modify { margin: 0; padding: 0.5em 1em; border: 1px solid #666; overflow: auto; height: 200px; }
#search_inner #search_inner_right #modify p.title { margin: 0 0 0.3em 0; padding: 0; font-weight: 600; }
#search_inner #search_inner_right #modify th { margin: 0; padding: 0; font-weight: 400; white-space: nowrap; background: #fff; border: none; vertical-align: top;  }
#search_inner #search_inner_right #modify td { margin: 0; padding: 0; border: none;  }
#search_inner table { margin: 0 auto 15px auto; width: 100%; border-collapse: collapse; }
#search_inner table th { width: 176px; border: solid 1px #ccc; border-left: 0; background-color: #ddd; text-align: center; }
#search_inner table td { padding: 10px 0; width: 704px; border: solid 1px #ccc; }
#search_inner table td ul { margin: 0; padding: 0; list-style: none; }
#search_inner table td ul li { width: 176px; float: left; height: 3.5em; }
#search_inner table td ul li label { padding: 5px 15px; display: block; }
#search_inner table td select { margin: 5px 0 5px 15px; }
#search_inner table td option { }
#search_inner table td input#search_keyword { margin: 0 0 0 15px; padding: 5px; width: 80%; font-size: 100%; }
#search_inner table td input#search_number { margin: 0 0 0 15px; padding: 5px; width: 20%; font-size: 100%; }
#search_inner div#form_button { text-align: center; }

/* --------------------------------------------------
# result
-------------------------------------------------- */
#result { padding: 20px 0; background-color: #fff; }
#result_inner { margin: 0 auto; width: 1200px; font-size: 100%; text-align: left; }
#result_inner div#path { margin: 0 0 20px 0; }
#result_inner div#sort { margin: 0 0 5px 0; text-align: right; }
#result_inner table { margin: 0 auto 15px auto; width: 100%; border-collapse: collapse; }
#result_inner table tr:hover { background-color: #eee; }
#result_inner table th { padding: 5px; border: solid 1px #ccc; background-color: #ddd; text-align: center; }
#result_inner table th.left { border-left: 0; }
#result_inner table th.right { border-right: 0; }
#result_inner table td { padding: 5px; border: solid 1px #ccc; }
#result_inner table td.image { border-left: 0; text-align: center; }
#result_inner table td.image span { height: 37px; display: block; overflow: hidden; }
#result_inner table td.name { font-weight: 700; }
#result_inner table td.name p { margin: 0; padding: 0; color: #999; font-size: 85%; line-height: 1.2; }
#result_inner table td.name span { color: #ff0000; }
#result_inner table td.number { font-size: 90%; text-align: center; }
#result_inner table td.price { color: #ff0000; font-weight: 700; text-align: center; }
#result_inner table td.date01 { font-size: 90%; text-align: center; }
#result_inner table td.date02 { border-right: 0; font-size: 90%; text-align: center; }
.p-pagenation { display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 0; list-style: none; }
.p-pagenation_item:first-child .p-pagenation_link { margin-left: 0; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.p-pagenation_item:last-child .p-pagenation_link { margin-right: 0; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.p-pagenation_link { position: relative; display: block; padding: 6px 8.5px; padding: .6rem .85rem; margin-left: -1px; line-height: 1.25; -webkit-transition: all .2s; transition: all .2s; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-200); border: 1px solid var(--border-color-100); background-color: var(--input-background-color); }
.p-pagenation_link.is-current { color: var(--color-text-100); background-color: var(--hover-background); }
.p-pagenation_link:hover { color: var(--hover-text); background-color: var(--hover-background); text-decoration: none; }
.p-pagenation_link:not(:disabled):not(.disabled) { cursor: pointer; }

/* --------------------------------------------------
# detail
-------------------------------------------------- */
#detail { padding: 20px 0; background-color: #fff; }
#detail_inner { margin: 0 auto; width: 1200px; font-size: 100%; text-align: left; }
#detail h1 { margin: 0 0 10px 0; }
#detail_inner div#path { margin: 0 0 20px 0; }
#detail_inner div#sort { margin: 0 0 5px 0; text-align: right; }
#detail table { margin: 0 auto 15px auto; width: 100%; border-collapse: collapse; }
#detail table td.product { border-top: solid 1px #ccc; }
#detail table td.product h2 { margin: 10px 0 0 0; padding: 0; color: #111; font-size: 120%; line-height: 1.3; }
#detail table td.product h2 span { color: #ff0000; }
#detail table td.alpha { padding: 10px 0; width: 50%; border-bottom: solid 1px #ccc; vertical-align: top; }
#detail table td.alpha div.main_image { width: 90%; height: auto; overflow: hidden; }
#detail table td.alpha div.main_image img { width: 100%; }
#detail table td.alpha div.sub_image { }
#detail table td.alpha div.sub_image ul { margin: 0; padding: 0; list-style: none; }
#detail table td.alpha div.sub_image ul li { padding: 5px 0 0 0; width: 130px; height: 90px; float: left; overflow: hidden; }
#detail table td.alpha div.sub_image ul li img { vertical-align: top; width: 100%; height: auto; }
#detail table td.beta { padding: 10px 0; width: 50%; border-bottom: solid 1px #ccc; vertical-align: top; }
#detail table td.beta table { margin: 0; width: auto; }
#detail table td.beta table th { padding: 15px 10px; border: solid 1px #ccc; border-width: 1px 0; background-color: #eee; font-size: 100%; text-align: center; white-space: nowrap; }
#detail table td.beta table td { padding: 15px 10px; width: 100%; border: solid 1px #ccc; border-width: 1px 0; font-size: 100%; vertical-align: middle; }
#detail table td.beta table td strong { color: #ff0000; }
#detail div#close { margin: 0 0 20px 0; text-align: center; }

/* 管理画面注文履歴詳細 */
#order_detail { padding: 20px 0; background-color: #fff; }
#order_detail_inner { margin: 0 auto; width: 1200px; font-size: 100%; text-align: left; }
#order_detail h1 { margin: 0 0 10px 0; }
#order_detail_inner div#path { margin: 0 0 20px 0; }
#order_detail_inner div#sort { margin: 0 0 5px 0; text-align: right; }
#order_detail table { border-collapse: collapse; }
#order_detail table th { padding: 15px 10px; border: solid 1px #ccc; border-width: 1px 0; background-color: #eee; font-size: 100%; text-align: center; white-space: nowrap; }
#order_detail table td { padding: 15px 10px; width: 100%; border: solid 1px #ccc; border-width: 1px 0; font-size: 100%; vertical-align: middle; }
#order_detail table td strong { color: #ff0000; }
#order_detail_inner div#form_button { padding-top: 20px; text-align: center; }
#order_detail_inner table td input { margin: 0; padding: 5px; width: 20%; font-size: 100%; }

/* 管理画面更新情報 */
#news { padding: 20px 0; background-color: #fff; }
#news_inner { margin: 0 auto; width: 1200px; font-size: 100%; text-align: left; }
#news h1 { margin: 0 0 10px 0; }
#news_inner div#path { margin: 0 0 20px 0; }
#news_inner div#sort { margin: 0 0 5px 0; text-align: right; }
#news table { border-collapse: collapse; }
#news table th { padding: 15px 10px; border: solid 1px #ccc; border-width: 1px 0; background-color: #eee; font-size: 100%; text-align: center; white-space: nowrap; }
#news table td { padding: 15px 10px; width: 100%; border: solid 1px #ccc; border-width: 1px 0; font-size: 100%; vertical-align: middle; }
#news_inner div#form_button { padding-top: 20px; text-align: center; }
#news_inner table td input { margin: 0; padding: 5px; width: 20%; font-size: 100%; }

/* 管理画面注文履歴管理 */
#order_admin { padding: 20px 0; background-color: #fff; }
#order_admin_inner { margin: 0 auto; width: 1200px; font-size: 100%; text-align: left; }
#order_admin h1 { margin: 0 0 10px 0; }
#order_admin_inner div#path { margin: 0 0 20px 0; }
#order_admin table { border-collapse: collapse; width: 100%; }
#order_admin table th { padding: 15px 10px; border: solid 1px #ccc; background-color: #eee; font-size: 100%; text-align: center; white-space: nowrap; }
#order_admin table td { padding: 15px 10px; border: solid 1px #ccc; font-size: 100%; vertical-align: middle; }

/* 管理画面画像登録管理 */
#drop-area { border: 2px dashed #ccc; padding: 20px; text-align: center; margin-bottom: 10px; }
#preview { display: flex; flex-wrap: wrap; gap: 10px; }
.preview-image { width: 100px; height: 100px; object-fit: cover; border: 1px solid #ddd; }
.progress-container { margin-bottom: 10px; }
.progress-bar { height: 10px; background: #4caf50; width: 0%; }


/* プルダウン（select） */
select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 8px 36px 8px 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; background-size: 16px; cursor: pointer; transition: border-color 0.3s; }
select:focus { outline: none; border-color: #007BFF; }

/* ボタン */
input[type="submit"] { padding: 8px 16px; font-size: 16px; background-color: #007BFF; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s, box-shadow 0.2s; }
input[type="submit"]:hover { background-color: #0056b3; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
input[type="submit"]:active { background-color: #004099; }
input[type="button"] { padding: 8px 16px; font-size: 16px; background-color: #007BFF; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s, box-shadow 0.2s; }
input[type="button"]:hover { background-color: #0056b3; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
input[type="button"]:active { background-color: #004099; }


/* レスポンシブ対応追加 */
@media screen and (max-width: 1200px) {
	body { font-size: 200%; }
	#global_header_inner,
	#global_footer_inner,
	#search_inner,
	#result_inner,
	#detail_inner {
		width: 100%;
		padding: 0 15px;
		font-size: 130%;
		box-sizing: border-box;
	}
	#search_inner #search_inner_left,
	#search_inner #search_inner_right,
	#detail table td.alpha,
	#detail table td.beta {
		width: 100%;
		float: none;
		padding-bottom: 20px;
	}
	#search_inner table td ul li { width: 48%; }
	#search_inner #search_inner_right #modify { height: 500px; }
	form#searchForm{ padding-top: 200px; }
	#search_inner_right #modify table tr { display: block; margin-bottom: 1em; }
	#search_inner_right #modify th,
	#search_inner_right #modify td { display: block; width: 100%; text-align: left; padding: 5px 0; border: none; background: none; }
	#search_inner_right #modify th { font-weight: bold; color: #333; }
	#search_inner_right #modify td { color: #666; }
	#detail table { display: block; width: 100%; }
	#detail table tr { display: flex; flex-direction: column; }
	#detail table td.alpha, #detail table td.beta { width: 100% !important; display: block; }
	#detail table td.alpha .main_image { text-align: center; }
	#detail table td.alpha .main_image img { width: 100%; height: auto; display: inline-block; }
	input[type="submit"] { font-size: 48px; padding: 14px 20px; }
	input[type="button"] { font-size: 48px; padding: 14px 20px; }
	select { font-size: 46px; }
	#global_footer_inner { width: 100%; font-size: 70%; }
}

/*
@media screen and (max-width: 768px) {
input[type="submit"] {
    font-size: 28px;
    padding: 14px 20px;
  }
  body {
    font-size: 90%;
  }

  #search_inner table td input#search_keyword,
  #search_inner table td input#search_number {
    width: 95%;
    margin-left: 0;
  }

  #search_inner table td ul li {
    width: 100%;
  }

  #detail table td.alpha div.main_image img {
    max-width: 100%;
    height: auto;
  }

  .p-pagenation {
    flex-wrap: wrap;
  }

  .p-pagenation_link {
    padding: 0.4rem 0.6rem;
    font-size: 90%;
  }

  #detail table td.alpha div.sub_image ul li {
    width: 48%;
    margin-right: 2%;
  }
}

@media screen and (max-width: 480px) {
  #search_inner table th,
  #search_inner table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  #search_inner table td ul li {
    width: 100%;
  }

  #detail table td.beta table th,
  #detail table td.beta table td {
    display: block;
    width: 100%;
  }

  .p-pagenation {
    justify-content: center;
  }
}
*/