/* Keep the desktop design, and let narrow screens use their actual available width. */
.cart-scroll-hint { display: none; }
@media (max-width: 1000px) {
  #wrapper {
    width: 100%;
    max-width: 978px;
    padding: 0 16px;
    box-sizing: border-box;
  }
  #wrapper *, #cartHead * { box-sizing: border-box; }
  #wrapper img { max-width: 100%; height: auto; }
  #header, #footer, #wrapper .breadcrumbs, #main_images, #catBox, #news,
  #main, #main_page, #content, #one_column, #two_column, #category_main,
  #category_loop #catLists, #search_loop, #gelsTable, #main_page #note,
  #item_single, .cart, #main_member, #memberinfo, #complete, #agreement,
  #sidebar, #sidebar_other, #sidebar_cartmember, #faq, #one_colmuns,
  #content_search, #search_center, #main_news, #news_archive {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  #wrapper { overflow-wrap: anywhere; }
  #main_page > div { width: 100%; margin-left: 0; }
  #content_search #search_loop, #content_search .wp-pagenavi { width: 100%; }
  #faq #main, #faq #main section div, #faq #main section h2 {
    width: 100%; float: none;
  }
  #faq #main section h2 { margin-bottom: 12px; }
  #header { padding: 16px 0; }
  #header #logo { margin: 0 0 12px; }
  #header #nav_mini { position: static; display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
  #header #nav_mini li { float: none; padding: 0 12px 0 0; }
  #header #nav_mini #search input, #header #nav_mini #search input:focus { width: 150px; height: auto; }
  #header nav { clear: both; }
  #header #menu-global_nav { position: static; display: flex; flex-wrap: wrap; height: auto; margin: 12px 0; }
  #header #menu-global_nav > li { width: 33.333%; float: none; }
  #header #menu-global_nav > li a, #header #menu-global_nav > li li a { width: 100%; }
  #header #menu-global_nav > li ul { width: 100%; }
  #header ul.sub li ul.sub { position: static; }
  #header #account { display: flex; flex-wrap: wrap; float: none; gap: 12px; margin: 16px 0 0; }
  #header #account li { float: none; margin: 0; }
  #header .welcome { float: none; margin: 16px 0 0; line-height: 1.8; }
  #wrapper .breadcrumbs { margin: 16px 0; line-height: 2; }
  #main_images img { display: block; width: 100%; }
  #catBox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #catBox > div { position: relative; width: 100%; float: none; margin: 0; height: 125px; background: none; }
  #catBox > div::before {
    content: ''; position: absolute; top: 16px; left: 8px; width: 128px; height: 90px;
    background: url('../images/bg_Category.png') no-repeat; background-size: 126.6px 394.2px;
    pointer-events: none;
  }
  #catBox .catLights::before { background-position: 0 -102px; }
  #catBox .catArt::before { background-position: 0 -210px; }
  #catBox .catCare::before { background-position: 0 -306px; }
  #catBox h2, #catBox p { width: 50%; margin-left: auto; margin-right: 8px; }
  #catBox h2 { margin-top: 26px; font-size: 1.15em; }
  #catBox p { font-size: 0.78em; }
  #news > h1, #news header, #news header > h1, #news header time { float: none; width: auto; }
  #news header { border: none; padding: 8px 0 0; }
  #main, #content, #wrapper aside { float: none; }
  #wrapper aside { position: static !important; width: 100%; max-width: 100%; margin: 24px 0; }
  #category_loop .item, #search_loop .item { width: 50%; padding: 16px 8px; }
  #category_loop #catLists li { width: 50%; height: auto; line-height: 1.6; }
  #category_loop #catLists a { padding: 12px; }
  #footer { padding: 24px 0; }
  #footer #footer_nav { display: flex; flex-wrap: wrap; gap: 12px; float: none; margin: 0; }
  #footer #footer_nav li { display: block; margin: 0; padding-left: 10px; }
  #cartHead { height: auto; }
  #cartHead > div { width: 100%; padding: 0 16px; }
  #cartHead .shortest { display: none; }
  #cartHead .info, #cartHead .subTotal, #cartHead .toCart { position: static; width: auto; margin: 4px 0; }
  #cartHead .toCart { display: inline-block; }
  #item_single { display: flex; flex-direction: column; overflow: visible; }
  #item_single h1 { order: -1; }
  #item_single h1, #item_single #item_info, #item_single #cart > table, #img_wrap {
    width: 100%; max-width: 100%; float: none;
  }
  #item_img { position: relative; width: 100%; height: auto; aspect-ratio: 1; }
  #item_img ul { width: 100%; height: 100%; }
  #item_img li { width: 100%; height: 100%; }
  #item_img img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
  #item_img .zoomInOut { top: 50%; left: 50%; transform: translate(-50%, -50%); }
  #sub_img { margin-top: 12px; }
  #sub_img ul { display: flex; flex-wrap: wrap; gap: 8px; }
  #sub_img li { float: none; margin: 0; }
  #item_info form .skubutton, #item_info form .login a { max-width: 100%; }
  #wrapper input, #wrapper select, #wrapper textarea { max-width: 100%; }
  #wrapper input[type=text], #wrapper input[type=password], #wrapper input[type=email], #wrapper textarea { font-size: 16px; }
  #main_member { margin: 24px 0; }
  #inside-cart #cart { overflow: visible; }
  .cart-table-scroll, #rireki, #gelsTable { max-width: 100%; overflow-x: auto; }
  .cart-scroll-hint { display: block; margin: 8px 0; color: #666; font-size: 0.85em; }
  #cart_table { min-width: 620px; }
  #main_member .customer_form { width: 100%; }
  #main_member .customer_form th { width: 28%; }
  #main_member .customer_form td { min-width: 0; }
  #main_member .customer_form input[type=text], #main_member .customer_form input[type=password] { width: 100%; }
  #memberinfo > table, #newmember, #loginbox, #loginform, .loginbox { width: 100%; max-width: 100%; }
  #overLayer { width: calc(100% - 32px); max-width: 400px; margin: 0; transform: translate(-50%, -50%); }
  #agreement { padding: 16px; }
}
@media (max-width: 600px) {
  #catBox { grid-template-columns: minmax(0, 1fr); }
  #header #menu-global_nav > li { width: 50%; }
  #header #account a { min-height: 40px; padding: 10px 16px; }
  #company th, #company td { display: block; width: 100%; padding: 8px; }
  #faq #main, #faq #sidebar { width: 100%; float: none; }
  #faq hgroup { height: auto; background-size: contain; }
  #faq hgroup h1, #faq hgroup h2 { width: auto; margin-left: 0; }
  #toTop { right: 8px; bottom: 8px; }
}