@charset "UTF-8";
/* Responsive overrides for nakaya.co.jp.
   Load this file after common.css, no-saiji.css, and page-level inline styles. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
iframe,
object,
embed {
  max-width: 100%;
}

img {
  height: auto;
}

body {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

.mobile-menu-toggle {
  display: none;
}

.mobile-contact-bar {
  display: none;
}

.mobile-standalone-contact-bar {
  display: none;
}

@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  html {
    background: #fff;
  }

  body {
    min-width: 0;
    font-size: 14px;
    line-height: 1.65;
  }

  #wrapper,
  #contents,
  #footer {
    width: auto !important;
    max-width: 900px;
  }

  #wrapper {
    margin: 0 auto !important;
    padding: 0 14px 24px;
    height: auto;
  }

  #contents {
    float: none;
    background-image: none;
  }

  #header {
    height: auto;
    min-height: 0;
    padding: 14px 0 12px;
    margin-bottom: 8px;
  }

  #header h1, #header p.logo,
  #header img,
  #header > ul,
  #header > ul > li,
  #header > ul > li.last {
    float: none;
  }

  #header h1, #header p.logo {
    display: block;
    margin-bottom: 12px;
  }

  #header h1 img, #header p.logo img {
    display: block;
    width: min(191px, 54vw);
  }

  #header > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
  }

  #header > ul > li {
    border-right: 0;
    padding: 0;
    list-style: none;
  }

  #header > ul > li a {
    padding: 4px 0;
  }

  #global_navi,
  #global_navi ul,
  #global_navi ul li {
    float: none;
    width: auto !important;
    list-style: none;
    /* common.css #header li の漏れ(padding:0 5px / border-right:1px #999)を打ち消す。
       padding除去で主ナビ文字先頭を副ナビと揃え、border除去で右の縦線(.lastで途切れる線)を消す。
       ※横向き(landscape)の列区切り border-left は body.mobile-nav-open #global_navi li+li が上書きで維持。 */
    padding: 0 !important;
    border: 0 !important;
  }

  #global_navi ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: none;
  }

  #global_navi ul li a,
  #global_navi ul li.last a {
    width: auto !important;
    height: auto;
    min-height: 44px;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    overflow: visible;
    text-indent: 0;
    white-space: normal;
    color: #fff;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    background: #0050a0 !important;
  }

  #global_navi a[target="_blank"]::after,
  #header a[target="_blank"]::after,
  #side a[target="_blank"]::after,
  #bottom_contents a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.35em;
    vertical-align: -0.05em;
    background:
      linear-gradient(#fff, #fff) 28% 72% / 56% 2px no-repeat,
      linear-gradient(#fff, #fff) 28% 72% / 2px 56% no-repeat,
      linear-gradient(#fff, #fff) 75% 25% / 45% 2px no-repeat,
      linear-gradient(#fff, #fff) 75% 25% / 2px 45% no-repeat;
    border: 1px solid currentColor;
    border-radius: 0;
  }

  #header a[target="_blank"]::after,
  #side a[target="_blank"]::after,
  #bottom_contents a[target="_blank"]::after {
    background:
      linear-gradient(currentColor, currentColor) 28% 72% / 56% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 28% 72% / 2px 56% no-repeat,
      linear-gradient(currentColor, currentColor) 75% 25% / 45% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 75% 25% / 2px 45% no-repeat;
  }

  #global_navi ul li a:hover,
  #global_navi ul li a:focus {
    color: #fff;
    background: #0070c8 !important;
  }

  #topic_navi {
    line-height: 1.5;
    padding: 12px 0;
  }

  h2, h1.pgtitle {
    font-size: 22px;
  }

  h3,
  h3.bg-none,
  h3.s {
    float: none;
    width: auto;
    min-height: 28px;
    height: auto;
    padding: 6px 8px;
    text-indent: 0;
    line-height: 1.35;
  }

  table.info,
  #wrapper > div[style*="width:900px"],
  #wrapper > div[style*="width: 900px"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    padding: 10px !important;
  }

  #wrapper > div[style*="width:900px"] h3,
  #wrapper > div[style*="width: 900px"] h3 {
    text-align: left !important;
    font-size: 15px !important;
  }

  #flash,
  .carousel-banner {
    width: 100% !important;
    height: auto !important;
    padding: 3px;
    margin-bottom: 18px;
  }

  .carousel-banner img,
  .carousel-banner .banner,
  .bx-wrapper {
    width: 100% !important;
  }

  .carousel-banner .bx-wrapper,
  .carousel-banner .bx-viewport {
    height: min(392px, 43.95vw) !important;
    overflow: hidden !important;
  }

  .carousel-banner .bxslider,
  .carousel-banner .bxslider li {
    height: 100% !important;
  }

  .carousel-banner img,
  .carousel-banner .banner {
    height: 100% !important;
    object-fit: cover;
  }

  .bx-wrapper .bx-pager,
  .bx-wrapper .bx-controls-auto {
    bottom: -24px;
  }

  #left_contents,
  #left_contents02,
  .right_contents,
  #bottom_contents,
  #bottom_contents .right_contents {
    float: none !important;
    clear: both;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
  }

  #left_contents {
    padding-top: 12px !important;
  }

  #left_contents .news,
  #left_contents .event,
  #left_contents .scroll,
  #left_contents #content1,
  #left_contents #content2 {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }

  #left_contents .news,
  #left_contents .event {
    margin-bottom: 16px !important;
  }

  #left_contents .news dt,
  #left_contents .event dt,
  #left_contents .news dd,
  #left_contents .event dd {
    float: none;
    width: auto;
    margin: 0;
  }

  #left_contents .news dt,
  #left_contents .event dt {
    margin-top: 10px;
    font-weight: bold;
  }

  #left_contents .news dd,
  #left_contents .event dd {
    padding-bottom: 8px;
    border-bottom: 1px dotted #ccc;
  }

  .right_contents {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .right_contents .pick_up {
    float: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    margin: 0 !important;
    display: block;
    background: #fff;
  }

  .right_contents .pick_up .thumb {
    float: none;
    display: block;
    width: calc(100% - 8px);
    margin: 4px;
  }

  .right_contents .pick_up .text_area {
    width: auto;
    padding: 0 8px 10px;
    font-size: 12px;
    line-height: 1.55;
  }

  .right_contents .pick_up .text_area p {
    margin-top: 4px;
  }

  .right_contents .pick_up img.btn {
    left: auto;
    float: right;
  }

  #left_contents02 iframe {
    width: 100% !important;
    max-width: 100% !important;
  }

  #wrapper #bottom_contents.banner {
    padding-top: 8px !important;
  }

  #wrapper #bottom_contents.banner img {
    width: 100%;
    height: auto;
    margin: 8px 0 0 !important;
    display: block;
  }

  #bottom_contents.banner a {
    display: block;
    position: relative;
  }

  #bottom_contents.banner a[target="_blank"]::after {
    position: absolute;
    right: 8px;
    top: 12px;
    width: 18px;
    height: 18px;
    margin: 0;
    background:
      linear-gradient(#1d5b9f, #1d5b9f) 28% 72% / 56% 2px no-repeat,
      linear-gradient(#1d5b9f, #1d5b9f) 28% 72% / 2px 56% no-repeat,
      linear-gradient(#1d5b9f, #1d5b9f) 75% 25% / 45% 2px no-repeat,
      linear-gradient(#1d5b9f, #1d5b9f) 75% 25% / 2px 45% no-repeat,
      rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(29, 91, 159, 0.65);
    border-radius: 0;
  }

  #bottom_contents.banner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #bottom_contents.banner h3 {
    grid-column: 1 / -1;
  }

  #footer {
    text-align: left;
    line-height: 1.7;
    padding-bottom: 12px;
  }

  #footer img {
    float: none !important;
    display: block;
    margin: 0 0 12px !important;
  }

  #footer p {
    float: none !important;
    margin-top: 0 !important;
  }

  #side,
  #side_navi,
  #side_navi02,
  #shop_events,
  #brand,
  #product_all,
  #recruit,
  #faq,
  #privacy,
  #contact,
  #events,
  #news,
  #present_all,
  #shop_detail,
  #magazine,
  #campany,
  #map,
  #catalog,
  .popup #detail,
  .popup #recommend,
  .popup #news,
  .popup #present,
  .popup #access,
  .popup #event {
    float: none !important;
    width: 100% !important;
  }

  #side {
    margin: 0 0 18px;
    border-top: 0 !important;   /* common.css #side の#999上線を除去（スマホ：カテゴリ/サイドナビ上の線不要） */
  }

  #side_navi li,
  #side_navi02 li {
    width: auto;
    margin-left: 0;
    list-style: none;
  }

  #side_navi ul,
  #side_navi02 ul,
  #header > ul,
  #global_navi ul {
    list-style: none;
  }

  .title01,
  .title02,
  #product_all .title01,
  #magazine .title01 {
    float: none;
    width: 100% !important;
    height: auto !important;
  }

  .title01 h2,
  .title02 h2 {
    margin: 12px 0;
  }

  .list,
  #shop_events .list,
  #brand .list,
  #recruit .list,
  #faq .list,
  #privacy .list,
  #catalog .list,
  #contact .list,
  #events .list,
  #news .list,
  #present_all .list {
    float: none !important;
    width: 100% !important;
  }

  #shop_events .list p,
  #shop_events .list dl,
  #events .list p,
  #catalog .list p,
  #brand .list p,
  #news .list p,
  #present_all p,
  #events .list .event_txt_area,
  #shop_detail div.text01,
  #shop_detail .shop_info,
  #shop_detail .r_info,
  #magazine p.text01,
  #magazine p.text02,
  #magazine dl,
  #campany .wrap,
  #campany .text01,
  #campany dl,
  #recruit dl,
  #map dl {
    float: none !important;
    width: 100% !important;
  }

  #campany dt,
  #recruit dt,
  #map dt,
  .popup #access dt {
    float: none;
    width: auto;
    padding-bottom: 0;
  }

  #campany dd,
  #recruit dd,
  #campany dd.type02,
  #recruit dd.type02,
  #map dd,
  #map dd.first,
  #map dd.type02,
  .popup #access dd,
  .popup #access dd.type01,
  .popup #access dd.type02 {
    margin-left: 0;
    padding-left: 0;
  }

  #contact .box {
    width: 100% !important;
    font-size: 16px;
  }

  #contact [style*="width:680px"],
  #contact [style*="width: 680px"],
  #catalog [style*="width:680px"],
  #catalog [style*="width: 680px"] {
    width: 100% !important;
    max-width: 100%;
  }

  table,
  tbody,
  tr,
  td,
  th {
    max-width: 100%;
  }

  input,
  select,
  textarea {
    max-width: 100%;
  }

  iframe[src*="google"],
  iframe[src*="youtube"] {
    width: 100% !important;
  }

  #campany span,
  #recruit span {
    max-width: 100%;
  }

  #top-tategaki__grid-container {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #top-tategaki__grid-container > * {
    max-width: 100%;
  }

  #top-tategaki__item-box2-text,
  #top-tategaki__item-box3-img,
  #top-tategaki__item-box5-text {
    transform: translateX(10px);
  }

  .box,
  #contents .box.last {
    float: none;
    width: 100%;
    margin: 0 0 24px;
  }
}

@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #wrapper {
    padding-inline: 10px;
  }

  #header {
    padding-top: 6px;
    padding-bottom: 6px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 8px;
  }

  #header h1, #header p.logo {
    margin-bottom: 6px;
  }

  #header h1 img, #header p.logo img {
    width: min(176px, 48vw);
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #ccc;           /* UAデフォルトの強い枠を置換（線が強すぎる対策） */
    border-radius: 0;
    color: #111;
    font: bold 12px/1.2 'メイリオ', Meiryo, sans-serif;
    cursor: pointer;
  }

  .mobile-menu-toggle__icon,
  .mobile-menu-toggle__icon::before,
  .mobile-menu-toggle__icon::after {
    display: block;
    width: 18px;
    height: 1px;                     /* サイトの1px細線言語に合わせる（2pxは太見え） */
    background: currentColor;
    content: "";
  }

  .mobile-menu-toggle__icon {
    position: relative;
  }

  .mobile-menu-toggle__icon::before,
  .mobile-menu-toggle__icon::after {
    position: absolute;
    left: 0;
  }

  .mobile-menu-toggle__icon::before {
    top: -6px;
  }

  .mobile-menu-toggle__icon::after {
    top: 6px;
  }

  body.mobile-nav-open .mobile-menu-toggle__icon {
    background: transparent;
  }

  body.mobile-nav-open .mobile-menu-toggle__icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  body.mobile-nav-open .mobile-menu-toggle__icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  #header > ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-size: 10px;
    margin: 0 -10px 4px;
    padding: 0 10px 2px;
    grid-column: 1 / -1;
  }

  body:not(.mobile-nav-open) #header > ul > li:not(.last),
  body:not(.mobile-nav-open) #global_navi {
    display: none;
  }

  body:not(.mobile-nav-open) #header > ul {
    display: none;
    overflow: visible;
    padding-bottom: 0;
  }

  body:not(.mobile-nav-open) #header > ul > li.last {
    width: 100%;
    padding: 0;
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
  }

  #header > ul > li.last a {
    display: inline-flex !important;
    align-items: center;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111;
    font-weight: bold;
    text-decoration: none;
  }

  .mobile-phone-hours {
    display: inline-block;
    color: #555;
    font-size: 10px;
    line-height: 1.2;
  }

  body.mobile-nav-open #header > ul > li.last {
    display: none !important;
  }

  #header > ul > li.last {
    display: none !important;
  }

  .mobile-contact-bar {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 4px 0 0;
    font-size: 11px;
    line-height: 1.3;
    color: #333;
  }

  .mobile-standalone-contact-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 9px;
    width: 100%;
    padding: 7px 10px;
    border-bottom: 1px solid #e5e5e5;
    background: #fafafa;
    color: #333;
    font-size: 11px;
    line-height: 1.3;
  }

  .mobile-contact-bar__phone {
    color: #111 !important;
    font-weight: bold;
    text-decoration: none;
  }

  .mobile-contact-bar__hours {
    color: #555;
  }

  .mobile-contact-bar__contact {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border: 1px solid #cfcfcf;
    background: #f7f7f7;
    color: #0050a0 !important;
    font-weight: bold;
    text-decoration: none;
  }

  body.mobile-nav-open #global_navi {
    display: block;
  }

  #header > ul::-webkit-scrollbar,
  #global_navi ul::-webkit-scrollbar,
  #side_navi ul::-webkit-scrollbar,
  #side_navi02 ul::-webkit-scrollbar {
    display: none;
  }

  #header > ul > li.last {
    flex: 0 0 auto;
    font-weight: bold;
    align-self: center;
    padding-inline: 2px;
  }

  #header > ul > li a {
    width: auto;
    min-height: 28px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border: 1px solid #ddd;
    background: #f7f7f7;
    text-align: center;
    white-space: nowrap;
  }

  /* Open menu = ONE continuous, in-flow scrollable panel. No fixed positioning,
     no hard-coded tops, no body scroll-lock -> the page scrolls and every item
     (incl. the last) is reachable & clickable. nav.js moves #global_navi under
     the hamburger so the primary nav sits above the secondary list; their
     borders join into a single panel. */
  body.mobile-nav-open #header > ul,
  body.mobile-nav-open #global_navi {
    position: static;
    left: auto;
    right: auto;
    z-index: auto;
  }

  /* primary + secondary join into ONE continuous panel (no cards, no radius);
     the page scrolls so every item stays reachable. */
  body.mobile-nav-open #global_navi {
    grid-column: 1 / -1;                 /* full width inside the header grid */
    display: block;
    overflow: visible;
    max-height: none;
    margin: 0;
    background: #fff;
    border: 1px solid #cfcfcf;
    border-bottom: 0;
    box-shadow: none;
  }

  body.mobile-nav-open #header > ul {
    grid-column: 1 / -1;
    display: block;
    grid-template-columns: none;
    gap: 0;
    overflow: visible;
    max-height: none;
    margin: -8px 0 0;                    /* cancel the header grid row-gap -> joins #global_navi */
    padding: 0;                          /* no left inset -> 副ナビ文字先頭を主ナビ(grid)と揃える */
    background: #fff;
    border: 0;                            /* 副ナビ縦線(左右#cfcfcf枠)を除去。下端のみ残す＝横線で統一 */
    border-bottom: 1px solid #cfcfcf;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  }

  #global_navi ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: visible;
    margin: 0;
    padding: 0 10px;
    border: 0;
  }

  #global_navi ul li a,
  #global_navi ul li.last a {
    min-width: 0;
    min-height: 50px;
    padding: 9px 12px 8px;
    font-size: 14px;
    font-weight: bold;
    border-right: 0;
    border-bottom: 1px solid #e5e5e5;
    white-space: normal;
    align-items: flex-start;
    color: #111;
    background: #fff !important;
    border-left: 5px solid #1d5b9f;
    text-align: left;
    flex-direction: column;
    justify-content: center;
  }

  /* push-down menu: the page scrolls normally — no fixed white overlay and no
     body scroll-lock (the lock + fixed panels previously hid the lower items). */
  body.mobile-nav-open::before {
    content: none;
  }

  body.mobile-nav-open #header,
  body.mobile-nav-open .mobile-menu-toggle {
    position: relative;
    z-index: 10001;
  }

  body.mobile-nav-open #header > ul > li {
    display: block;
    width: 100%;
  }

  body.mobile-nav-open #header > ul > li.last {
    display: none;
  }

  body.mobile-nav-open #header > ul > li a {
    justify-content: flex-start;
    min-height: 46px;
    margin: 0;
    padding: 11px 12px;                   /* 5px border-left + 12px = same text start as #global_navi */
    border: 0;
    border-bottom: 1px solid #e5e5e5;     /* single divider per row */
    border-left: 5px solid transparent;
    background: #fff;
    color: #111;
    font-size: 13px;                      /* secondary nav: a step smaller than primary */
  }

  body.mobile-nav-open #header > ul > li:last-child a {
    border-bottom: 0;                      /* avoid doubling with the panel's bottom border */
  }

  body.mobile-nav-open #global_navi li a::after {
    display: block;
    width: auto;
    height: auto;
    margin-top: 2px;
    margin-left: 0;
    color: #6f6f6f;
    font: 10px/1.2 Arial, sans-serif;
    letter-spacing: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  body.mobile-nav-open #global_navi li a:hover,
  body.mobile-nav-open #global_navi li a:focus {
    color: #111;
    background: #f5f8fb !important;
  }

  body.mobile-nav-open #global_navi li.top a::after {
    content: "TOP";
  }

  body.mobile-nav-open #global_navi li.info a::after {
    content: "SHOP & EVENT INFO";
  }

  body.mobile-nav-open #global_navi li.brand a::after {
    content: "NAKAYA BRAND";
  }

  body.mobile-nav-open #global_navi li.shop a::after {
    content: "ONLINE SHOP";
  }

  body.mobile-nav-open #global_navi li.maga a::after {
    content: "MAIL MAGAZINE";
  }

  body.mobile-nav-open #global_navi a[target="_blank"] {
    position: relative;
    padding-right: 34px;
  }

  body.mobile-nav-open #global_navi a[target="_blank"]::before {
    content: "";
    position: absolute;
    right: 12px;
    top: 15px;
    width: 12px;
    height: 12px;
    border: 1px solid #1d5b9f;
    background:
      linear-gradient(#1d5b9f, #1d5b9f) 25% 75% / 55% 2px no-repeat,
      linear-gradient(#1d5b9f, #1d5b9f) 25% 75% / 2px 55% no-repeat,
      linear-gradient(#1d5b9f, #1d5b9f) 75% 25% / 45% 2px no-repeat,
      linear-gradient(#1d5b9f, #1d5b9f) 75% 25% / 2px 45% no-repeat;
  }

  .mobile-menu-toggle:focus-visible,
  body.mobile-nav-open #header a:focus-visible,
  body.mobile-nav-open #global_navi a:focus-visible,
  #side_navi a:focus-visible,
  #side_navi02 a:focus-visible {
    outline: 2px solid #f2a900;
    outline-offset: 2px;
  }

  #topic_navi {
    display: none;
  }

  #topic_navi:has(#contents) {
    display: block;
    height: auto;
    line-height: normal;
    font-size: 0;
  }

  #topic_navi:has(#contents) > a {
    display: none;
  }

  #topic_navi:has(#contents) #contents {
    font-size: 14px;
  }

  #wrapper > div[style*="width:900px"],
  #wrapper > div[style*="width: 900px"] {
    margin-top: 2px;
    margin-bottom: 10px !important;
    padding: 4px 0 6px !important;
    min-height: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
    background: transparent !important;
  }

  #wrapper > div[style*="width:900px"] h3,
  #wrapper > div[style*="width: 900px"] h3 {
    font-size: 13px !important;
    line-height: 1.35;
    min-height: 0;
    padding: 0;
    margin: 0;
    font-weight: bold;
    background: transparent !important;
    border: 0 !important;
  }

  #wrapper > div[style*="width:900px"] h3 a,
  #wrapper > div[style*="width: 900px"] h3 a {
    display: flex;
    align-items: center;
    min-height: 22px;
    text-decoration: none;
    border-bottom: 0;
    color: #315f91 !important;
  }

  #side_navi ul,
  #side_navi02 ul {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -10px;
    padding: 0 10px 6px;
  }

  #side_navi li,
  #side_navi02 li {
    flex: 0 0 auto;
    border-bottom: 0;
    line-height: 1.3;
  }

  #side_navi a,
  #side_navi02 a {
    display: block;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: #f7f7f7;
    white-space: nowrap;
  }

  #left_contents dd a,
  #news .list a,
  #map a,
  #contact a,
  #faq a,
  #events a,
  #shop_events a {
    text-underline-offset: 2px;
  }

  #left_contents dd a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 4px 0;
  }

  #map a[href*="youtube"],
  #contact a[href*="contact"],
  #contact a[href*="catalog"],
  #faq a[href*="se/"],
  #faq a[href*="contact"] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }

  .bx-wrapper .bx-pager.bx-default-pager a {
    width: 14px;
    height: 14px;
    margin: 0 7px;
    border-radius: 50%;
  }

  .right_contents .pick_up .text_area {
    font-size: 13px;
  }

  #bottom_contents.banner a {
    margin-bottom: 4px;
  }

  #bottom_contents.banner {
    display: block;
  }

  .popup #detail div.text01,
  .popup #detail table,
  .popup #detail div.text02,
  .popup #detail div.text02 a,
  .popup #news table,
  .popup #event table,
  .popup #news p.text02,
  .popup #event p.text02,
  .popup #present p.text01 {
    float: none !important;
    width: 100% !important;
    margin-right: 0;
  }
}

@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #header {
    border-bottom: 0;
  }

  .mobile-contact-bar {
    width: 100%;
    margin-top: 6px;
    padding: 7px 0;
    border: 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 0;
    background: transparent;
    gap: 5px 9px;
  }

  .mobile-contact-bar__phone {
    letter-spacing: 0;
    line-height: 1.2;
  }

  .mobile-contact-bar__hours {
    flex: 1 1 auto;
    min-width: 112px;
    color: #4a4a4a;
    line-height: 1.2;
  }

  .mobile-contact-bar__contact {
    height: auto;
    min-height: 30px;
    margin-left: auto;
    padding: 5px 10px;
    border-color: #ccd6df;
    background: #fff;
    color: #174f86 !important;
    line-height: 1.2;
    justify-content: center;
  }

  h2, h1.pgtitle,
  .title01 h2,
  .title02 h2 {
    letter-spacing: 0;
  }

  h3,
  h3.bg-none,
  h3.s,
  #bottom_contents.banner h3 {
    display: block;
    min-height: 0;
    margin: 0 0 10px;
    padding: 7px 0 8px;
    border-left: 0;
    border-bottom: 1px solid #e5e5e5;
    background: transparent;
    color: #222;
    font-size: 15px;
    line-height: 1.35;
  }

  #left_contents .news dt,
  #left_contents .event dt {
    margin-top: 8px;
    color: #333;
    line-height: 1.45;
  }

  #left_contents .news dd,
  #left_contents .event dd {
    padding-bottom: 10px;
    line-height: 1.65;
  }

  #left_contents .news h3,
  #left_contents .event h3 {
    color: #174f86;
    font-weight: bold;
  }

  #left_contents .news h3 span,
  #left_contents .event h3 span {
    margin-left: 16px;
    color: #666;
    font-size: 12px;
    font-weight: normal;
  }

  .right_contents {
    gap: 10px;
  }

  .right_contents .pick_up {
    border: 1px solid #e0e0e0;
  }

  .right_contents .pick_up .thumb {
    width: 100%;
    margin: 0;
  }

  .right_contents .pick_up .text_area {
    padding: 8px 10px 10px;
  }

  #wrapper #bottom_contents.banner {
    gap: 10px;
    border-top: 0;
    padding-top: 0 !important;
  }

  #bottom_contents.banner a {
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background: #fff;
  }

  #wrapper #bottom_contents.banner img {
    margin: 0 !important;
  }

  #bottom_contents.banner a[target="_blank"]::after {
    right: 6px;
    top: 6px;
  }

  #shop_events .list {
    margin: 0 !important;
    padding: 16px 0 18px !important;
    border: 0;
    border-top: 1px solid #e5e5e5;     /* 区切り線はセクションタイトルの上に置く */
    background: transparent;
    line-height: 1.7;
  }

  #shop_events .page-title + .list {
    border-top: 0;                      /* 先頭セクション(facebook等)は線なし */
  }

  #shop_events {
    border-top: 0 !important;
  }

  #shop_events .list .title02 {
    display: block;
    margin: 0 0 10px;
  }

  #shop_events .list .title02 h2 {
    display: flex;
    float: none !important;
    align-items: center;
    gap: 10px;
    width: 100% !important;
    height: auto !important;
    margin: 0;
    padding: 0 0 6px;
    border-bottom: 0;                   /* タイトル下線は廃止。区切り線はセクションの上(.list border-top)に統一 */
    color: #222;
    font-size: 19px;
    line-height: 1.25;
  }

  #shop_events .list .title02 h2 br {
    display: none;
  }

  #shop_events .list .title02 a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
  }

  #shop_events .list .title02 img {
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    max-width: none;
    object-fit: contain;
  }

  #shop_events .list .title02 + div,
  #shop_events .list .text03 {
    clear: both;
    width: 100% !important;
  }

  #shop_events .list br {
    line-height: 1.3;
  }
}

@media screen and (max-width: 560px) {
  #wrapper {
    padding-inline: 12px;
  }

  #header {
    padding-top: 10px;
    margin-bottom: 6px;
  }

  #header h1, #header p.logo {
    margin-bottom: 8px;
  }

  .mobile-contact-bar,
  .mobile-standalone-contact-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 7px;
    font-size: 10.5px;
  }

  .mobile-contact-bar__phone,
  .mobile-contact-bar__hours {
    min-width: 0;
  }

  .mobile-contact-bar__contact {
    grid-row: 1 / 3;
    grid-column: 2;
    white-space: nowrap;
    align-self: stretch;
  }

  .carousel-banner {
    margin-bottom: 14px;
  }

  #left_contents {
    padding-top: 8px !important;
  }

  #left_contents .news,
  #left_contents .event,
  #left_contents02,
  .right_contents,
  #bottom_contents {
    margin-bottom: 14px !important;
  }

  #shop_events .list {
    padding: 12px 10px !important;
  }

  #shop_events .list .title02 h2 {
    font-size: 18px;
  }

  #bottom_contents.banner {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #contents,
  #brand,
  #events,
  #contact,
  #catalog,
  #faq,
  #privacy,
  #recruit,
  #campany,
  #map,
  #news,
  #magazine,
  #product_all {
    color: #222;
  }

  #product_all {
    border-top: 0;
  }

  #brand h2,
  #events h2,
  #contact h2,
  #catalog h2,
  #faq h2,
  #privacy h2,
  #recruit h2,
  #campany h2,
  #map h2,
  #news h2,
  #magazine h2,
  #product_all h2 {
    margin: 0 0 12px;
    color: #222;
    font-size: 21px;
    line-height: 1.45;
  }

  #contact .list h2,
  #catalog .list h2,
  #faq .list h2,
  #privacy .list h2,
  #recruit .list h2,
  #campany .list h2,
  #map .list h2,
  #magazine .list h2 {
    font-size: 19px;
  }

  .page-title {
    clear: both;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 16px !important;
    padding: 12px 0 0 !important;
    color: #777;
    font-size: 12px;
    line-height: 1.45;
  }

  .page-title h2 {
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    color: #222;
    font-size: 24px;
    line-height: 1.35;
  }

  #contact .list,
  #catalog .list,
  #faq .list,
  #privacy .list,
  #recruit .list,
  #campany .list,
  #map .list,
  #news .list,
  #magazine .list {
    padding: 0 0 18px !important;
    margin: 0 0 18px !important;
    border-top: 0 !important;            /* 濃い#999上線を消す。薄#e5e5e5下線1本のみ＝タイトル直下の線も除去 */
    border-bottom: 1px solid #e5e5e5;
  }

  #contact .list:last-child,
  #catalog .list:last-child,
  #faq .list:last-child,
  #privacy .list:last-child,
  #recruit .list:last-child,
  #campany .list:last-child,
  #map .list:last-child,
  #news .list:last-child,
  #magazine .list:last-child {
    border-bottom: 0;
  }

  #contact .list p,
  #catalog .list p,
  #faq .list p,
  #privacy .list p,
  #recruit .list p,
  #campany .list p,
  #map .list p,
  #news .list p,
  #magazine .list p {
    line-height: 1.75;
  }

  #contact .list a,
  #catalog .list a,
  #faq .list a,
  #privacy .list a,
  #recruit .list a,
  #campany .list a,
  #map .list a,
  #news .list a,
  #magazine .list a {
    color: #174f86;
    text-underline-offset: 3px;
  }
  /* 更新情報(ニュース一覧)リンク：下線はオンマウス時のみ */
  #news .list a, #news .list .name a { text-decoration: none; }
  #news .list a:hover, #news .list .name a:hover { text-decoration: underline; }

  #side_navi,
  #side_navi02 {
    margin-bottom: 18px;
  }

  #side_navi a,
  #side_navi02 a {
    border-color: #e1e1e1;
    background: #fafafa;
    color: #174f86;
    font-weight: bold;
  }

  #side_navi li.active a,
  #side_navi02 li.active a {
    border-color: #c8d5e3;
    background: #f3f7fb;
    color: #111;
  }

  #brand .list {
    padding: 0 0 20px !important;
    margin: 0 0 20px !important;
    border-bottom: 1px solid #e5e5e5;
  }

  #brand .list:last-child {
    border-bottom: 0;
  }

  #brand .title02 {
    margin-bottom: 8px;
  }

  #brand .title02 h2 {
    margin: 0 0 6px;
    font-size: 22px;
  }

  #brand .img_box {
    margin: 6px 0 10px;
  }

  #brand .list p {
    margin: 0;
    line-height: 1.7;
  }

  #events .title01 {
    margin-bottom: 16px;
  }

  #events h3.s {
    margin-top: 4px;
  }

  #events .list {
    padding: 18px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #e5e5e5;
  }

  #events .list .img_box {
    float: none !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }

  #events .list .img_box img {
    width: min(100%, 240px);
    height: auto;
    display: block;
  }

  #events .event_txt_area {
    margin: 0 !important;
  }

  #events .date dt,
  #events p.name {
    color: #174f86;
    font-weight: bold;
  }

  #events dl {
    margin: 8px 0;
  }

  #events dt {
    font-weight: bold;
  }

  ul.filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
    margin: 0 0 22px !important;
    padding: 0 !important;
    list-style: none;
  }

  ul.filter h2 {
    flex: 0 0 100%;
    margin: 0 0 2px;
    font-size: 21px;
  }

  ul.filter li {
    display: block;
    margin: 0 !important;
  }

  ul.filter a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid #ddd;
    background: #fafafa;
    color: #555;
    text-decoration: none;
    line-height: 1.2;
  }

  .counter {
    margin: 10px 0 8px;
    font-weight: bold;
    text-align: right;
  }

  #gara_index .tbl {
    width: 100% !important;
    margin: 0 0 18px !important;
    /* table already draws its own bottom cell border (#ccc); the extra
       divider here doubled it, so spacing is handled by margin alone */
  }

  #gara_index .gara-img {
    width: 100% !important;
    max-width: 270px;
    height: auto;
  }
}

@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #side_navi ul,
  #side_navi02 ul {
    gap: 0;
    padding-bottom: 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }

  #side_navi li,
  #side_navi02 li {
    border-bottom: 0;
    background-image: none !important;
  }

  /* type02/type03 carry their own #999 top/bottom border in common.css
     (specificity 1,1,1) which doubled with the ul frame on mobile */
  #side_navi li.type02,
  #side_navi li.type03,
  #side_navi02 li.type02,
  #side_navi02 li.type03 {
    border-top: 0;
    border-bottom: 0;
  }

  #side_navi a,
  #side_navi02 a {
    min-height: 40px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    background-image: none !important;
  }

  #side_navi li.active a,
  #side_navi02 li.active a {
    border-bottom-color: #174f86;
    background: transparent;
  }

  ul.filter {
    gap: 0 14px;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #e5e5e5;
  }

  ul.filter a {
    min-height: 28px;
    padding: 2px 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
  }

  ul.filter a:hover,
  ul.filter a:focus {
    border-bottom-color: #174f86;
  }

  #contact .list,
  #catalog .list,
  #faq .list,
  #privacy .list,
  #recruit .list,
  #campany .list,
  #map .list,
  #news .list,
  #magazine .list,
  #brand .list,
  #events .list,
  #shop_events .list {
    background: transparent;
  }

  .right_contents .pick_up,
  #bottom_contents.banner a {
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    background: transparent;
  }

  #events .list .img_box {
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e5e5;
  }

  #events .event_txt_area {
    padding-top: 2px;
  }

  #side:has(+ #events) #side_navi ul {
    border-bottom: 0;
  }

  #events h3.s {
    border-bottom-color: #eeeeee;
  }
}

@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #wrapper {
    padding-right: 12px;
    padding-left: 12px;
    padding-bottom: 24px;
  }

  #header {
    padding-top: 12px;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  #header h1, #header p.logo {
    margin-bottom: 8px;
  }

  .mobile-menu-toggle {
    min-height: 40px;
    padding: 8px 12px;
  }

  .mobile-contact-bar {
    margin-top: 8px;
    padding: 8px 0;
    gap: 4px 8px;
  }

  .mobile-contact-bar__contact {
    min-height: 28px;
    padding: 4px 8px;
    border-width: 0 0 1px;
    background: transparent;
    align-self: center;
  }

  #wrapper > div[style*="width:900px"],
  #wrapper > div[style*="width: 900px"] {
    margin-top: 0;
    margin-bottom: 12px !important;
    padding: 4px 0 8px !important;
  }

  #wrapper > div[style*="width:900px"] h3 a,
  #wrapper > div[style*="width: 900px"] h3 a {
    min-height: 24px;
  }

  h3,
  h3.bg-none,
  h3.s,
  #bottom_contents.banner h3 {
    margin-bottom: 12px;
    padding: 8px 0;
  }

  #side_navi,
  #side_navi02 {
    margin-bottom: 16px;
  }

  #side_navi ul,
  #side_navi02 ul {
    gap: 0;
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 12px;
    padding-left: 12px;
    border-top: 0;
  }

  #side_navi a,
  #side_navi02 a {
    min-height: 40px;
    padding: 8px 12px;
  }

  #left_contents,
  #left_contents02,
  .right_contents,
  #bottom_contents {
    margin-bottom: 16px !important;
  }

  #left_contents .news dt,
  #left_contents .event dt {
    margin-top: 8px;
  }

  #left_contents .news dd,
  #left_contents .event dd {
    padding-bottom: 8px;
  }

  #contact .list,
  #catalog .list,
  #faq .list,
  #privacy .list,
  #recruit .list,
  #campany .list,
  #map .list,
  #news .list,
  #magazine .list,
  #brand .list,
  #events .list,
  #shop_events .list {
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
  }

  #shop_events .list {
    padding-top: 16px !important;
  }

  #shop_events .list .title02 {
    margin-bottom: 8px;
  }

  #shop_events .list .title02 h2 {
    gap: 12px;
    padding-bottom: 8px;
  }

  #brand .title02 h2 {
    margin-bottom: 8px;
  }

  #brand .img_box {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  #events .title01 {
    margin-bottom: 16px;
  }

  #events .list {
    padding-top: 16px !important;
  }

  #events .list:last-of-type {
    border-bottom: 0;
  }

  #events .list .img_box {
    margin-bottom: 12px !important;
    padding-bottom: 12px;
  }

  ul.filter {
    gap: 0 12px;
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
  }

  ul.filter h2 {
    margin-bottom: 4px;
  }

  ul.filter a {
    min-height: 32px;
    padding: 4px 0;
  }

  .counter {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  #gara_index .tbl {
    margin-bottom: 16px !important;
  }

  #side:has(+ #events) {
    margin-bottom: 24px;
  }

  #side:has(+ #events) #side_navi ul {
    border-bottom: 0;
  }

  #events .title01 {
    margin-bottom: 24px;
  }

  #events h3.s {
    border-bottom: 0;
    margin-bottom: 20px;
  }

  #events .list .img_box {
    border-bottom: 0;
    border: 0 !important;
    padding-bottom: 0;
    margin-bottom: 16px !important;
  }

  #events .list .img_box img {
    border: 0 !important;
  }

  #side:has(+ #events),
  #side:has(+ #shop_events):not(.empty-side-menu),
  #side:has(+ #shop_detail) {
    border-bottom: 0 !important;
    border-top: 0 !important;
    background-image: none !important;
    margin-bottom: 12px !important;
  }

  #side:has(+ #events) #side_navi ul,
  #side:has(+ #shop_events):not(.empty-side-menu) #side_navi ul,
  #side:has(+ #shop_detail) #side_navi ul {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  #side:has(+ #events) #side_navi li,
  #side:has(+ #shop_events):not(.empty-side-menu) #side_navi li,
  #side:has(+ #shop_detail) #side_navi li {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  #side:has(+ #events) #side_navi li + li,
  #side:has(+ #shop_events):not(.empty-side-menu) #side_navi li + li,
  #side:has(+ #shop_detail) #side_navi li + li {
    border-left: 1px solid #e5e5e5 !important;
  }

  #side:has(+ #events) #side_navi a,
  #side:has(+ #shop_events):not(.empty-side-menu) #side_navi a,
  #side:has(+ #shop_detail) #side_navi a {
    border-top: 0 !important;
  }

  #events .title01 {
    margin-bottom: 24px !important;
  }

  #events .title01 h2 {
    margin-bottom: 4px;
  }

  #events .title01 {
    color: #777;
    font-size: 12px;
  }

  #events h3.s {
    padding: 0;
    margin: 0 0 24px;
    border: 0;
    background: transparent;
  }

  #events .list {
    padding-top: 0 !important;
    padding-bottom: 24px !important;
    margin-bottom: 24px !important;
  }

  #events .list:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #side:has(+ #events) #side_navi a,
  #side:has(+ #shop_events):not(.empty-side-menu) #side_navi a,
  #side:has(+ #shop_detail) #side_navi a {
    min-height: 36px;
    padding: 8px 10px;
    border-bottom: 0;
    color: #222;
    font-size: 13px;
    font-weight: normal;
  }

  #side:has(+ #events) #side_navi li.active a,
  #side:has(+ #shop_events):not(.empty-side-menu) #side_navi li.active a,
  #side:has(+ #shop_detail) #side_navi li.active a {
    border-bottom: 0;
    color: #174f86;
    font-weight: bold;
  }

  #events .title01 {
    font-size: 0;
    padding-top: 12px;
  }

  #events {
    border-top: 0 !important;
    background-image: none !important;
  }

  #events .title01 h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.35;
  }

  #events h3.s {
    display: block;
    min-height: 0;
    margin: 0 0 12px;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    background: transparent;
    color: #222;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.35;
  }

  /* Keep local menus simple: the menu frame supplies the line, active items use color. */
  #side_navi a,
  #side_navi02 a {
    border-bottom: 0 !important;
    color: #222;
    font-weight: normal;
  }

  #side_navi li.active a,
  #side_navi02 li.active a {
    color: #174f86;
    font-weight: bold;
  }

  #side.empty-side-menu {
    display: none;
  }

  #side:has(#side_navi ul:not(:has(li))),
  #side:has(#side_navi02 ul:not(:has(li))) {
    display: none;
  }

  #global_navi a[target="_blank"]::after,
  #header a[target="_blank"]::after,
  #side a[target="_blank"]::after,
  #bottom_contents a[target="_blank"]::after {
    background:
      linear-gradient(#fff, #fff) 0 0 / 100% 100% no-repeat;
    border-color: #8a8a8a;
    box-shadow: -3px 3px 0 -1px #fff, -3px 3px 0 0 #8a8a8a;
  }

  #bottom_contents.banner a[target="_blank"]::after {
    background:
      rgba(255, 255, 255, 0.94);
    border-color: rgba(138, 138, 138, 0.8);
    box-shadow: -4px 4px 0 -1px rgba(255, 255, 255, 0.94), -4px 4px 0 0 rgba(138, 138, 138, 0.8);
  }

  body.mobile-nav-open #global_navi a[target="_blank"]::before {
    background:
      linear-gradient(#fff, #fff) 0 0 / 100% 100% no-repeat;
    border-color: #8a8a8a;
    box-shadow: -3px 3px 0 -1px #fff, -3px 3px 0 0 #8a8a8a;
  }

  #news .list {
    display: block;
    clear: both;
    overflow: hidden;
  }

  #news .title01 {
    margin-bottom: 24px !important;
  }

  #news .title01 + dl {
    margin-top: 0 !important;
  }

  #news .list .img_box {
    float: none !important;
    width: 100% !important;
    max-width: 260px;
    aspect-ratio: 3 / 2;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0;
    background: #fff;
    overflow: hidden;
  }

  #news .list .img_box a,
  #news .list .img_box img {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }

  #news .list .img_box img {
    border: 0 !important;
    margin: 0 !important;
    object-fit: contain;
    vertical-align: top;
  }

  #news .list p.date,
  #news .list p.name,
  #news .list p.text {
    clear: both;
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  #wrapper #bottom_contents.banner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #bottom_contents.banner h3 {
    grid-column: 1 / -1;
  }

  #bottom_contents.banner a {
    width: 100% !important;
  }

  #wrapper #bottom_contents.banner img {
    width: 100% !important;
    height: auto !important;
  }

  #flash,
  .carousel-banner {
    margin-bottom: 8px !important;
  }

  .bx-wrapper .bx-pager,
  .bx-wrapper .bx-controls-auto {
    display: none !important;
  }

  #flash + a img {
    margin-top: 8px !important;
  }

  #side:not(.empty-side-menu) + #shop_events .list {
    clear: both;
    padding: 16px 0 !important;
  }

  #side:not(.empty-side-menu) + #shop_events .list .title02 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    margin: 0 0 12px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
  }

  #side:not(.empty-side-menu) + #shop_events .list .title02 h2 {
    display: block;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 0;
    font-size: 19px;
    line-height: 1.35;
  }

  #side:not(.empty-side-menu) + #shop_events .list .title02 > br {
    display: none;
  }

  #side:not(.empty-side-menu) + #shop_events .list .title02 > a {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    justify-self: end;
    align-self: center;
  }

  #side:not(.empty-side-menu) + #shop_events .list .title02 img {
    width: auto !important;
    height: auto !important;
    max-width: 56px;
    margin: 0 !important;
  }

  #side:not(.empty-side-menu) + #shop_events .list .img_box {
    float: none !important;
    width: 100% !important;
    max-width: 240px;
    margin: 0 auto 16px !important;
    padding: 0 !important;
  }

  #side:not(.empty-side-menu) + #shop_events .list .img_box img {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  #side:not(.empty-side-menu) + #shop_events .list dl {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0 !important;
    width: 100% !important;
  }

  #side:not(.empty-side-menu) + #shop_events .list dt,
  #side:not(.empty-side-menu) + #shop_events .list dd {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    line-height: 1.7;
  }

  #side:not(.empty-side-menu) + #shop_events .list dt {
    color: #333;
    font-weight: bold;
  }

  #side:not(.empty-side-menu) + #shop_events .list dd {
    color: #222;
  }

  #side:not(.empty-side-menu) + #shop_events .list .addr {
    margin: 0 !important;
  }

  #side:not(.empty-side-menu) + #shop_events .list .addr img {
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 6px !important;
    vertical-align: -3px;
  }

  #brand .title02 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    margin: 0 0 12px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
  }

  #brand .title02 h2 {
    display: block;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 0;
    font-size: 22px;
    line-height: 1.35;
  }

  #brand .title02 > br {
    display: none;
  }

  #brand .title02 > a {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    justify-self: end;
    align-self: center;
  }

  #brand .title02 img {
    width: auto !important;
    height: auto !important;
    max-width: 72px;
    margin: 0 !important;
  }

  #brand .img_box {
    float: none !important;
    width: 100% !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    border: 0 !important;          /* 一覧の商品画像は枠で囲わない（common.cssの#999枠を除去） */
    text-align: center;
  }

  #brand .img_box img {
    display: block;
    width: auto !important;
    max-width: min(100%, 240px);
    height: auto !important;
    margin: 0 auto !important;
  }

  #product_all .title01 {
    height: auto !important;
    margin: 0 0 8px !important;
    padding: 12px 0 0 !important;
    border-bottom: 0;
  }

  #product_all .title01 h2 {
    margin-bottom: 2px;
  }

  #product_all > br {
    display: none;
  }

  /* 江戸一カタログ: PDFサムネを詰めたカードグリッドに（縦長の無駄余白を圧縮） */
  #product_all {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px 10px;
    align-items: start;
  }
  /* brandブランド一覧（.box に商品名.product/説明.text あり）は行内でカードを等高に揃える。
     江戸一2019(PDFカード, .product/.text なし)は従来どおり align-items:start で詰める。 */
  #product_all:has(.box .product) {
    align-items: stretch;
  }
  #product_all > *:not(.box) {
    grid-column: 1 / -1;   /* タイトル・一括DL・注記類は全幅で保護 */
  }
  #product_all .box,
  #product_all .box.last {
    display: block;
    grid-template-columns: none;
    clear: none;
    width: auto !important;
    min-height: 0;
    margin: 0 !important;
    padding: 4px 4px 8px !important;      /* >=4px around the image; caption sits INSIDE the frame */
    border: 1px solid #e0e0e0;            /* one frame wraps image + caption */
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    text-align: center;
  }
  #product_all .box a {
    display: block;
    text-decoration: none;
    color: #174f86;
    font-size: 12px;
    line-height: 1.45;
  }
  #product_all .box .img_box {
    grid-row: auto;
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    border: 0;
    text-align: center;
  }
  #product_all .box .img_box img {
    display: block;
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    max-height: none;
    margin: 0 0 6px !important;  /* gap to the caption below */
    border: 0;                   /* frame is on the .box card; image keeps a 4px inset */
    box-sizing: border-box;
    object-fit: contain;
  }

  #product_all .box p {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    line-height: 1.65;
  }

  #product_all .box .product {
    color: #174f86;
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
    align-self: end;
  }

  #product_all .box .text {
    color: #333;
    font-size: 13px;
    margin-top: 0 !important;
    text-align: left;
    align-self: start;
  }

  #side_navi02 {
    position: relative;
    overflow: hidden;
  }

  #side_navi02 ul {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  #side_navi02 li {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  #side_navi02 li + li {
    border-left: 1px solid #e5e5e5 !important;
  }

  #side_navi02 a {
    text-decoration: none !important;
  }

  #side_navi02::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 62%),
      linear-gradient(45deg, transparent 50%, #888 50%) right 15px center / 7px 7px no-repeat,
      linear-gradient(135deg, transparent 50%, #888 50%) right 15px center / 7px 7px no-repeat;
  }

  #side_navi02 ul {
    padding-right: 48px;
  }
}

@media screen and (max-width: 560px) {
  #header {
    padding-top: 8px;
    margin-bottom: 8px;
  }

  .mobile-contact-bar,
  .mobile-standalone-contact-bar {
    padding: 8px 0;
  }
}

/* ===== TOP page: top announcement bar — restrained gray, centered ===== */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #wrapper > div[style*="width:900px"],
  #wrapper > div[style*="width: 900px"] {
    margin: 4px 0 16px !important;
    padding: 12px 14px !important;
    min-height: 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    background: #efefef !important;
    box-shadow: none !important;
  }

  #wrapper > div[style*="width:900px"] h3,
  #wrapper > div[style*="width: 900px"] h3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    font-weight: bold !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
  }

  #wrapper > div[style*="width:900px"] h3 a,
  #wrapper > div[style*="width: 900px"] h3 a {
    display: inline !important;
    color: #333 !important;
    text-decoration: none;
    border-bottom: 0;
  }
}

.local-check-links {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 9999;
  max-width: min(320px, calc(100vw - 16px));
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: #222;
}

.local-check-links summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #222;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
}

.local-check-links summary::-webkit-details-marker {
  display: none;
}

.local-check-links[open] {
  left: 8px;
  right: 8px;
  bottom: 8px;
  max-width: none;
  padding: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.local-check-links[open] summary {
  margin-bottom: 8px;
  border-color: #d8d8d8;
  background: #f5f5f5;
}

.local-check-links__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
}

.local-check-links__list a {
  display: block;
  min-height: 28px;
  padding: 6px 4px;
  border-bottom: 1px solid #e5e5e5;
  color: #174f86;
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
}

@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #footer {
    color: #8a8a8a !important;
    font-size: 10px;
    line-height: 1.55;
  }

  #footer p,
  #footer div {
    color: #777 !important;
    font-size: 10px !important;
    line-height: 1.65 !important;
  }

  #footer > div {
    text-align: center !important;
  }

  #footer a {
    display: inline-block;
    color: #777 !important;
    line-height: 1.8;
  }

  #footer img {
    width: 58px !important;
    opacity: 0.75;
  }
}

@media screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 12px;
    padding: 8px 0;
    margin-bottom: 8px;
  }

  #header h1, #header p.logo {
    margin-bottom: 0;
  }

  #header h1 img, #header p.logo img {
    width: min(176px, 24vw);
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 10px;
    background: #fff;
    color: #111;
    font: bold 12px/1.2 'メイリオ', Meiryo, sans-serif;
    cursor: pointer;
  }

  .mobile-menu-toggle__icon,
  .mobile-menu-toggle__icon::before,
  .mobile-menu-toggle__icon::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    content: "";
  }

  .mobile-menu-toggle__icon {
    position: relative;
  }

  .mobile-menu-toggle__icon::before,
  .mobile-menu-toggle__icon::after {
    position: absolute;
    left: 0;
  }

  .mobile-menu-toggle__icon::before {
    top: -6px;
  }

  .mobile-menu-toggle__icon::after {
    top: 6px;
  }

  body.mobile-nav-open .mobile-menu-toggle__icon {
    background: transparent;
  }

  body.mobile-nav-open .mobile-menu-toggle__icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  body.mobile-nav-open .mobile-menu-toggle__icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  body:not(.mobile-nav-open) #header > ul,
  body:not(.mobile-nav-open) #global_navi {
    display: none;
  }

  #header > ul > li.last {
    display: none !important;
  }

  .mobile-contact-bar {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 4px 0 0;
    font-size: 11px;
    line-height: 1.3;
    color: #333;
  }

  .mobile-contact-bar__phone {
    color: #111 !important;
    font-weight: bold;
    text-decoration: none;
  }

  .mobile-contact-bar__hours {
    color: #555;
  }

  .mobile-contact-bar__contact {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border: 1px solid #cfcfcf;
    background: #f7f7f7;
    color: #0050a0 !important;
    font-weight: bold;
    text-decoration: none;
  }

  #side {
    margin: 0 0 12px;
  }

  #side_navi02 {
    position: relative;
    margin-bottom: 14px;
  }

  #side_navi02 ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 -12px;
    padding: 0 48px 4px 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border: 0 !important;
    scrollbar-width: none;
  }

  #side_navi02 li {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0;
    border: 0 !important;
    list-style: none;
  }

  #side_navi02 li + li {
    border-left: 1px solid #e5e5e5 !important;
  }

  #side_navi02 a {
    display: block;
    min-height: 32px;
    padding: 6px 14px;
    color: #222;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    text-decoration: none !important;
    white-space: nowrap;
    background: transparent !important;
    border: 0 !important;
  }

  #side_navi02::after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;
    bottom: 0;
    width: 42px;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 62%),
      linear-gradient(45deg, transparent 50%, #888 50%) right 15px center / 7px 7px no-repeat,
      linear-gradient(135deg, transparent 50%, #888 50%) right 15px center / 7px 7px no-repeat;
  }

  body.mobile-nav-open {
    overflow: auto;
  }

  body.mobile-nav-open::before {
    display: none;
  }

  body.mobile-nav-open #header > ul {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    max-height: none;
    margin: 0 -10px 6px;
    padding: 0 10px 2px;
    overflow-x: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.mobile-nav-open #header > ul > li {
    width: auto;
    flex: 0 0 auto;
  }

  body.mobile-nav-open #header > ul > li a {
    min-height: 28px;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    font-size: 12px;
  }

  body.mobile-nav-open #global_navi {
    position: static;
    display: block;
    max-height: none;
    margin: 8px 0 12px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.mobile-nav-open #global_navi ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 -12px;
    padding: 0 12px 4px;
    overflow-x: auto;
    border: 0;
    background: transparent;
  }

  body.mobile-nav-open #global_navi li {
    flex: 0 0 auto;
    width: auto !important;
    border: 0;
  }

  body.mobile-nav-open #global_navi li + li {
    border-left: 1px solid #e5e5e5;
  }

  body.mobile-nav-open #global_navi ul li a,
  body.mobile-nav-open #global_navi ul li.last a {
    min-width: 0;
    min-height: 36px;
    padding: 8px 14px;
    border: 0;
    background: transparent !important;
    color: #222;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    flex-direction: row;
    align-items: center;
  }

  body.mobile-nav-open #global_navi li a::after {
    display: none;
  }

  #brand {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 16px;
  }

  #brand .list {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #e5e5e5;
  }

  #brand .title02 {
    gap: 6px 8px;
    margin-bottom: 8px !important;
    padding-bottom: 6px;
  }

  #brand .title02 h2 {
    font-size: 18px;
    line-height: 1.3;
  }

  #brand .title02 img {
    max-width: 59px;
  }

  #brand .img_box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 98px;
    margin-bottom: 8px !important;
  }

  #brand .img_box img {
    max-width: min(100%, 160px);
    max-height: 98px;
    object-fit: contain;
  }

  #brand .list p {
    margin-top: auto;
    font-size: 13px;
    line-height: 1.55;
  }
}

@media screen and (min-width: 561px) and (max-width: 760px) and (orientation: landscape) {
  #brand {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #contents:has(#side + #brand) {
    display: block;
    width: 100% !important;
    max-width: none;
    background: none;
  }

  #side:has(+ #brand) {
    float: left !important;
    width: 163px !important;
    margin: 0 20px 0 0 !important;
    padding-top: 3px;
    background: none;
  }

  #side:has(+ #brand) #side_navi02 {
    position: static;
    width: 155px !important;
    margin-bottom: 0;
  }

  #side:has(+ #brand) #side_navi02::after {
    display: none;
  }

  #side:has(+ #brand) #side_navi02 ul {
    display: block;
    width: 155px !important;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0 !important;
  }

  #side:has(+ #brand) #side_navi02 li {
    display: block;
    width: 139px !important;
    margin: 0 0 0 16px;
    padding: 0;
    border: 0 !important;
    line-height: 46px;
  }

  #side:has(+ #brand) #side_navi02 li + li {
    border-left: 0 !important;
  }

  #side:has(+ #brand) #side_navi02 a {
    display: block;
    min-height: 46px;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: #000;
    font-size: 14px;
    line-height: 46px;
    text-decoration: none !important;
    white-space: nowrap;
  }

  #brand {
    float: right !important;
    display: block;
    width: calc(100% - 183px) !important;
  }

  #brand .list {
    display: block;
    float: left !important;
    width: 100% !important;
    min-height: 0;
    margin: 0 !important;
    padding: 17px 0 !important;
  }

  #brand .title02 {
    position: relative;
    display: block;
    float: left;
    width: 132px !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 0;
  }

  #brand .title02 h2 {
    float: none;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.35;
  }

  #brand .title02 > a {
    position: static;
    display: block;
  }

  #brand .title02 img {
    position: absolute;
    top: 37px;
    left: 0;
    width: auto !important;
    height: auto !important;
    max-width: 72px;
    margin: 0 !important;
  }

  #brand .img_box {
    display: block;
    float: left !important;
    width: 170px !important;
    margin: 0 16px 0 0 !important;
    padding: 0 !important;
    text-align: center;
  }

  #brand .img_box img {
    display: block;
    width: auto !important;
    max-width: calc(100% - 6px);
    height: 100px !important;
    max-height: 100px;
    margin: 3px auto !important;
    object-fit: contain;
  }

  #brand .list p {
    float: left !important;
    width: calc(100% - 318px) !important;
    margin: 0 !important;
    color: #000;
    font-size: 13px;
    line-height: 1.5;
  }
}

/* ===== mm (mail magazine): keep body text below the floated signup button ===== */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #magazine .text01,
  #magazine p.text01 {
    clear: both !important;
    text-indent: 0 !important;
  }
  #magazine dl {
    overflow: hidden;
  }
}

/* ===== catalog (カタログ請求) (mobile) =====
   - top notice block (gray, no .title02): more padding
   - product items (.list with .title02): WHITE + divider line, centered image,
     no forced title breaks, PDF button pinned bottom-right ===== */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  /* top gray notice block — give it breathing room */
  #catalog .list:not(:has(.title02)) {
    padding: 12px 16px !important;
    margin: 0 0 18px !important;
  }
  #catalog .list:not(:has(.title02))::before {
    content: "ご案内";
    display: block;
    margin: 0 0 12px;
    color: #174f86;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.4;
  }
  #catalog .list:not(:has(.title02)):has(.catalog-notice-details)::before {
    display: none;
  }
  #catalog .catalog-notice-details {
    margin: 0;
    padding: 0;
  }
  #catalog .catalog-notice-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    color: #174f86;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
  }
  #catalog .catalog-notice-details summary::-webkit-details-marker {
    display: none;
  }
  #catalog .catalog-notice-details summary::after {
    content: "+";
    width: 24px;
    height: 24px;
    border: 1px solid #b8c7d8;
    color: #174f86;
    font-size: 18px;
    font-weight: normal;
    line-height: 22px;
    text-align: center;
  }
  #catalog .catalog-notice-details[open] summary {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
  }
  #catalog .catalog-notice-details[open] summary::after {
    content: "-";
  }
  #catalog .catalog-notice-details h2 {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  #catalog .catalog-notice-details div {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  #catalog .list:not(:has(.title02)) h2 {
    margin: 0 0 4px !important;
  }

  /* product item rows: plain white with a divider (not a gray box) */
  #catalog .list:has(.title02) {
    position: relative;
    background: transparent !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
  }
  #catalog .list:has(.title02):last-of-type {
    border-bottom: 0 !important;
  }
  /* keep the title's own <br> as clean wrap points (break before （ etc.);
     hide only the spacer <br> that sit as direct children of .title02 */
  #catalog .title02 > br {
    display: none !important;
  }
  /* stray empty spacer <div> inside some title02 blocks would add an empty grid cell */
  #catalog .title02 > div {
    display: none !important;
  }

  #catalog .title02 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
    float: none !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }

  #catalog .title02 h2 {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
  }

  /* images centered */
  #catalog .list .img_box {
    float: none !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    border: 0 !important;          /* 一覧の商品画像は枠で囲わない */
    text-align: center;
  }

  #catalog .list .img_box img {
    display: inline-block;
    float: none !important;
    max-width: 100%;
    height: auto;
  }

  /* PDF download button -> title row right; long titles push it visually lower */
  #catalog .list .title02 a.downloadLink {
    position: static;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin: 0 !important;
  }

  #catalog .list .title02 a.downloadLink img {
    display: block;
  }
}

/* ===== カタログ「ご案内」：ひと目で押せる帯スタイル（PC/スマホ共通 2026-06-11） ===== */
#catalog .catalog-notice-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  background: #f5f7fa;
  border: 1px solid #dfe5ec;
  color: #174f86;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
#catalog .catalog-notice-details summary::-webkit-details-marker { display: none; }
#catalog .catalog-notice-details summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b8c7d8;
  color: #174f86;
  font-weight: normal;
  font-size: 18px;
  line-height: 1;
}
#catalog .catalog-notice-details[open] summary::after { content: "−"; }
#catalog .catalog-notice-details[open] summary { margin-bottom: 12px; }

/* ===== リンク先頭記号の統一▶（JSが>>等を剥がして付与する .lnk-arrow） ===== */
.lnk-arrow::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-right: 6px;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent currentColor;
}

/* ===== news detail(popup): お問い合わせリンクをCTAボタン化（全幅・中央寄せ。popupは幅が様々なので全幅で適用） ===== */
#news .link { float: none !important; width: 100% !important; text-align: center; }
#news .link a {
  display: flex;                         /* block-level flex → margin:auto で中央寄せ */
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto;
  padding: 13px 24px;
  background: #fff;
  color: #0050a0 !important;
  border: 2px solid #0050a0;
  border-radius: 0;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none !important;
}
#news .link a::before {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}

/* ===== news detail: 見出し(.title03)が2行でも崩れない（common.cssの固定height:38pxを解除） ===== */
#news .title03 {
  height: auto !important;
  min-height: 0 !important;
  padding: 6px 8px 8px 10px !important;   /* 青バーから少し離す＋上下の余白 */
  line-height: 1.45;
}
#news .title03 h4 {
  margin: 0 !important;
  line-height: 1.4;
}
/* スマホ：1行目だけの字下げ(text-indent:16px)を廃して全行の行頭を揃える＋PC用の過大マージン圧縮 */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #news .title03 {
    margin: 14px 0 12px !important;
    padding: 10px 12px 10px 14px !important;
    text-indent: 0 !important;
  }
  #news .title03 span { display: block; margin: 0 0 4px; text-indent: 0; }
  #news .title03 h4 { text-indent: 0 !important; line-height: 1.45; }
}

/* ===== ニュース詳細など: ページ内オーバーレイ（iframeモーダル）。window.openの代わり ===== */
.nky-modal[hidden] { display: none; }
.nky-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
}
.nky-modal__panel {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  height: min(88vh, 100%);
  background: #fff;
  border: 1px solid #cfcfcf;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);   /* オーバーレイの必要最小限の影 */
}
.nky-modal__close {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid #d5d5d5;
  background: #f5f5f5;   /* 記事と明確に区別される操作バー（タイトル被り感の解消） */
  color: #555;
  font-size: 14px;
  text-align: right;
  cursor: pointer;
}
.nky-modal__frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  display: block;
}
body.nky-modal-open { overflow: hidden; }

/* オーバーレイ(iframe)内＝埋め込み表示：サイトのヘッダー/フッターを隠し記事だけ見せる */
.nky-embedded #header,
.nky-embedded #footer { display: none !important; }
.nky-embedded #contents.popup { padding-top: 26px !important; }   /* 閉じるバーとタイトル青線の間=ユーザー指定で+8px */

/* ===== gara_index (柄インデックス): dropdown filters, 2-column compact gallery,
        order links as icons (mobile) ===== */
/* page-title（モバイル用ページ見出し）：PCでは出さない＝従来のPCレイアウトを維持（2026-06-10）
   min-height:481px＝横長スマホ(モバイル扱い)を誤って巻き込まない */
@media screen and (min-width: 768px) and (min-height: 481px) {
  .page-title { display: none; }
}

/* フォームタイトルの／改行はスマホのみ（PCは1行） */
@media screen and (min-width: 768px) and (min-height: 481px) {
  #contents.popup .form_title br { display: none; }
}

/* ===== h1構造改革（2026-06-10）: 下層はロゴをp.logo化し、ページ名をh1に。見た目は不変 ===== */
#topic_navi h1 { display: inline; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; letter-spacing: inherit; }
@media screen and (min-width: 768px) {
  h1.pgtitle { font-size: 28px; font-weight: 300; }   /* common.css h2{28px/300}と同一＝昇格しても見た目不変 */
}

/* ===== トップ: 公式SNSパネル（旧Xタイムライン跡地。X埋込はX側仕様変更で配信停止のため静的リンク化 2026-06-10） ===== */
#left_contents02 { height: auto; }
.sns-panel { border: 0; padding: 0; }   /* 更新情報と同じ「枠なし・帯が全幅」様式に統一（2026-06-10） */
.sns-panel-title { margin-bottom: 8px; }   /* 帯デザインはグローバルh3(#CCC帯)に委ねる＝更新情報と同一 */
.sns-panel-title span { font-size: 11px; font-weight: normal; margin-left: 20px; }   /* WHAT'S NEWと同型式 */
.sns-link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-top: 8px; border: 1px solid #cfcfcf; color: #222; text-decoration: none; font-size: 13px; }
.sns-link span { margin-left: auto; color: #888; font-size: 11px; }
.sns-ic { flex: 0 0 auto; display: block; }   /* モノクロ：currentColor＝ホバーで紺に追従 */
.sns-link:hover, .sns-link:focus { border-color: #0050a0; color: #0050a0; }
.sns-link:hover span, .sns-link:focus span { color: #0050a0; }
/* 更新情報ボックスの浮いた#999上線（no-saiji.css由来）を無効化。灰帯見出しがあるため線は不要（2026-06-10） */
#left_contents .news { border-top: 0 !important; }
/* PC: 公式SNSは2列のコンパクトカード（1列578px→約200pxに圧縮。モバイルは従来の1列行型） */
@media screen and (min-width: 768px) and (min-height: 481px) {
  #left_contents02 { float: left; clear: left; width: 412px; }   /* 更新情報と同じ左列としてfloat配置 */
  #bottom_contents { clear: both; padding-top: 12px; border-top: 0 !important; }   /* 元の#999上線は廃止＝::beforeの1本(帯の4px上)に一本化。margin-topはクリアランスに吸収されるためpadding */
  #bottom_contents::before { content: ""; display: block; border-top: 1px solid #e5e5e5; margin-bottom: 4px; }   /* 帯の4px上の区切り線（ユーザー指定） */
  #bottom_contents > h3 { margin-top: 0; }
  .right_contents { height: auto; }   /* 固定280pxだと中のPICKUPが溢れてもfloat枠が伸びず後続が重なる */
  /* 左列の縦リズム：固定高(280px)の空押しをやめ、実寸＋一定間隔(28px)に統一 */
  #left_contents { height: auto; }
  #left_contents .news { height: auto !important; margin-bottom: 4px !important; }   /* 帯までの固有オフセット約25px込みで視覚28px相当 */
  /* mm: ページ下部の登録導線はモバイル用＝PCでは出さない */
  #magazine .mg-signup-bottom { display: none !important; }
  /* 灰帯(23px)内の文字を天地センターに：既定はpadding-top:5pxで下寄り非対称だった */
  #left_contents h3, #left_contents02 .sns-panel-title, #bottom_contents > h3 {
    padding-top: 0;
    line-height: 23px;
  }
  /* PC＝縦5行リスト（ユーザー指定）：アイコン＋名前＋右端ハンドル・細線区切り */
  .sns-panel { display: block; }
  .sns-panel-title { margin-top: 0; }   /* PICKUP03のTOPと上揃え（h3既定margin-top:3px相殺） */
  .sns-panel .sns-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 0;
    padding: 11px 5px 11px 8px;   /* 左8px=日付の左端と揃え・右5px=一覧ボタンの右端と揃え */
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
    font-size: 12px;
    line-height: 1.3;
  }
  .sns-panel .sns-link span { margin-left: auto; color: #888; font-size: 11px; }
  .sns-panel .sns-ic { width: 16px; height: 16px; margin: 0; }
  .sns-link { flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 0; padding: 9px 11px; }
  .sns-link span { font-size: 10.5px; }
}

/* ===== gara 絞り込み（チェックボックス式・複数選択＋現在の絞込チップ） ===== */
.gfilter { margin: 0 0 14px; }
.gfilter-head { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 0; font-size: 14px; font-weight: bold; color: #222; cursor: pointer; }
.gfilter-arrow { font-size: 11px; color: #0050a0; transition: transform .15s; }
.gfilter.open .gfilter-arrow { transform: rotate(180deg); }
.gfilter:not(.open) .gfilter-group { display: none; }   /* 既定は閉。見出しタップで開閉 */
.gfilter-chipbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 10px; background: #f5f7fa; border: 1px solid #e0e0e0; }
.gfilter-chipbar-label { font-size: 12px; color: #555; }
.gfchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1; padding: 4px 6px 4px 9px; color: #fff; background: #0050a0; border: 0; border-radius: 0; cursor: pointer; }
.gfchip-x { font-size: 14px; font-weight: bold; }
.gfchip:hover, .gfchip:focus { background: #1d5b9f; }
.gfilter-group { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; }
.gfilter-group + .gfilter-group { border-top: 1px solid #eee; }
.gfilter-glabel { flex: 0 0 3.2em; font-size: 13px; font-weight: bold; color: #333; padding-top: 5px; }
.gfilter-opts { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.gfopt { display: inline-flex; align-items: baseline; gap: 3px; font-size: 12px; line-height: 1.2; padding: 5px 9px; color: #333; background: #fff; border: 1px solid #cfcfcf; border-radius: 0; cursor: pointer; }
.gfopt:hover { border-color: #999; }
.gfopt.on { color: #0050a0; background: #eaf2fb; border-color: #0050a0; font-weight: bold; }
.gfopt-n { font-size: 10px; color: #999; }
.gfopt.on .gfopt-n { color: #0050a0; }
.gfopt.zero { opacity: .4; }
.gfclear { margin-left: auto; font-size: 12px; color: #0050a0; background: none; border: 0; padding: 4px 6px; text-decoration: underline; cursor: pointer; }
.gfclear:hover, .gfclear:focus { color: #1d5b9f; }

/* gara: 注文アイテム（鯉口/上下/手拭）のアイコン自体を直接リンクに（カート廃止）。お問い合わせはメールアイコン */
.gara-itemlink { display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; margin-top: 3px; border: 1px solid transparent; transition: border-color .12s; }
.gara-itemlink svg { display: block; transition: stroke .12s; }
.gara-itemlink:hover svg, .gara-itemlink:focus svg,
.gara-itemlink:hover svg *, .gara-itemlink:focus svg * { stroke: #0050a0; }   /* オンマウスで線を青に */
.gara-itemlink:hover, .gara-itemlink:focus { border-color: #0050a0; }          /* オンマウスで青いボーダー（既定は透明枠で確保＝レイアウト不変） */

/* ===== gara_index: 柄カード（全幅共通＝スマホ/タブレット/PCで同一デザイン。
       列数・サイズの差分だけを下の @media で上書き） ===== */
#gara_index {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 既定=スマホ2列 */
  gap: 10px;
  align-items: stretch;            /* 横並びカードを等高に揃える */
}
#gara_index .tbl {
  display: block !important;       /* 表組み解除 → flex tbodyで組む（幽霊行の高さも消える） */
  float: none !important;          /* 旧PCの float:left 解除 */
  width: 100% !important;
  min-width: 0 !important;         /* grid item: min-content以下に縮められる（横スクロール防止） */
  margin: 0 !important;
  border: 1px solid #e0e0e0 !important;   /* 均一1pxの外枠（内側の線は持たない） */
}
#gara_index .gara-img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
}
#gara_index .t-center { padding: 4px 4px 8px !important; margin: 0 !important; white-space: normal !important; border: 0 !important; position: relative; }   /* 柄画像の周囲に4px余白＋旧#ccc枠を撤去（箱1px#e0e0e0との二重を解消） */
#gara_index .t-center::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 1px; background: #e0e0e0; }   /* 産地情報の下の区切り線：箱と同色1px・左右4px inset＝柄画像の幅に揃える */
#gara_index .t-center br { display: none !important; }   /* 手書き<br>の隙間を除去（生地spanは元々block） */
#gara_index .pattern_name {
  padding: 5px 6px 6px;
  font-size: 12.5px;
  font-weight: bold;
  line-height: 1.3;
}
#gara_index .pattern_name span {
  display: block;
  font-size: 10px;
  font-weight: normal;
  color: #666;
}

/* 注文(鯉口/上下/手拭)：縦3行→横3列に転置し、ラベル＋アイコン直リンクで表示 */
#gara_index .tbl tbody { display: flex; flex-wrap: wrap; align-content: space-between; }   /* 等高カードの余白は「名前と注文エリアの間」に集約 */
#gara_index .tbl tbody > tr { box-sizing: border-box; }
#gara_index .tbl tbody > tr:first-child { flex: 0 0 100%; display: block; font-size: 0; }  /* font-size:0=末尾空白テキストの幽霊行(約20px)対策 */
#gara_index .tbl tbody > tr:first-child > td { display: block; width: 100% !important; }
#gara_index .tbl tbody > tr:not(:first-child) {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;                            /* ラベル↔アイコン 4px */
  padding: 10px 4px 6px;              /* 名前との区切りは線でなく余白で */
}
#gara_index .tbl tbody > tr:not(:first-child) > td {
  display: block;
  width: auto !important;
  border: 0 !important;
  margin: 0 !important;        /* common.css由来の margin-bottom:20px を打ち消す */
  padding: 0 !important;
  text-align: center !important;
}
#gara_index .td01 { font-size: 0 !important; text-align: center !important; white-space: normal !important; }
#gara_index .td01 .gara-itemicon { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#gara_index .td01 .gara-itemicon-txt { font-size: 10px; line-height: 1.15; color: #666; white-space: nowrap; }
#gara_index .td01 .gara-itemicon svg { width: 21px; height: 21px; display: block; }
#gara_index .td02 { display: none !important; }    /* 旧カート列（JS側でも非表示。関連アイコンCSSは廃止済み） */

/* ≥768（タブレット/PC=900pxレイアウト）：差分のみ＝列数とやや大きめのサイズ */
@media screen and (min-width: 768px) {
  #gara_index { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }   /* 900pxで3列前後 */
  #gara_index .pattern_name { padding: 6px 8px 8px; font-size: 13px; }
  #gara_index .pattern_name span { font-size: 11px; }
  #gara_index .tbl tbody > tr:not(:first-child) { padding-bottom: 8px; }
  #gara_index .td01 .gara-itemicon-txt { font-size: 11px; }
  #gara_index .td01 .gara-itemicon svg { width: 22px; height: 22px; }
}
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  /* ===== /nky/contact/ お問い合わせフォーム（スマホ最適化 2026-06-10）
     幅は100vw基準＝先方CSS/JSの幅計算に依存しない ===== */
  #wrapper:has(> #contents.popup) { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  #wrapper.has-popup { width: 100% !important; margin: 0 !important; padding: 0 !important; }   /* :has()非対応用（JSが付与） */
  /* 左右ガター12px。変更時はブロック内の calc(100vw - 24px) 全箇所を追従させること */
  #contents.popup { width: auto !important; margin: 0 !important; padding: 0 12px !important; box-sizing: border-box; overflow-x: hidden; border-top: 0 !important; }
  #contents.popup .form01, #contents.popup #form_main, #contents.popup form,
  #contents.popup .form_title, #contents.popup h3, #contents.popup #form_main > div {
    width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; float: none !important;
  }
  #contents.popup form table, #contents.popup table.form01, #contents.popup table.form02, #contents.popup table.form03, #send_button_area table,
  #contents.popup form tbody, #contents.popup table.form01 tbody, #contents.popup table.form02 tbody, #contents.popup table.form03 tbody, #send_button_area tbody,
  #contents.popup form tr, #contents.popup table.form01 tr, #contents.popup table.form02 tr, #contents.popup table.form03 tr, #send_button_area tr,
  #contents.popup form td, #contents.popup form th,
  #contents.popup table.form01 td, #contents.popup table.form01 th,
  #contents.popup table.form02 td, #contents.popup table.form02 th,
  #contents.popup table.form03 td, #contents.popup table.form03 th,
  #send_button_area td, #send_button_area th {
    display: block !important;
    float: none !important;
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    box-sizing: border-box;
    border: 0 !important;              /* 先方CSS由来の細枠を全廃 */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 入力欄の下の「例）〜」をキャプションとして密着表示（form02=入力ページの住所入れ子でも使用） */
  #contents.popup .form01_td, #contents.popup .form02_td {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
    padding-bottom: 14px !important;   /* 項目間のリズム */
    border-bottom: 0 !important;       /* 下線なし（ユーザー指定） */
  }
  /* 確認画面（form03系）：回答値は本文として読みやすく・各項目に下線（ユーザー指定） */
  #contents.popup table td.form02_td02,
  #contents.popup table td.form03_td, #contents.popup table td.form03_td02 {   /* table要素込み=(1,2,2)でブロック化規則と同点→後勝ち */
    font-size: 15px;
    color: #222;
    line-height: 1.6;
    text-align: left !important;       /* 先方のright/center揃えを解除 */
    padding: 2px 0 14px !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }
  /* 入力欄直後の<br>が作る空行を除去＝例）を入力欄に密着（zipBの後の改行だけは残す） */
  #contents.popup .form01_td input:not([name="zipB"]) + br,
  #contents.popup .form02_td input:not([name="zipB"]) + br,
  #contents.popup .form01_td textarea + br,
  #contents.popup .form01_td select + br { display: none; }
  #contents.popup .form01_th, #contents.popup .form02_th,
  #contents.popup .form02_th02, #contents.popup .form03_th {
    padding: 12px 0 4px !important;
    text-align: left;
    font-size: 13px;
    font-weight: bold;
    background: none;
    border: 0;
    height: auto !important;
  }
  #contents.popup form input[type="text"],
  #contents.popup form input[type="email"],
  #contents.popup form input[type="tel"],
  #contents.popup form textarea,
  #contents.popup form select {
    display: block;
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    min-height: 44px;
    margin: 4px 0 0;
    padding: 10px !important;
    font-size: 16px !important;          /* iOSの自動ズーム防止 */
    border: 1px solid #cfcfcf;
    border-radius: 0;
    background: #fff;
  }
  #contents.popup form textarea { min-height: 140px; }
  /* 郵便番号は1行（〒 xxx - xxxx） */
  #contents.popup form input[name="zipA"],
  #contents.popup form input[name="zipB"] {
    display: inline-block !important;
    width: 4.2em !important;
    margin: 4px 2px 0 !important;
    vertical-align: middle;
  }
  #contents.popup form input[name="zipB"] { width: 5.4em !important; }   /* 4桁はやや広く */
  /* フォームタイトル（旧スタイルの字下げ崩れを解消・サイト規約のフラット帯に） */
  #contents.popup .form_title,
  #contents.popup #form_main > .form_title {   /* 後者=リセット規則(#form_main>div)より高詳細度 */
    width: auto !important;
    margin: 0 0 8px !important;
    padding: 12px 0 12px 20px !important;   /* 字下げはpadding＝改行後も行頭が揃う。左バーと文字の間隔は広めに */
    font-size: 18px !important;             /* 原本どおり */
    font-weight: bold;
    line-height: 1.45 !important;
    color: #0050A0 !important;              /* 原本どおり（青） */
    background: none !important;
    border: 0 !important;
    border-left: 8px solid #0050A0 !important;   /* 原本どおり */
    text-indent: 0 !important;
    letter-spacing: 0;
  }

  #contents.popup form input[type="file"] {
    display: block;
    width: 100% !important;
    margin: 4px 0 8px;
    padding: 0;
    font-size: 14px !important;
    color: #555 !important;
    border: 0;
    background: none;
  }
  /* 入力フォームのセクション区切り（名前の上・電話番号の上。JSがラベルを判定して付与） */
  #contents.popup table th.form-sec-break, #contents.popup th.form-sec-break, #contents.popup .form-sec-break {
    border-top: 1px solid #e5e5e5 !important;
    padding-top: 18px !important;
    margin-top: 10px !important;
  }
  /* ご案内文（form_com）：文字を枠に密着させない */
  #contents.popup .form_com,
  #contents.popup #form_main > .form_com {   /* リセット規則(#form_main>div)より高詳細度 */
    padding: 12px 14px !important;
    box-sizing: border-box;
    line-height: 1.7;
  }

  /* 確認画面のボタン行：縦積みで各全幅（form_button_arae=原本の綴りどおり） */
  #contents.popup .form_button, #contents.popup .form_button_arae,
  #contents.popup .form_button01, #contents.popup .form_button02 {
    display: block; float: none !important;
    width: calc(100vw - 24px) !important; margin: 8px 0 !important;
    text-align: center;
  }
  /* 送信・確認ボタン＝紺solid（先方input#SUBMITの艶・影・高さも中和） */
  #contents.popup form input[type="submit"] {
    display: block;
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    box-sizing: border-box;
    height: auto !important;
    min-height: 48px;
    margin: 10px 0;
    padding: 12px 10px;
    font-size: 16px !important;
    font-weight: bold;
    color: #fff !important;
    background: #0050a0 !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  #contents.popup form input[type="submit"]:disabled { background: #9ab4cf !important; }
  /* 「戻る」系は控えめ（outline）。※[name*= i]フラグは古ブラウザでリスト全滅のため不使用 */
  #contents.popup form input[type="button"],
  #contents.popup form input[name*="back"], #contents.popup form input[name*="BACK"] {
    display: block;
    width: calc(100vw - 24px) !important;
    box-sizing: border-box;
    height: auto !important;
    min-height: 48px;
    margin: 10px 0;
    font-size: 16px !important;
    font-weight: bold;
    border-radius: 0;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: #fff !important; color: #0050a0 !important; border: 1px solid #0050a0 !important;
  }

  /* 個人情報ボックス：全幅・スクロール枠・inlineのpadding:30pxはスマホでは過大→圧縮（2026-06-10） */
  #contents.popup .privacy { width: calc(100vw - 24px) !important; box-sizing: border-box; }
  #contents.popup .privacy_inner {
    width: calc(100vw - 24px) !important;
    box-sizing: border-box;
    max-height: 180px;
    overflow-y: auto;
    padding: 12px 14px !important;
    font-size: 12px;
  }
  #contents.popup .privacy_inner > br:first-child { display: none; }

  /* 「ファイルを選択」ボタン本体を明示スタイル（無文字の豆ボタン化を根治） */
  /* ※2規則に分離必須：未知の擬似要素は同一セレクタリスト全体を無効化するため */
  #contents.popup input[type="file"]::file-selector-button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    margin: 0 10px 0 0;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: bold;
    color: #0050a0;
    background: #fff;
    border: 1px solid #0050a0;
    border-radius: 0;
    cursor: pointer;
  }
  #contents.popup input[type="file"]::-webkit-file-upload-button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    margin: 0 10px 0 0;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: bold;
    color: #0050a0;
    background: #fff;
    border: 1px solid #0050a0;
    border-radius: 0;
    cursor: pointer;
  }
  /* フォーム下部のPマーク：float:leftl(typo)でテキストが画像の下に回り込む＋余白過大の修正 */
  #contents.popup img[src*="p-mark"] {
    float: left !important;
    width: 56px !important;
    height: auto !important;
    margin: 18px 12px 0 0 !important;
  }
  #contents.popup img[src*="p-mark"] + p {
    float: none !important;
    overflow: hidden;                 /* BFC＝画像の下に回り込まない */
    margin: 18px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.7;
    text-align: left;
  }
  /* 先方CSS残骸の中和：エラー枠500px固定・nowrap・ボタン行高さ30px・線色 */
  #contents.popup .error01, #contents.popup .error02, #contents.popup .wor01 {
    width: auto !important;
    box-sizing: border-box;
    white-space: normal;
    padding: 8px 10px !important;
  }
  #contents.popup .form_text, #contents.popup .form_text01 { white-space: normal !important; }
  #contents.popup .form_button { height: auto !important; }
  #contents.popup .form01 { border-bottom-color: #e5e5e5 !important; }
  /* タイトル直後の余分な<br>（先方マークアップ）による間延びを除去 */
  #contents.popup .form_title + br { display: none; }
}

/* ===== recruit (採用) tidy-ups (mobile) ===== */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #recruit {
    border-top: 0 !important;
    background-image: none !important;
  }

  #recruit .recruit-page-title {
    margin: 0 0 16px !important;
    padding: 12px 0 0 !important;
    color: #777;
    font-size: 12px;
    line-height: 1.45;
  }

  #recruit .recruit-page-title h2 {
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 0 2px !important;
    color: #222;
    font-size: 24px;
    line-height: 1.35;
  }

  /* apply-form button aligned to the right of the heading */
  #recruit .title02 { position: relative; }
  #recruit .title02 br { display: none !important; }
  #recruit .title02 h2 { display: inline-block; margin: 0 !important; }
  #recruit .title02 a { float: right; margin: 2px 0 0; }
  #recruit .title02 a img { display: block; }
  #recruit .title02::after { content: ""; display: block; clear: both; }
  #recruit dl { clear: both; }

  #recruit dl > a[href*="fid=9"],
  #recruit dd > a.button[href*="fid=9"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    min-height: 48px;
    margin: 16px 0 8px !important;
    padding: 10px 14px !important;
    box-sizing: border-box;
    border: 1px solid #b8c7d8 !important;
    background: #f8fafc !important;
    color: #174f86 !important;
    font-size: 17px !important;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
    text-decoration: none !important;
  }

  #recruit dl > a[href*="fid=9"]::before,
  #recruit dd > a.button[href*="fid=9"]::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #174f86;
  }

  /* list bullets sit inside the content (no more hanging dots) */
  #recruit dd ul {
    margin: 8px 0 6px !important;
    padding-left: 1.4em !important;
    list-style: disc;
  }
  #recruit dd ul li {
    list-style: disc !important;
    display: list-item;
    margin: 0 0 4px;
    line-height: 1.6;
  }

  /* dt/dd dividers: keep the dotted rule off the text */
  #recruit dt {
    margin-top: 16px;
    padding: 0 0 2px !important;
    line-height: 1.5;
  }
  #recruit dl > dt:first-of-type { margin-top: 0; }
  #recruit dd {
    padding: 2px 0 14px !important;
    margin: 0 !important;
    line-height: 1.7;
  }
  /* no doubled rules: drop top border and the last dotted rule that
     would collide with the section divider below */
  #recruit dd.first { border-top: 0 !important; }
  #recruit dd:last-child,
  #recruit dd.type03 { border-bottom: 0 !important; }
}

/* ===== gara_index: item-type icons, live result count, smaller notes (mobile) ===== */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  /* item-type label cell (鯉口/上下/手拭) -> centered icon */
  #gara_index .td01 {
    font-size: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    padding: 4px 2px !important;
  }
  #gara_index .td01 .gara-itemicon {
    font-size: 16px;
    line-height: 1;
  }

  /* live result count, sits right under the filter pulldowns */
  .gara-counter {
    margin: 2px 0 12px !important;
    padding: 0 !important;
    text-align: right;
    font-weight: bold;
    font-size: 13px;
    color: #174f86;
  }

  /* "新柄まで掲載 / 最終更新日" -> smaller */
  .gara-update {
    font-size: 10px !important;
    line-height: 1.35;
    margin-bottom: 6px;
  }

  /* monitor disclaimer: smaller, natural wrapping (PC <br> removed in HTML) */
  .gara-note {
    font-size: 11px !important;
    line-height: 1.6;
    padding: 8px 2px 12px !important;
    text-align: left !important;
  }
}

/* gara item-type icons rendered as gray SVG motifs */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #gara_index .td01 .gara-itemicon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
  }
  /* 小さな文字ラベル（手拭/プリントは同一アイコンなので文字で区別） */
  #gara_index .td01 .gara-itemicon-txt {
    font-size: 9px;
    line-height: 1.15;
    color: #666;
    white-space: nowrap;
  }
  #gara_index .td01 .gara-itemicon svg {
    width: 20px;
    height: 20px;
    display: block;
  }
}

/* ===== batch tidy-ups (mobile) ===== */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  /* --- gara: garment icon + order icon as one tight horizontal pair --- */
  #gara_index .tbl .td01 {
    width: 100% !important;
    text-align: center !important;
    padding: 5px 2px 1px !important;
  }

  /* --- side_navi: remove the odd left indent on the active item --- */
  #side_navi li.active,
  #side_navi02 li.active,
  #side_navi li.active a,
  #side_navi02 li.active a {
    text-indent: 0 !important;
  }

  /* --- map (アクセス): keep sectioning aligned with the horizontal-line system --- */
  #map dt {
    margin-top: 16px;
    padding: 12px 0 4px !important;
    border-top: 1px solid #e5e5e5;
    border-left: 0;
    color: #222;
    font-weight: bold;
    font-size: 15px;
    line-height: 1.45;
  }
  #map dl > dt:first-of-type {
    margin-top: 0;
    padding-top: 0 !important;
    border-top: 0;
  }
  #map dd {
    margin: 0 !important;
    padding: 2px 0 12px !important;
    border-bottom: 0 !important;
    line-height: 1.75;
  }
  #map dd.type02 { padding: 2px 0 4px !important; }
  #map dd span { color: #666; }

  /* --- hamburger menu: utility links shouldn't be raw blue/underlined --- */
  body.mobile-nav-open #header > ul li a {
    color: #222 !important;
    text-decoration: none !important;
  }
}

@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #brand:has(> .page-title),
  #shop_events:has(> .page-title),
  #contact:has(> .page-title),
  #catalog:has(> .page-title),
  #faq:has(> .page-title),
  #privacy:has(> .page-title),
  #recruit:has(> .page-title),
  #campany:has(> .page-title),
  #map:has(> .page-title),
  #news:has(> .title01),
  #magazine:has(> .title01),
  #events:has(> .title01),
  #product_all:has(> .title01) {
    border-top: 0 !important;
    background-image: none !important;
  }
}

/* ===== final alignment pass: CTA, menu separators, FAQ headings ===== */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #brand .title02 {
    margin-top: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;        /* was 1px: redundant with the .list bottom border (double line) */
    border-bottom: 0 !important;
    /* カテゴリ見出しの右端に「商品一覧」ボタンを上下中央で（imgの絶対配置を解除） */
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    position: relative;
    float: none !important;
    width: auto !important;
    height: auto !important;
  }
  #brand .title02 > a {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    position: static !important;
  }
  #brand .title02 img {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    max-width: 59px;
  }

  #catalog .title02,
  #recruit .title02,
  #side:not(.empty-side-menu) + #shop_events .list .title02 {
    padding-top: 12px !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;        /* was 1px: redundant with the .list bottom border (double line) */
    border-bottom: 0 !important;
  }

  #privacy h3,
  #privacy h3.bg-none {
    margin: 20px 0 12px !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #e5e5e5 !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }
  #privacy > .list.type04:first-of-type > h2:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  #privacy > .page-title + .list.type04,
  #privacy > .list.type04:first-of-type {
    border-top: 0 !important;
    background-image: none !important;
  }
  #privacy > .page-title + .list.type04 > h2:first-child,
  #privacy > .list.type04:first-of-type > h2:first-child {
    border-top: 0 !important;
    border-bottom: 0 !important;
    background-image: none !important;
  }

  .page-title {
    display: block !important;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }
  .page-title h2 {
    max-width: 100%;
    box-sizing: border-box;
    text-indent: 0 !important;
    overflow-wrap: break-word;
  }

  #privacy .page-title,
  #campany .page-title,
  #catalog .page-title,
  #faq .page-title,
  #map .page-title,
  #recruit .page-title,
  #contact .page-title {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  #faq .list h2 {
    font-size: 19px !important;
    line-height: 1.55 !important;
    letter-spacing: 0;
    word-break: normal;
    overflow-wrap: break-word;
  }
  #faq .list h2 br {
    display: none !important;
  }
  #faq .list h2 span {
    margin-right: 4px;
  }

  #side_navi li,
  #side_navi02 li {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 40px;
    border-left: 0 !important;
  }
  #side_navi li + li::before,
  #side_navi02 li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: #d8d8d8;
  }
  #side_navi a,
  #side_navi02 a {
    display: flex !important;
    align-items: center;
    min-height: 40px;
  }

  #magazine .mg-signup-bottom dd > a[onclick*="member.php"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    width: min(100%, 360px);
    padding: 10px 14px !important;
    box-sizing: border-box;
    border: 1px solid #b8c7d8 !important;
    background: #f8fafc !important;
    color: #174f86 !important;
    font-size: 17px !important;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
    text-decoration: none !important;
  }
  #magazine .mg-signup-bottom dt {
    display: none !important;
  }
  #magazine .mg-signup-bottom dd {
    margin: 0 !important;
    width: 100% !important;
    text-align: center;
  }
  #magazine .mg-signup-bottom dd > a[onclick*="member.php"] img {
    display: none !important;
  }
  #magazine .mg-signup-bottom dd > a[onclick*="member.php"]::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #174f86;
  }
  #magazine .mg-signup-bottom dd > a[onclick*="member.php"]::after {
    content: "メルマガ登録する";
  }
}

/* ===== recruit: section spacing + smart apply button (mobile) ===== */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  /* one clean divider per section, equal breathing room above heading & below text */
  #recruit .list {
    margin: 0 !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }
  #recruit .list:last-of-type { border-bottom: 0 !important; }
  #recruit .title02 { margin-top: 0 !important; }

  /* recruit 応募ボタンは CTA outline 様式（グローバル定義）に統一。下記「recruit 応募ボタン」節を参照。 */
}

/* ===== online-shop link -> designed button (ALL widths: mobile + tablet + PC) =====
   Used on se.html / catalog_edoichi2019.html. White outline button, blue border/text,
   left ▶ triangle, flat (no radius/shadow) per DESIGN-RULES. Global so PC matches mobile. */
.online-shop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 8px;
  padding: 13px 28px;
  background: #fff;             /* outline button: white background */
  color: #0050a0 !important;   /* blue text */
  border: 2px solid #0050a0;   /* blue border */
  border-radius: 0;            /* flat: no rounded corners */
  font-weight: bold;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  box-shadow: none;            /* flat: no shadow, no gradient */
}
.online-shop-btn::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;          /* right-pointing triangle (▶), on the LEFT of the label */
  border-color: transparent transparent transparent currentColor;
}
.online-shop-btn::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border: 1.5px solid currentColor;
  box-shadow: 4px -4px 0 -1.5px #fff, 4px -4px 0 0 currentColor;   /* 外部リンク(別ウィンドウ)アイコン */
}
.online-shop-btn:active {
  background: #eaf2fb;         /* light blue press feedback */
}

/* ===== recruit 応募ボタン：CTA(.online-shop-btn)と同じ outline 様式に統一（mobile + PC） ===== */
#recruit a[href*="/nky/contact"][style] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content !important;
  max-width: 100%;
  margin: 18px auto 2px !important;
  padding: 14px 28px !important;
  font-size: 16px !important;
  font-weight: bold;
  background: #fff !important;
  color: #0050a0 !important;
  border: 2px solid #0050a0 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
#recruit a[href*="/nky/contact"][style]::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;          /* ▶ triangle, left of label */
  border-color: transparent transparent transparent currentColor;
}
#recruit a[href*="/nky/contact"][style]:active {
  background: #eaf2fb !important;
}

/* ===== more fixes (mobile) ===== */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  /* news: show date + title ABOVE the flyer image */
  #news .list { display: flex; flex-direction: column; }
  #news .list .date { order: 1; }
  #news .list .name { order: 2; }
  #news .list .img_box { order: 3; margin-top: 4px; }
  #news .list .text { order: 4; }

  /* catalog: fix 祭StyleBook title (has a [NEW] span but no PDF button -> grid breaks it) */
  #catalog .title02:not(:has(a.downloadLink)) {
    display: block !important;
  }
  #catalog .title02:not(:has(a.downloadLink)) > span {
    display: inline;
    margin-right: 5px;
    font-weight: bold;
  }
  #catalog .title02:not(:has(a.downloadLink)) h2 {
    display: inline;
  }

  /* .online-shop-btn now defined in GLOBAL scope (mobile + PC); see the
     "online-shop link -> designed button (ALL widths)" section above. */
}

/* ===== batch fixes round 2 (mobile) ===== */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  /* side_navi links: no underline */
  #side_navi a, #side_navi02 a { text-decoration: none !important; }

  /* hamburger menu (global_navi): kill stray underline on labels;
     keep only the single external-link icon (::before), drop the ::after box */
  body.mobile-nav-open #global_navi a,
  body.mobile-nav-open #global_navi a::after { text-decoration: none !important; }
  /* 外部リンク(オンラインショップ)の::afterは英語ラベル"ONLINE SHOP"用に表示する（アイコンは::before）。
     旧 display:none はラベルまで隠していた。アイコンのbox-shadow/borderはここで打ち消す。 */
  body.mobile-nav-open #global_navi a[target="_blank"]::after {
    display: block !important;
    box-shadow: none !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  /* faq: tone down the "Q." marker so it isn't too strong */
  #faq .list h2 span { font-size: 0.78em; font-weight: normal; color: inherit; margin-right: 0.3em; }

  /* FAQ: 各Q&Aを1問ずつ区切る（線はQの上、先頭Qは線なし） */
  #faq .list { border-top: 1px solid #e5e5e5 !important; border-bottom: 0 !important; padding-top: 14px !important; }
  #faq .page-title + .list { border-top: 0 !important; padding-top: 0 !important; }

  /* catalog notice accordion (ご注意): tighter top/bottom */
  #catalog .list:not(:has(.title02)) { padding: 8px 14px !important; }
  #catalog .catalog-notice-details summary { min-height: 30px; }

  /* catalog title break helper: keep parenthesised part together */
  #catalog .title02 .nw { white-space: nowrap; }

  /* contact: trim the big gap between heading and body */
  #contact .list > br { display: none !important; }
  #contact .list h2 { margin-bottom: 6px !important; }
  #contact .list [style*="width:680px"],
  #contact .list [style*="width: 680px"] { padding-top: 0 !important; }

  /* <hr> renders as a 3D "inset" rule by default — looks like a faint DOUBLE line.
     Normalise every divider to a single clean line. */
  hr,
  hr.separate {
    border: 0;
    border-top: 1px solid #ddd;
    height: 0;
    background: none;
    color: inherit;
  }

  /* footer: privacy text to the right of the P-mark, links + copyright centered */
  #footer { text-align: center; }
  #footer img { float: left !important; display: inline !important; margin: 0 14px 8px 0 !important; }
  #footer p { float: none !important; clear: none !important; text-align: left !important; margin: 0 0 10px !important; }
  /* copyright: smaller + compact. (At phone widths the full English string can't
     physically be one line without overflowing, so it wraps to a tight 2 lines;
     on wider/tablet widths it fits on one.) */
  #footer .copyright {
    display: block;
    margin-top: 6px;
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: -0.2px;
  }
}

/* ===== catalog titles: PDF download button sits to the RIGHT of the title,
        vertically centered. Handled by the grid rule above
        (#catalog .title02 { display:grid; grid-template-columns: minmax(0,1fr) auto;
        align-items:center } + a.downloadLink { grid-column:2; justify-self:end;
        align-self:center }). The earlier "bottom-right absolute" override was
        removed per request. ===== */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  /* [NEW]-span titles without a PDF button stay inline / full width */
  #catalog .title02:not(:has(a.downloadLink)) h2 { display: inline; }
}

/* recruit: ensure only a single divider between sections (no top border doubling) */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #recruit .list { border-top: 0 !important; }
}

/* ===== phone LANDSCAPE: base = phone-portrait layout, but center the column so it
        doesn't stretch edge-to-edge on the wide-but-short viewport (帳尻合わせ). ===== */
@media screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #wrapper {
    max-width: 620px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* the fixed dev overlay stays put; nothing else needs changing */
}

/* ===== mobile / phone-landscape: the text menu REPLACES the desktop g_navi.gif
        sprite. Kill the sprite (on the <ul> and every link state) so the image
        graphic never renders on top of / beside the text labels — this is the
        "global nav appears doubled (image + text)" fix. ===== */
@media screen and (max-width: 767px), screen and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  #global_navi ul { background-image: none !important; }
  #global_navi ul li a,
  #global_navi ul li a:hover,
  #global_navi ul li a:focus,
  #global_navi ul li a.active { background-image: none !important; }
}

/* ===== gara-note (商品の色...): left-aligned on PC/tablet (centred only on phone) ===== */
@media screen and (min-width: 768px) {
  .gara-note { text-align: left !important; }
  /* 副ナビ右端のTEL：受付時間は電話番号より控えめに（グレー＆小さめ・幅も番号の内側に） */
  #header > ul > li.last .mobile-phone-hours {
    display: block;
    color: #888;
    font-size: 10px;
    line-height: 1.3;
    text-align: justify;
    text-align-last: justify;   /* 「電話受付 10:00-17:30」をTEL番号と同じ幅に均等割付 */
  }
}

/* トップ PICKUP(.right_contents)：スマホ(≤560px)は1カラム、それ以上は2カラム（316行が≤767の2列ベース） */
@media screen and (max-width: 560px) {
  .right_contents { grid-template-columns: 1fr; }
}