@charset "euc-jp";

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;700&display=swap');

/* Global Font Settings */
body {
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 200;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 200;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

/* Specific heading adjustments */
h1 { font-weight: 200; }
h2 { font-weight: 200; }
h3 { font-weight: 200; }

/* Button and interactive elements */
button, .btn, .chart-btn, input[type="submit"] {
  font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
  font-weight: 200;
  letter-spacing: 0.04em;
}

/* Navigation and menu items */
.navigation-menu, .nav-link, .dropdown-link {
  font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
  font-weight: 200;
}

/* Product titles and prices */
.product-title {
  font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
  font-weight: 600;
}

.price-section, .main-price {
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 400;
}
/* PC共通サイドメニューのカテゴリボタンは2列 */
ul.yokohama-categories-grid {display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;list-style:none!important;padding:0!important;margin-bottom:20px!important;border:none!important}
/* スマホ版も2列維持 */
@media (max-width: 768px) {
ul.yokohama-categories-grid {grid-template-columns:1fr 1fr!important}
}
.yokohama-category-item {border:none!important;padding:0!important;margin:0!important}
.yokohama-category-link {display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;padding-left:40%!important;text-align:center!important;text-decoration:none!important;color:#ffffff!important;background:transparent!important;border:1px solid rgba(255,255,255,0.3)!important;border-radius:8px!important;font-size:13px!important;font-weight:500!important;transition:all 0.3s ease!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-height:60px!important;height:60px!important;position:relative!important;box-sizing:border-box!important}
.yokohama-category-link::before {content:''!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:linear-gradient(89deg, transparent 19%, #040c17 50%, #040c17 100%)!important;z-index:2!important;pointer-events:none!important}
/* ホバー時の背景エフェクトを::afterで実装 */
.yokohama-category-link::after {content:''!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:rgba(255,215,0,0.1)!important;z-index:1!important;opacity:0!important;transition:opacity 0.3s ease!important;pointer-events:none!important}
.yokohama-category-link:hover::after {opacity:1!important}
.yokohama-category-link img {display:block!important;position:absolute!important;left:-25%!important;top:50%!important;transform:translateY(-50%)!important;width:140%!important;height:170%!important;max-height:200%!important;object-fit:contain!important;opacity:1!important;z-index:1!important;margin:0!important}
.yokohama-category-link span {position:relative!important;z-index:100!important;display:inline-block!important;color:#ffffff!important}
.yokohama-category-link:hover {border-color:#FFD700!important;text-decoration:none!important}
.yokohama-category-link:hover span {color:#FFD700!important}
/* PC商品一覧ページのカテゴリボタンは3列 */
ul.yokohama-product-categories-grid {display:grid!important;grid-template-columns:repeat(3, 1fr)!important;gap:8px!important;list-style:none!important;padding:0!important;margin:0!important;margin-bottom:20px!important;border:none!important}
/* スマホ商品一覧ページは2列 */
@media (max-width: 768px) {
ul.yokohama-product-categories-grid {grid-template-columns:1fr 1fr!important;padding-left:0!important;margin-left:0!important;width:100%!important}
/* スマホ版商品一覧カテゴリボタンのテキストはスペースで改行 */
.yokohama-product-category-link {height:60px!important;overflow:hidden!important;padding:8px 8px 8px 40%!important}
.yokohama-product-category-link span {white-space:normal!important;word-wrap:normal!important;word-break:keep-all!important;line-height:1.2!important;text-align:center!important;display:block!important;font-size:11px!important}
}
.yokohama-product-category-item {border:none!important;padding:0!important;margin:0!important}
.yokohama-product-category-link {display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;padding-left:40%!important;text-align:center!important;text-decoration:none!important;color:#ffffff!important;background:transparent!important;border:1px solid rgba(255,255,255,0.3)!important;border-radius:8px!important;font-size:13px!important;font-weight:500!important;transition:all 0.3s ease!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-height:60px!important;height:60px!important;position:relative!important;box-sizing:border-box!important}
.yokohama-product-category-link::before {content:''!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:linear-gradient(89deg, transparent 19%, #040c17 50%, #040c17 100%)!important;z-index:2!important;pointer-events:none!important}
/* ホバー時の背景エフェクトを::afterで実装 */
.yokohama-product-category-link::after {content:''!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:rgba(255,215,0,0.1)!important;z-index:1!important;opacity:0!important;transition:opacity 0.3s ease!important;pointer-events:none!important}
.yokohama-product-category-link:hover::after {opacity:1!important}
.yokohama-product-category-link img {display:block!important;position:absolute!important;left:-25%!important;top:50%!important;transform:translateY(-50%)!important;width:140%!important;height:170%!important;max-height:200%!important;object-fit:contain!important;opacity:1!important;z-index:1!important;margin:0!important}
/* テキストを確実に前面に表示 */
.yokohama-product-category-link span {position:relative!important;z-index:100!important;display:inline-block!important;color:#ffffff!important}
.yokohama-product-category-link:hover {border-color:#FFD700!important;text-decoration:none!important}
.yokohama-product-category-link:hover span {color:#FFD700!important}
.yokohama-mobile-categories-grid {display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;background:transparent!important;padding:15px!important;list-style:none!important}
.yokohama-mobile-category-item {border-bottom:none!important;margin:0!important;padding:0!important}
.yokohama-mobile-category-link {display:block!important;padding:10px 8px!important;background:transparent!important;border:1px solid rgba(255,255,255,0.3)!important;border-radius:6px!important;color:#ffffff!important;text-decoration:none!important;font-size:12px!important;text-align:center!important;transition:all 0.2s ease!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;opacity:1!important;min-height:32px!important;box-sizing:border-box!important;line-height:1.2!important}
.yokohama-mobile-category-link:hover {background:rgba(255,215,0,0.1)!important;border-color:#FFD700!important;color:#FFD700!important;padding-left:8px!important;transform:translateY(-1px)!important;text-decoration:none!important}
div #header,
#header {
background:#ffffff;
padding:20px 15px ;
margin-top:-40px ;
color:#333333;
box-sizing:border-box ;
position:relative ;
width:100vw ;
left:50% ;
transform:translateX(-50%) ;
z-index:1000 ;
}
@media (min-width:1386px) {
#header > * {
max-width:1320px ;
margin:0 auto ;
padding:0 ;
position:relative ;
}
}
@media (min-width:769px) and (max-width:1385px) {
#header > * {
max-width:none ;
margin:0 ;
padding:0px ;
position:relative ;
width:100% ;
}
}
.pc-header-container {
display:flex ;
justify-content:space-between ;
align-items:center ;
width:100% ;
position:relative ;
min-width:0 ;
}
.pc-header-container .txt_24 {
flex-shrink:0 ;
margin-right:20px ;
max-width:60% ;
}
.pc-header-container .txt_10 {
margin:5px 0 0 0 ;
padding:0 ;
line-height:1.2 ;
display:none ;
}
.pc-header-container > div:first-child {
display:flex ;
flex-direction:column ;
align-items:flex-start ;
min-width:0 ;
}
.pc-header-menu {
display:flex ;
list-style:none ;
margin:0 ;
padding:0 ;
flex-shrink:1 ;
align-items:center ;
gap:20px ;
min-width:0 ;
justify-content:flex-end ;
}
.pc-header-menu li {
margin:0 ;
padding:0 ;
flex-shrink:0 ;
}
.pc-header-menu a {
white-space:nowrap ;
display:block ;
}
@media (min-width:769px) {
#header .txt_24 a img,
#header a img {
max-width:300px ;
height:auto ;
width:auto ;
display:block ;
transition:all 0.3s ease ;
}
}
#header .txt_24 a,
#header > a {
display:inline-block ;
line-height:1 ;
vertical-align:middle ;
}
#header .txt_24 a:hover img,
#header a:hover img {
opacity:0.8 ;
}
#header .logo-small img {max-width:200px;}
#header .logo-medium img {max-width:300px;}
#header .logo-large img {max-width:400px;}
#header .logo-xlarge img {max-width:500px;}
@media (min-width:769px) and (max-width:1385px) {
#header .txt_24 a img,
#header a img {
max-width:250px ;
}
.pc-header-container .txt_24 {
max-width:65% ;
}
}
@media (min-width:769px) and (max-width:1200px) {
#header .txt_24 a img,
#header a img {
max-width:250px ;
}
.pc-header-container .txt_24 {
max-width:70% ;
margin-right:15px ;
}
.pc-header-menu {
gap:15px ;
}
}
#header > .txt_24 + .txt_10,
#header .mobile-top-left .txt_10,
#header .pc-header-container .txt_10 {
display:none ;
}
@media (max-width:768px) {
div #header,#header {
background:#ffffff;
padding:0 ;
color:#333333;
margin-top:-20px ;
margin-left:-20px ;
margin-right:-20px ;
position:static ;
width:auto ;
left:auto ;
transform:none ;
z-index:auto ;
}
}
/* Header2 ナビゲーションメニュー */
.header2-container {
    background: rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid rgba(222, 226, 230, 0.3) !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
}

.navigation-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    flex-wrap: wrap !important;
}

.nav-item {
    position: relative !important;
    margin: 0 !important;
}

.nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    color: white !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: normal !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
    margin: 4px 9px !important;
}

.nav-link:hover {
    background: rgba(255, 215, 0, 0.2) !important;
    color: #FFD700 !important;
    text-decoration: none !important;
}

.nav-link:hover .material-icons-outlined {
    color: #FFD700 !important;
}

.nav-link:hover .nav-text {
    color: #FFD700 !important;
}

.nav-link .material-icons-outlined {
    font-size: 18px !important;
    margin-right: 6px !important;
}

.nav-text {
    font-size: 13px !important;
    font-weight: normal !important;
    color: white !important;
}

.dropdown-arrow {
    margin-left: 4px !important;
    font-size: 10px !important;
    transition: transform 0.2s ease !important;
}

.dropdown:hover .dropdown-arrow {
    transform: rotate(180deg) !important;
}

.navigation-menu .dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 9px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    min-width: 200px !important;
    max-width: 300px !important;
    box-shadow: 0 6px 25px rgba(0,0,0,0.15) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    z-index: 9999 !important;
    list-style: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
}

.navigation-menu .dropdown::before {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: transparent !important;
    z-index: 9998 !important;
}

.navigation-menu .dropdown:hover .dropdown-menu {
    display: block !important;
    animation: fadeIn 0.2s ease-in-out !important;
}

.navigation-menu .dropdown-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.navigation-menu .dropdown-link {
    display: block !important;
    padding: 8px 16px !important;
    color: #2c3e50 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border-radius: 4px !important;
    margin: 0 8px !important;
}

.navigation-menu .dropdown-link:hover {
    background: rgba(255, 215, 0, 0.2) !important;
    color: #2c3e50 !important;
    text-decoration: none !important;
}

.navigation-menu .dropdown-separator {
    height: 1px !important;
    background: #e9ecef !important;
    margin: 4px 8px !important;
    border: none !important;
}

@media (max-width: 768px) {
    #header2, .header2-container {
        display: none !important;
    }
    
    .navigation-menu {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        padding: 8px 15px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .navigation-menu::-webkit-scrollbar {
        display: none !important;
    }
    
    .nav-item {
        flex-shrink: 0 !important;
    }
    
    .nav-link {
        padding: 10px 12px !important;
        margin: 2px 1px !important;
        font-size: 12px !important;
    }
    
    .nav-link .material-icons-outlined {
        font-size: 16px !important;
        margin-right: 4px !important;
    }
    
    .nav-text {
        font-size: 12px !important;
    }
    
    .navigation-menu .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: auto !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        padding: 16px 0 !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s ease !important;
    }
    
    .navigation-menu .dropdown.mobile-active .dropdown-menu {
        display: block !important;
        transform: translateY(0) !important;
    }
    
    .navigation-menu .dropdown-link {
        padding: 12px 20px !important;
        font-size: 14px !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-5px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}
html {
margin:0 ;
padding:0 ;
width:100% ;
box-sizing:border-box ;
}
body {
background-color:#040c17;
background-image:url();
color:#ffffff;
margin:0 ;
padding:0 ;
width:100% ;
}
a {
color:#ffffff;
}
a:hover {
color:#FFD700;
}
#wrapper {
max-width:1320px ;
margin:0 auto ;
width:100% ;
box-sizing:border-box ;
}
@media (min-width:769px) and (max-width:1385px) {
#wrapper {
width:100% ;
margin:0 ;
max-width:none ;
padding:40px 15px ;
}
}
#contents {
float:right ;
padding:0 0 0 30px ;
}
#contents .topicpath-nav {
margin-bottom:5px ;
}
#contents .topicpath-nav li {
padding:0 ;
}
#contents .topicpath-nav a {
margin-left:5px ;
}
#side .unstyled img {
display:block ;
margin-bottom:5px ;
}
.txt_l {text-align:left ;}
.txt_c {text-align:center ;}
.txt_r {text-align:right ;}
.txt_fwn {font-weight:200 ;}
.txt_fwb {font-weight:bold ;}
.txt_10 {font-size:10px ;}
.txt_12 {font-size:12px ;}
.txt_14 {font-size:14px ;}
.txt_16 {font-size:16px ;}
.txt_18 {font-size:18px ;}
.txt_20 {font-size:20px ;}
.txt_24 {font-size:24px ;}
.txt_28 {font-size:28px ;}
.txt_c_333 {color:#fff;}
.pc-header-link {
display:flex ;
align-items:center ;
color:#333333;
text-decoration:none ;
font-size:14px ;
line-height:1.4 ;
}
.pc-header-link:hover {
color:#666666;
text-decoration:none ;
}
.pc-header-link .material-icons-outlined {
font-size:16px ;
line-height:16px ;
margin-right:5px ;
vertical-align:middle ;
color:#333333;
}
ul.inline.pull-right.col-sm-12.hidden-phone.txt_r li a.pc-header-link {
display:flex ;
align-items:center ;
color:#333333;
text-decoration:none ;
}
.bgc_gray {
background-color:#f1f1f1;
}
.mar_auto {margin:0 auto ;}
.mar_0 {margin:0 ;}
.mar_t_0 {margin-top:0 ;}
.mar_r_0 {margin-right:0 ;}
.mar_b_0 {margin-bottom:0 ;}
.mar_l_0 {margin-left:0 ;}
.mar_5 {margin:5px ;}
.mar_t_5 {margin-top:5px ;}
.mar_r_5 {margin-right:5px ;}
.mar_b_5 {margin-bottom:5px ;}
.mar_l_5 {margin-left:5px ;}
.mar_t_10 {margin-top:10px ;}
.mar_r_10 {margin-right:10px ;}
.mar_b_10 {margin-bottom:10px ;}
.mar_l_10 {margin-left:10px ;}
.mar_t_20 {margin-top:20px ;}
.mar_r_20 {margin-right:20px ;}
.mar_b_20 {margin-bottom:20px ;}
.mar_l_20 {margin-left:20px ;}
.mar_t_30 {margin-top:30px ;}
.mar_r_30 {margin-right:30px ;}
.mar_b_30 {margin-bottom:30px ;}
.mar_l_30 {margin-left:30px ;}
.mar_t_50 {margin-top:50px ;}
.mar_r_50 {margin-right:50px ;}
.mar_b_50 {margin-bottom:50px ;}
.mar_l_50 {margin-left:50px ;}
.pad_v_10 {padding:10px 0 ;}
.pad_v_20 {padding:20px 0 ;}
.pad_v_30 {padding:30px 0 ;}
.pad_0 {padding:0 ;}
.pad_t_0 {padding-top:0 ;}
.pad_r_0 {padding-right:0 ;}
.pad_b_0 {padding-bottom:0 ;}
.pad_l_0 {padding-left:0 ;}
.pad_5 {padding:5px ;}
.pad_t_5 {padding-top:5px ;}
.pad_r_5 {padding-right:5px ;}
.pad_b_5 {padding-bottom:5px ;}
.pad_l_5 {padding-left:5px ;}
.pad_10 {padding:10px ;}
.pad_t_10 {padding-top:10px ;}
.pad_r_10 {padding-right:10px ;}
.pad_b_10 {padding-bottom:10px ;}
.pad_l_10 {padding-left:10px ;}
.pad_20 {padding:20px ;}
.pad_t_20 {padding-top:20px ;}
.pad_r_20 {padding-right:20px ;}
.pad_b_20 {padding-bottom:20px ;}
.pad_l_20 {padding-left:20px ;}
.pad_30 {padding:30px}
.pad_t_30 {padding-top:30px ;}
.pad_t_40 {padding-top:40px ;}
.pad_r_30 {padding-right:30px ;}
.pad_b_30 {padding-bottom:30px ;}
.pad_l_30 {padding-left:30px ;}
.bor_t_1 {border-top:0px solid #eee;}
.bor_r_1 {border-right:1px solid #eee;}
.bor_b_1 {border-bottom:0px solid #eee;}
.bor_l_1 {border-left:1px solid #eee;}
.va-10 {vertical-align:-10% ;}
.va-20 {vertical-align:-20% ;}
.va-30 {vertical-align:-30% ;}
.va-35 {vertical-align:-35% ;}
.va-40 {vertical-align:-40% ;}
@media (max-width:980px) {
#base_gmoWrapp,
#gmo_CMSPbar {
overflow:hidden ;
min-width:100% ;
width:100% ;
}
}
@media (max-width:768px) {
#contents {
padding-left:0 ;
}
}
.icon-user {background-position:-208px 0px ;}
.icon-lg-b.icon-user {background-position:-312px 0px ;}
.icon-adduser {background-position:-240px 0px ;}
.icon-lg-b.icon-adduser {background-position:-360px 0px ;}
.icon-login {background-position:-48px -80px ;}
.icon-lg-b.icon-login {background-position:-72px -120px ;}
.icon-logout {background-position:-32px -80px ;}
.icon-lg-b.icon-logout {background-position:-48px -120px ;}
.icon-home {background-position:-176px -16px ;}
.icon-lg-b.icon-home {background-position:-264px -24px ;}
.icon-mail {background-position:-64px 0px ;}
.icon-lg-b.icon-mail {background-position:-96px 0px ;}
.icon-pencil {background-position:-96px 0px ;}
.icon-lg-b.icon-pencil {background-position:-144px 0px ;}
.icon-help {background-position:-272px -80px ;}
.icon-lg-b.icon-help {background-position:-408px -120px ;}
.icon-cart {background-position:-176px -64px ;}
.icon-lg-b.icon-cart {background-position:-264px -96px ;}
.icon-search {background-position:-208px -16px ;}
.icon-lg-b.icon-search {background-position:-312px -24px ;}
.icon-chevron_up {background-position:-0px -144px ;}
.icon-lg-b.icon-chevron_up {background-position:-0px -216px ;}
.icon-chevron_down {background-position:-352px -128px ;}
.icon-lg-b.icon-chevron_down {background-position:-528px -192px ;}
.icon-twitter {background-position:-96px -176px ;}
.icon-lg-b.icon-twitter {background-position:-144px -264px ;}
.icon-instagram {background-position:-112px -192px ;}
.icon-lg-b.icon-instagram {background-position:-168px -288px ;}
.icon-facebook {background-position:-128px -176px ;}
.icon-lg-b.icon-facebook {background-position:-192px -264px ;}
.icon-youtube {background-position:-128px -160px ;}
.icon-lg-b.icon-youtube {background-position:-191px -240px ;}
.icon-b,
.icon-w {
width:16px ;
height:16px ;
display:inline-block ;
*display:inline ;
*zoom:1 ;
}
.icon-lg-b,
.icon-lg-w {
width:24px ;
height:24px ;
display:inline-block ;
*display:inline ;
*zoom:1 ;
}
.icon-b {background-image:url(https://img.shop-pro.jp/tmpl_img/73/icon16_b.png) ;}
.icon-w {background-image:url(https://img.shop-pro.jp/tmpl_img/73/icon16_w.png) ;}
.icon-lg-b {background-image:url(https://img.shop-pro.jp/tmpl_img/73/icon24_b.png) ;}
.icon-lg-w {background-image:url(https://img.shop-pro.jp/tmpl_img/73/icon24_w.png) ;}
@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2 / 1),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx) {
.icon-b,
.icon-w {
-webkit-background-size:368px 320px ;
background-size:368px 320px ;
}
.icon-lg-b,
.icon-lg-w {
-webkit-background-size:552px 480px ;
background-size:552px 480px ;
}
.icon-b {background-image:url(https://img.shop-pro.jp/tmpl_img/73/icon16_2x_b.png) ;}
.icon-w {background-image:url(https://img.shop-pro.jp/tmpl_img/73/icon16_2x_w.png) ;}
.icon-lg-b {background-image:url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_b.png) ;}
.icon-lg-w {background-image:url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_w.png) ;}
}
@media (max-width:768px) {
.icon-b {background-image:url(https://img.shop-pro.jp/tmpl_img/73/icon24_b.png) ;}
.icon-w {background-image:url(https://img.shop-pro.jp/tmpl_img/73/icon24_w.png) ;}
}
@media only screen and (max-width:768px) and (-webkit-min-device-pixel-ratio:2),only screen and (max-width:768px) and (min--moz-device-pixel-ratio:2),only screen and (max-width:768px) and (-o-min-device-pixel-ratio:2 / 1),only screen and (max-width:768px) and (min-device-pixel-ratio:2),only screen and (max-width:768px) and (min-resolution:192dpi),only screen and (max-width:768px) and (min-resolution:2dppx) {
.icon-b {background-image:url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_b.png) ;}
.icon-w {background-image:url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_w.png) ;}
}
.mobile-menu-toggle {
position:static ;
top:auto ;
right:auto ;
z-index:auto ;
background:none ;
border:none ;
padding:0 ;
cursor:pointer ;
transition:all 0.3s ease ;
display:flex ;
align-items:center ;
justify-content:center ;
width:36px ;
height:36px ;
border-radius:6px ;
}
.mobile-menu-toggle:hover {
background:rgba(255,255,255,0.1) ;
}
.hamburger-icon {
display:block ;
width:18px ;
height:14px ;
position:relative ;
}
.hamburger-icon span {
display:block ;
height:2px ;
width:100% ;
background:#333333;
position:absolute ;
left:0 ;
transition:all 0.3s ease ;
}
.hamburger-icon span:nth-child(1) {top:0 ;}
.hamburger-icon span:nth-child(2) {top:6px ;}
.hamburger-icon span:nth-child(3) {top:12px ;}
.mobile-menu-toggle.active .hamburger-icon span:nth-child(1) {
transform:rotate(45deg) ;
top:6px ;
}
.mobile-menu-toggle.active .hamburger-icon span:nth-child(2) {
opacity:0 ;
}
.mobile-menu-toggle.active .hamburger-icon span:nth-child(3) {
transform:rotate(-45deg) ;
top:6px ;
}
.mobile-menu {
position:fixed ;
top:0 ;
left:-300px ;
width:280px ;
height:100vh ;
background:#040c17 ;
color:#ffffff ;
z-index:1000 ;
transition:left 0.3s ease ;
overflow-y:auto ;
box-shadow:2px 0 10px rgba(0,0,0,0.3) ;
}
.mobile-menu.active {
left:0 ;
}
.mobile-menu-header {
background:rgba(0,0,0,0.1) ;
padding:20px ;
color:#ffffff ;
display:flex ;
justify-content:flex-start ;
align-items:center ;
border-bottom:1px solid rgba(255,255,255,0.1) ;
}
.mobile-menu-header h3 {
margin:0 ;
font-size:18px ;
font-weight:bold ;
color:#ffffff ;
}
.mobile-menu-list {
list-style:none ;
padding:0 ;
margin:0 ;
}
.mobile-menu-list > li {
border-bottom:1px solid rgba(255,255,255,0.1) ;
}
.mobile-menu-list > li > a {
display:flex ;
align-items:center ;
padding:15px 20px ;
color:#ffffff ;
text-decoration:none ;
font-size:16px ;
transition:background-color 0.2s ease ;
}
.mobile-menu-list > li > a:hover {
background:rgba(255,255,255,0.1) ;
color:#ffffff ;
}
.mobile-menu-list > li > a i {
margin-right:10px ;
width:20px ;
}
.mobile-menu-list > li > a .material-icons-outlined {
margin-right:10px ;
width:20px ;
font-size:20px ;
flex-shrink:0 ;
}
.material-icons-outlined.va-10 {
font-size:16px ;
line-height:16px ;
display:inline-flex ;
align-items:center ;
vertical-align:middle ;
margin-top:0 ;
margin-bottom:0 ;
}
.material-icons-outlined.va-30 {
font-size:20px ;
line-height:1 ;
display:inline-block ;
vertical-align:middle ;
}
.mobile-top-btn {
display:flex ;
align-items:center ;
justify-content:center ;
width:40px ;
height:40px ;
color:#333333;
text-decoration:none ;
}
.mobile-top-btn .material-icons-outlined {
font-size:24px ;
color:#333333;
}
.menu-category {
background:rgba(0,0,0,0.1) ;
}
.menu-category-title {
display:block ;
padding:15px 20px ;
color:#ffffff ;
font-weight:bold ;
font-size:14px ;
text-transform:uppercase ;
letter-spacing:0.5px ;
opacity:0.8 ;
}
.menu-category-list {
list-style:none ;
padding:0 ;
margin:0 ;
background:transparent ;
}
.menu-category-list li {
border-bottom:1px solid rgba(255,255,255,0.05) ;
}
.menu-category-list li:last-child {
border-bottom:none ;
}
.menu-category-list a {
display:block ;
padding:12px 40px ;
color:#ffffff ;
text-decoration:none ;
font-size:14px ;
transition:all 0.3s ease ;
opacity:0.9 ;
}
.menu-category-list a:hover {
background:rgba(255,255,255,0.1) ;
color:#ffffff ;
padding-left:45px ;
opacity:1 ;
}
.mobile-top-bar {
display:flex ;
justify-content:space-between ;
align-items:center ;
padding:15px 10px 15px 10px ;
background:#ffffff;
color:#333333;
margin-bottom:15px ;
position:relative ;
}
.mobile-top-left {
flex:1 ;
max-width:calc(100% - 120px) ;
padding-left:0 ;
}
.mobile-top-left .txt_24 {
font-size:16px ;
margin:0 ;
line-height:1.2 ;
}
.mobile-top-left .txt_24 a {
color:#333333;
text-decoration:none ;
display:block ;
max-width:250px ;
text-overflow:ellipsis ;
white-space:nowrap ;
}
@media (max-width:768px) {
#header .mobile-top-left .txt_24 a img,
.mobile-top-left .txt_24 a img {
max-width:200px ;
height:auto ;
display:block ;
width:auto ;
}
}
.mobile-top-left .txt_10 {
font-size:9px ;
margin:2px 0 0 0 ;
color:#666666;
opacity:0.8 ;
display:none ;
}
.mobile-top-right {
display:flex ;
gap:5px ;
flex-shrink:0 ;
position:absolute ;
top:50% ;
right:8px ;
transform:translateY(-50%) ;
z-index:1002 ;
}
.mobile-top-btn {
display:flex ;
align-items:center ;
justify-content:center ;
width:36px ;
height:36px ;
background:none ;
border:none ;
color:#333333;
text-decoration:none ;
transition:all 0.3s ease ;
cursor:pointer ;
border-radius:6px ;
}
.mobile-top-btn:hover {
background:rgba(0,0,0,0.1) ;
color:#333333;
}
.mobile-top-btn i {
font-size:18px ;
}
.mobile-top-btn .material-icons-outlined {
font-size:24px ;
color:#333333;
}
.mobile-menu-overlay {
position:fixed ;
top:0 ;
left:0 ;
width:100% ;
height:100% ;
background:rgba(0,0,0,0.5) ;
z-index:999 ;
opacity:0 ;
visibility:hidden ;
transition:all 0.3s ease ;
}
.mobile-menu-overlay.active {
opacity:1 ;
visibility:visible ;
}
@media (max-width:768px) {
.inline.mar_t_30.bor_t_1.bor_b_1 {
display:none ;
}
#header > .txt_24:not(.mobile-top-bar .txt_24) {
display:none ;
}
#header > .txt_10:not(.mobile-top-bar .txt_10) {
display:none ;
}
}
body.mobile-menu-open {
overflow:hidden ;
position:fixed ;
width:100% ;
}
@media (min-width:769px) {
.mobile-menu-toggle,
.mobile-menu,
.mobile-top-bar {
display:none ;
}
}
@media (max-width:768px) {
#side {
display:none !important ;
}
.mobile-menu-content {
padding:20px ;
}
.mobile-menu-section {
margin-bottom:30px ;
padding-bottom:20px ;
border-bottom:1px solid rgba(255,255,255,0.1) ;
}
.mobile-menu-section:last-child {
border-bottom:none ;
}
.mobile-menu-section h4 {
color:#FFD700 ;
font-size:16px ;
margin-bottom:15px ;
display:flex ;
align-items:center ;
gap:8px ;
}
.mobile-menu-section .material-icons-outlined {
font-size:20px ;
}
.mobile-mini-chart-buttons {
display:flex ;
gap:8px ;
margin-bottom:10px ;
flex-wrap:wrap ;
}
.mobile-mini-chart-buttons button {
padding:6px 12px ;
font-size:12px ;
background:rgba(255,255,255,0.1) ;
border:1px solid rgba(255,255,255,0.2) ;
color:#ffffff ;
border-radius:4px ;
cursor:pointer ;
transition:all 0.3s ease ;
}
.mobile-mini-chart-buttons button:hover,
.mobile-mini-chart-buttons button.active {
background:#FFD700 ;
color:#000 ;
}
#mobile-mini-chart-display {
background:rgba(255,255,255,0.05) ;
border:1px solid rgba(255,255,255,0.1) ;
border-radius:8px ;
padding:15px ;
min-height:200px ;
position:relative ;
}

/* ミニチャート内のページリンクボタン */
#mobile-mini-chart-display .chart-page-link,
#mobile-chart-display .chart-page-link,
.mini-chart-display .chart-page-link {
position:absolute ;
top:5px ;
right:5px ;
padding:4px ;
background:rgba(0, 0, 0, 0.5) ;
border:1px solid rgba(255, 215, 0, 0.2) ;
border-radius:4px ;
color:#FFD700 ;
text-decoration:none ;
transition:all 0.3s ease ;
opacity:0.6 ;
z-index:10 ;
width:22px ;
height:22px ;
display:flex ;
align-items:center ;
justify-content:center ;
}

#mobile-mini-chart-display .chart-page-link:hover,
#mobile-chart-display .chart-page-link:hover,
.mini-chart-display .chart-page-link:hover {
background:rgba(255, 215, 0, 0.15) ;
border-color:#FFD700 ;
opacity:1 ;
}

#mobile-mini-chart-display .chart-page-link i,
#mobile-chart-display .chart-page-link i,
.mini-chart-display .chart-page-link i {
font-size:12px ;
line-height:1 ;
margin:0 ;
}

/* お知らせセクション - マーケットニュースと同じスタイル */
.shop-announcements {
background:linear-gradient(135deg,rgba(26,26,26,0.98) 0%,rgba(15,15,15,0.95) 100%) ;
border:1px solid rgba(255,215,0,0.15) ;
border-radius:12px ;
padding:20px ;
margin:20px auto ;
max-width:1200px ;
box-shadow:0 4px 20px rgba(0,0,0,0.3) ;
}

.shop-announcements h3 {
color:#FFD700 ;
font-size:18px ;
font-weight:600 ;
margin:0 0 15px 0 ;
padding-bottom:10px ;
border-bottom:1px solid rgba(255,215,0,0.2) ;
display:flex ;
align-items:center ;
gap:8px ;
}

.shop-announcements h3 i {
font-size:20px ;
}

.shop-announcements ul {
list-style:none ;
padding:0 ;
margin:0 ;
}

.shop-announcements ul li {
padding:12px 15px ;
margin-bottom:8px ;
background:rgba(255,255,255,0.03) ;
border-left:3px solid #FFD700 ;
border-radius:4px ;
transition:all 0.3s ease ;
color:#ffffff ;
font-size:14px ;
line-height:1.6 ;
}

.shop-announcements ul li:hover {
background:rgba(255,215,0,0.05) ;
transform:translateX(5px) ;
}

.shop-announcements ul li:last-child {
margin-bottom:0 ;
}

.shop-announcements .announcement-date {
color:#FFD700 ;
font-weight:600 ;
margin-right:10px ;
font-size:13px ;
}

.shop-announcements ul li a {
color:#ffffff ;
text-decoration:none ;
transition:color 0.3s ease ;
}

.shop-announcements ul li a:hover {
color:#FFD700 ;
text-decoration:underline ;
}

/* レスポンシブ対応 */
@media (max-width:768px) {
.shop-announcements {
margin:15px 10px ;
padding:15px ;
border-radius:8px ;
}

.shop-announcements h3 {
font-size:16px ;
margin-bottom:12px ;
}

.shop-announcements ul li {
padding:10px 12px ;
margin-bottom:6px ;
font-size:13px ;
}

.shop-announcements .announcement-date {
font-size:12px ;
display:block ;
margin-bottom:4px ;
}
}
.mobile-menu-section ul {
list-style:none ;
padding:0 ;
margin:0 ;
}
.mobile-menu-section ul li {
margin-bottom:10px ;
}
.mobile-menu-section ul li a {
color:#ffffff ;
text-decoration:none ;
padding:8px 12px ;
display:block ;
border:1px solid rgba(255,255,255,0.2) ;
border-radius:6px ;
transition:all 0.3s ease ;
}
.mobile-menu-section ul li a:hover {
background:rgba(255,215,0,0.2) ;
border-color:#FFD700 ;
}
.mobile-search-form {
margin-top:10px ;
}
.mobile-search-form input {
width:100% ;
padding:8px 12px ;
background:rgba(255,255,255,0.1) ;
border:1px solid rgba(255,255,255,0.2) ;
color:#ffffff ;
border-radius:4px ;
margin-bottom:8px ;
}
.mobile-search-form button {
width:100% ;
padding:8px ;
background:#FFD700 ;
color:#000 ;
border:none ;
border-radius:4px ;
cursor:pointer ;
font-weight:bold ;
}
.hidden-phone {
display:none ;
}
.visible-phone {
display:block ;
}
.container {
padding-left:-20px ;
padding-right:-20px ;
}
div #header,
#header {
background:#ffffff;
padding:0 ;
color:#333333;
margin-top:0px ;
margin-left:-20 ;
margin-right:-20 ;
}
}
#header.mar_b_30 {
margin-bottom:0 ;
}
#header .txt_24 {
color:#333333;
}
#header a {
color:#333333;
text-decoration:none ;
}
#header a:hover {
color:#666666;
}
ul.inline.pull-right.col-sm-12.hidden-phone.txt_r li a.pc-header-link {
display:flex ;
align-items:center ;
color:#333333;
text-decoration:none ;
}
.product-card {
padding:0 ;
margin-bottom:30px ;
display:flex ;
flex-direction:column ;
}
.col-lg-4.product-card {
width:calc(32%) ;
margin-right:2% ;
margin-bottom:30px ;
display:flex ;
flex-direction:column ;
}
.col-lg-4.product-card:nth-child(3n) {
margin-right:0 ;
}
ul.row.unstyled {
display:flex ;
flex-wrap:wrap ;
align-items:stretch ;
}
.product-wrapper {
background:linear-gradient(135deg,#040c17 0%,#3a3f4a 30%,#4a5568 70%,#2d3748 100%);
border-radius:25px ;
padding:8% ;
position:relative ;
color:#ffffff;
height:100% ;
display:flex ;
flex-direction:column ;
flex:1 ;
box-shadow:0 4px 15px rgba(0,0,0,0.3),0 2px 5px rgba(0,0,0,0.2) ;
border:1px solid rgba(255,255,255,0.1) ;
transition:all 0.3s ease ;
}
.product-wrapper:hover {
background:linear-gradient(135deg,#040c17 0%,#4a5568 30%,#5a6c7d 70%,#3a4a5c 100%);
transform:translateY(-2px) ;
box-shadow:0 8px 25px rgba(0,0,0,0.4),0 4px 10px rgba(0,0,0,0.3) ;
border:1px solid rgba(255,255,255,0.2) ;
}
@media (max-width:768px){
.product-wrapper {
    background:linear-gradient(135deg, < {
            $page_bgcolor
        }

        > 0%, #3a3f4a 30%, #4a5568 70%, #2d3748 100%);
    border-radius:13px;
    padding:8%;
}
}

.favorite-btn {
position:absolute ;
top:10px ;
right:10px ;
z-index:10 ;
}
.heart-icon {
background:none ;
border:none ;
color:#ffffff;
font-size:18px ;
cursor:pointer ;
padding:3px ;
}
.heart-icon:hover {
color:#ff6b6b;
}
.product-image {
text-align:center ;
margin:6% 5% 10% 5% ;
width:90% ;
height:0 ;
padding-bottom:90% ;
position:relative ;
overflow:hidden ;
border-radius:4px ;
background-color:transparent ;
}
.product-img {
position:absolute ;
top:0 ;
left:0 ;
width:100% ;
height:100% ;
object-fit:contain ;
border-radius:4px ;
}
.product-info {
flex-grow:1 ;
display:flex ;
flex-direction:column ;
}
.product-title {
margin:0 0 10px 0 ;
font-size:18px ;
font-weight:200 ;
line-height:1.2 ;
}
.product-title a {
color:#ffffff;
text-decoration:none ;
}
.product-title a:hover {
color:#cccccc;
}
.product-details {
margin-bottom:10px ;
font-size:12px ;
color:#b0b0b0;
line-height:1.3 ;
}
.weight {
font-weight:200 ;
}
.product-description {
margin-bottom:15px ;
font-size:12px ;
line-height:1.3 ;
color:#cccccc;
}
.price-section {
margin-bottom:15px ;
flex-grow:1 ;
}
.main-price {
font-size:18px ;
font-weight:200 ;
color:#ffffff;
margin-bottom:3px ;
line-height:1.1 ;
}
.price-note {
font-size:11px ;
color:#b0b0b0;
margin-bottom:5px ;
line-height:1.2 ;
}
.premium-info {
font-size:11px ;
color:#b0b0b0;
line-height:1.2 ;
}
.sold-out {
font-size:16px ;
color:#ff6b6b;
font-weight:normal ;
text-align:center ;
padding:10px 0 ;
line-height:1.2 ;
}
.cart-section {
margin-top:auto ;
}
.add-to-cart-btn {
width:100% ;
padding:8px 15px ;
background:#f0f0f0;
color:#333333;
border:none ;
border-radius:4px ;
font-size:13px ;
font-weight:normal ;
cursor:pointer ;
transition:background-color 0.3s ease ;
}
.add-to-cart-btn:hover {
background:#e0e0e0;
}
.price-ticker-wrapper {
background:linear-gradient(90deg,#1a1a1a 0%,#2d2d2d 100%);
color:white ;
padding:4px 0 ;
overflow:hidden ;
position:relative ;
margin-bottom:10px ;
border-radius:4px ;
box-shadow:0 2px 8px rgba(0,0,0,0.15) ;
}
.price-ticker {
display:flex ;
white-space:nowrap ;
animation:scroll-left 40s linear infinite ;
align-items:center ;
}
.price-item {
display:inline-flex ;
align-items:center ;
padding:0 25px ;
cursor:pointer ;
transition:all 0.3s ease ;
text-decoration:none ;
color:white ;
font-size:14px ;
font-weight:500 ;
border-right:1px solid rgba(255,255,255,0.1) ;
}
.price-item:last-child {
border-right:none ;
}
.price-item:hover {
background-color:rgba(255,255,255,0.1) ;
text-decoration:none ;
color:white ;
transform:translateY(-1px) ;
}
.price-item.trend-up {
background-color:rgba(76,175,80,0.1) ;
}
.price-item.trend-up .metal-change {
color:#4caf50;
}
.price-item.trend-down {
background-color:rgba(244,67,54,0.1) ;
}
.price-item.trend-down .metal-change {
color:#f44336;
}
.price-item.trend-neutral .metal-change {
color:#9e9e9e;
}
.metal-name {
font-weight:bold ;
margin-right:12px ;
font-size:13px ;
color:#ffffff;
}
.metal-price {
font-size:15px ;
font-weight:bold ;
margin-right:8px ;
color:#ffd700;
}
.metal-change {
font-size:12px ;
font-weight:bold ;
padding:2px 6px ;
border-radius:3px ;
background-color:rgba(255,255,255,0.1) ;
}
.loading-message {
display:flex ;
align-items:center ;
justify-content:center ;
width:100% ;
padding:10px ;
color:#ccc;
font-size:13px ;
}
.error-message {
color:#f44336;
font-size:13px ;
padding:10px ;
}
@keyframes scroll-left {
0% {transform:translateX(100%) ;}
100% {transform:translateX(-100%) ;}
}
@media (max-width:768px) {
.price-ticker-wrapper {
padding:6px 0 ;
height:auto ;
}
.price-ticker {
animation-duration:30s ;
}
.price-item {
padding:0 20px ;
font-size:13px ;
height:20px ;
}
.metal-name {
font-size:12px ;
margin-right:10px ;
}
.metal-price {
font-size:14px ;
}
.metal-change {
font-size:11px ;
}
}
@media (max-width:480px) {
.price-ticker {
animation-duration:25s ;
}
.price-item {
padding:0 15px ;
font-size:12px ;
}
.metal-name {
font-size:11px ;
margin-right:8px ;
}
.metal-price {
font-size:13px ;
}
.metal-change {
font-size:10px ;
padding:1px 4px ;
}
}
.coin-flipper {
width:100% ;
height:100% ;
perspective:1000px ;
}
.coin-inner {
position:relative ;
width:100% ;
height:100% ;
text-align:center ;
transition:transform 0.8s cubic-bezier(0.175,0.885,0.32,1.275) ;
transform-style:preserve-3d ;
padding-bottom:100% ;
}
.product-card:hover .coin-inner {
transform:rotateY(180deg) ;
}
.coin-front,.coin-back {
position:absolute ;
width:100% ;
height:100% ;
-webkit-backface-visibility:hidden ;
backface-visibility:hidden ;
border-radius:12px ;
overflow:hidden ;
}
.coin-back {
transform:rotateY(180deg) ;
}
.coin-front .product-img,
.coin-back .product-img {
width:85% ;
height:85% ;
object-fit:contain ;
padding:7.5% ;
background:transparent ;
}
.coin-back-img {
filter:sepia(20%) saturate(80%) hue-rotate(10deg) ;
}
.coin-front a,
.coin-back a {
display:block ;
width:100% ;
height:100% ;
text-decoration:none ;
}
@media (max-width:768px) {
.product-card:active .coin-inner {
transform:rotateY(180deg) ;
}
}
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
.xb-article {
background-color:transparent ;
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif ;
line-height:1.75 ;
padding:25px 0px ;
margin:0 ;
}
.xb-container {
margin:0 auto ;
background-color:#f5f5f5;
padding:30px 40px 40px 40px ;
border-radius:20px ;
box-shadow:0 2px 10px rgba(0,0,0,0.1) ;
}
.xb-article h1 {
font-family:'Inter', 'Noto Sans JP', sans-serif ;
color:#2c3e50;
font-size:28px ;
line-height:1.5 ;
border-bottom:3px solid #040c17;
padding-bottom:15px ;
margin-bottom:30px ;
text-align:left ;
font-weight:400 ;
}
.xb-article h2 {
font-family:'Inter', 'Noto Sans JP', sans-serif ;
color:#34495e;
font-size:22px ;
margin-top:40px ;
margin-bottom:20px ;
border-left:4px solid #040c17;
padding-left:15px ;
text-align:left ;
font-weight:400 ;
}
.xb-article h3 {
color:#2c3e50;
font-size:18px ;
margin-top:30px ;
margin-bottom:15px ;
text-align:left ;
font-weight:400 ;
}
.xb-article p {
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif ;
text-align:left ;
font-size:16px ;
margin-bottom:20px ;
color:#333;
}
.xb-highlight {
background-color:#fff3cd;
padding:2px 6px ;
border-radius:3px ;
font-weight:bold ;
}
.xb-strong-point {
font-size:18px ;
font-weight:bold ;
color:#2c3e50;
}
.xb-article-image {
display:block ;
margin:30px auto ;
max-width:100% ;
height:auto ;
border-radius:8px ;
box-shadow:0 4px 8px rgba(0,0,0,0.1) ;
}
.xb-author-info {
margin-top:50px ;
padding:20px ;
background-color:#f8f9fa;
border-radius:8px ;
border-left:4px solid #040c17;
}
.xb-author-name {
font-family:'Inter', 'Noto Sans JP', sans-serif ;
font-weight:600 ;
color:#2c3e50;
margin-bottom:5px ;
font-size:16px ;
}
.xb-author-title {
font-weight:normal ;
color:#555;
margin-bottom:8px ;
font-size:14px ;
}
.xb-publish-date {
color:#666;
font-size:14px ;
}
@media (min-width:768px) {
.xb-article-image-float {
float:right ;
margin:0 0 20px 30px ;
max-width:400px ;
}
}
@media (max-width:767px) {
.xb-container {
padding:20px 20px 20px 20px ;
}
.xb-article h1 {
font-size:24px ;
}
.xb-article h2 {
font-size:20px ;
}
}
.xb-category-grid {
display:grid ;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) ;
gap:25px ;
margin-bottom:50px ;
margin-top:25px ;
}
.xb-content-card {
padding:25px ;
border:1px solid #e0e0e0;
border-radius:12px ;
background-color:#ffffff;
height:auto ;
transition:all 0.3s ease ;
box-shadow:0 2px 8px rgba(0,0,0,0.08) ;
}
.xb-content-card:hover {
box-shadow:0 8px 25px rgba(0,0,0,0.12) ;
transform:translateY(-3px) ;
border-color:#c8860d;
}
.xb-content-card-title {
margin-bottom:15px ;
font-size:18px ;
line-height:1.4 ;
font-weight:600 ;
}
.xb-content-card-title a {
color:#2c3e50;
text-decoration:none ;
display:block ;
transition:color 0.3s ease ;
}
.xb-content-card-title a:hover {
color:#c8860d;
}
.xb-content-card-description {
color:#666;
font-size:15px ;
line-height:1.6 ;
margin:0 ;
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif ;
}
.xb-article h2 {
font-family:'Inter', 'Noto Sans JP', sans-serif ;
color:#34495e;
font-size:22px ;
margin-top:50px ;
margin-bottom:25px ;
border-left:4px solid #040c17;
padding-left:15px ;
text-align:left ;
font-weight:700 ;
}
@media (max-width:767px) {
.xb-category-grid {
grid-template-columns:1fr ;
gap:25px ;
margin-bottom:40px ;
margin-top:20px ;
}
.xb-content-card {
padding:20px ;
margin-bottom:5px ;
}
.xb-content-card-title {
font-size:16px ;
}
.xb-content-card-description {
font-size:14px ;
}
}
#yokohama-content-categories {
margin-bottom:10px ;
}
.material-icons-outlined {
font-family:'Material Icons Outlined';
font-weight:normal ;
font-style:normal ;
font-size:inherit ;
line-height:1 ;
letter-spacing:normal ;
text-transform:none ;
display:inline-block ;
white-space:nowrap ;
word-wrap:normal ;
direction:ltr ;
-webkit-font-feature-settings:'liga';
-webkit-font-smoothing:antialiased ;
vertical-align:middle ;
}
.category-icon {
font-size:22px ;
margin-right:10px ;
color:#ffffff ;
vertical-align:middle ;
}
.subcategory-icon {
font-size:16px ;
margin-right:6px ;
color:#ffffff ;
vertical-align:middle ;
opacity:0.8 ;
}
.yokohama-content-navigation {
margin-bottom:15px ;
}
.yokohama-content-navigation h4 {
font-size:14px ;
font-weight:200 ;
color:#ffffff ;
margin-bottom:8px ;
padding:8px 10px ;
background-color:#040c17 ;
display:flex ;
align-items:center ;
border-bottom:1px solid #eee;
padding-bottom:8px ;
}
.content-categories {
list-style:none ;
margin:0 ;
padding:0 ;
background-color:#040c17 ;
margin-bottom:10px ;
}
.content-categories .category-header {
background-color:#040c17 ;
}
.content-categories .category-header .category-title {
display:flex ;
align-items:center ;
padding:8px 10px ;
color:#ffffff ;
font-weight:200 ;
font-size:13px ;
margin:0 ;
}
.content-categories .category-article a {
display:block ;
padding:8px 10px 8px 20px ;
color:#ffffff ;
text-decoration:none ;
font-size:13px ;
transition:all 0.2s ease ;
}
.content-categories .category-article a:hover {
background-color:rgba(255,255,255,0.1) ;
color:#ffffff ;
}
.content-categories a {
display:block ;
padding:10px ;
color:#ffffff ;
text-decoration:none ;
font-size:14px ;
transition:background-color 0.2s ease ;
}
.content-categories a:hover {
background-color:rgba(255,255,255,0.1) ;
color:#ffffff ;
}
.yokohama-recent-articles {
margin-bottom:15px ;
margin-top:15px ;
}
.yokohama-recent-articles h4 {
font-size:14px ;
font-weight:600 ;
color:#ffffff ;
margin-bottom:8px ;
padding:8px 10px ;
background-color:#040c17 ;
display:flex ;
align-items:center ;
border-bottom:1px solid #eee;
padding-bottom:8px ;
}
.yokohama-recent-articles ul {
list-style:none ;
margin:0 ;
padding:0 ;
background-color:#040c17 ;
}
.yokohama-recent-articles li {
}
.yokohama-recent-articles li:first-child {
}
.yokohama-recent-articles a {
display:block ;
padding:8px 10px ;
color:#ffffff ;
text-decoration:none ;
font-size:13px ;
line-height:1.4 ;
transition:all 0.2s ease ;
}
.yokohama-recent-articles a:hover {
background-color:rgba(255,255,255,0.1) ;
color:#ffffff ;
}
@media (max-width:767px) {
.yokohama-content-navigation h4,
.yokohama-recent-articles h4 {
font-size:13px ;
padding:6px 8px ;
}
.content-categories a,
.yokohama-recent-articles a {
padding:8px ;
font-size:13px ;
}
#yokohama-content-categories-mobile {
margin-bottom:10px ;
}
#yokohama-content-categories-mobile .yokohama-mobile-navigation {
margin:0 ;
padding:0 ;
}
#yokohama-content-categories-mobile .mobile-category-section {
border-bottom:1px solid rgba(255,255,255,0.05) ;
padding-left:20px ;
}
#yokohama-content-categories-mobile .mobile-category-header {
display:flex ;
align-items:center ;
justify-content:space-between ;
padding:12px 20px 12px 0 ;
cursor:pointer ;
transition:all 0.3s ease ;
user-select:none ;
}
#yokohama-content-categories-mobile .mobile-category-header:hover {
background:rgba(255,255,255,0.05) ;
}
#yokohama-content-categories-mobile .mobile-category-header.expanded {
background:rgba(255,255,255,0.1) ;
}
#yokohama-content-categories-mobile .mobile-category-icon {
font-size:18px ;
color:#ffffff ;
margin-right:10px ;
}
#yokohama-content-categories-mobile .mobile-category-title {
flex:1 ;
font-size:14px ;
font-weight:bold ;
color:#ffffff ;
text-transform:uppercase ;
letter-spacing:0.5px ;
opacity:0.9 ;
}
#yokohama-content-categories-mobile .mobile-expand-icon {
font-size:18px ;
color:#ffffff ;
transition:transform 0.3s ease ;
opacity:0.7 ;
}
#yokohama-content-categories-mobile .mobile-category-header.expanded .mobile-expand-icon {
transform:rotate(180deg) ;
}
#yokohama-content-categories-mobile .mobile-category-content {
display:none ;
padding:0 0 10px 0 ;
border-top:1px solid rgba(255,255,255,0.05) ;
}
#yokohama-content-categories-mobile .mobile-subcategory-header {
display:flex ;
align-items:center ;
padding:8px 0 8px 20px ;
font-size:13px ;
font-weight:600 ;
color:#ffffff ;
opacity:0.8 ;
text-transform:none ;
letter-spacing:0.3px ;
}
#yokohama-content-categories-mobile .mobile-subcategory-icon {
font-size:16px ;
color:#ffffff ;
margin-right:8px ;
opacity:0.6 ;
}
#yokohama-content-categories-mobile .mobile-subcategory-title {
font-size:13px ;
font-weight:600 ;
color:#ffffff ;
opacity:0.8 ;
}
#yokohama-content-categories-mobile .mobile-article-link {
display:block ;
padding:6px 0 6px 40px ;
font-size:12px ;
color:#ffffff ;
opacity:0.7 ;
text-decoration:none ;
transition:all 0.3s ease ;
}
#yokohama-content-categories-mobile .mobile-article-link:hover {
opacity:1 ;
padding-left:45px ;
color:#ffffff ;
}
#yokohama-content-categories-mobile .mobile-subarticle-link {
padding-left:50px ;
}
#yokohama-content-categories-mobile .mobile-subarticle-link:hover {
padding-left:55px ;
}
.material-icons-outlined.va-10 {
font-size:16px ;
line-height:1 ;
display:inline-block ;
vertical-align:middle ;
}
.material-icons-outlined.va-30 {
font-size:20px ;
line-height:1 ;
display:inline-block ;
vertical-align:middle ;
}
}
.precious-metals-news {
margin:30px 0 ;
padding:25px ;
background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);
border-radius:12px ;
box-shadow:0 4px 15px rgba(0,0,0,0.1) ;
border:1px solid rgba(0,0,0,0.08) ;
}
.news-section-title {
font-family:'Inter', 'Noto Sans JP', sans-serif ;
font-size:24px ;
font-weight:700 ;
color:#2c3e50;
margin-bottom:25px ;
padding-bottom:15px ;
border-bottom:3px solid #c8860d;
display:flex ;
align-items:center ;
}
.news-section-title .material-icons-outlined {
font-size:28px ;
margin-right:12px ;
color:#c8860d;
}
.news-grid {
display:grid ;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) ;
gap:20px ;
margin-bottom:20px ;
}
.news-item {
background:transparent ;
padding:0px ;
border-radius:0px ;
margin-bottom:20px ;
}
.news-category {
display:inline-block ;
padding:4px 8px ;
border-radius:12px ;
font-size:0.8em ;
font-weight:bold ;
text-transform:uppercase ;
margin-right:8px ;
background:linear-gradient(135deg,#FFE55C,#D4AF37);
color:#333;
}
.news-category.gold {
background:linear-gradient(135deg,#FFE55C,#D4AF37);
color:#333;
}
.news-category.silver {
background:#C0C0C0;
color:#333;
}
.news-category.platinum {
background:#E5E4E2;
color:#333;
}
.news-category.palladium {
background:#CED0DD;
color:#333;
}
/* カテゴリーメニューの行間調整 */
.unstyled.bor_b_1.mar_b_20 li.pad_10 {
padding:5px 10px ;
}
.news-meta {
display:flex ;
justify-content:space-between ;
align-items:center ;
margin-bottom:12px ;
font-size:12px ;
color:#666;
}
.news-source {
background:#e3f2fd;
color:#1976d2;
padding:3px 8px ;
border-radius:12px ;
font-weight:500 ;
text-transform:uppercase ;
letter-spacing:0.5px ;
}
.news-date {
color:#666;
font-weight:400 ;
}
.news-title {
color:#FFD700;
margin:0 ;
font-size:16px ;
line-height:1.4 ;
font-weight:200 ;
}
.news-title a {
color:#FFD700;
text-decoration:none ;
transition:color 0.3s ease ;
}
.news-title a:hover {
text-decoration:underline ;
}
.news-summary {
color:#fff;
font-size:14px ;
line-height:1.6 ;
font-weight: 200;
margin:0 ;
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif ;
}
.news-footer {
margin-top:20px ;
padding-top:15px ;
border-top:1px solid #e0e0e0;
}
.news-disclaimer {
margin:0 ;
color:#666;
font-style:italic ;
}
.news-disclaimer small {
font-size:11px ;
line-height:1.4 ;
font-weight: 200;
}
@media (max-width:767px) {
.precious-metals-news {
margin:20px 0 ;
padding:20px 15px ;
border-radius:8px ;
}
.news-section-title {
font-size:20px ;
margin-bottom:20px ;
}
.news-section-title .material-icons-outlined {
font-size:24px ;
margin-right:8px ;
}
.news-loading {
text-align:center ;
padding:40px 20px ;
color:#666;
}
.news-error {
background:#fee;
border:1px solid #fcc;
color:#c33;
padding:15px ;
border-radius:6px ;
margin:10px 0 ;
}
@keyframes news-fade-in {
from {
opacity:0 ;
transform:translateY(20px) ;
}
to {
opacity:1 ;
transform:translateY(0) ;
}
}
.news-list-description {
background:transparent ;
padding:15px 20px ;
border-radius:8px ;
color:#ffffff;
text-align:center ;
border-left:4px solid #c8860d;
}
.news-list-main .news-list-content {
max-width:1200px ;
margin:0 auto ;
}
.news-list-main .no-news-message {
background:transparent ;
padding:40px 20px ;
border-radius:12px ;
color:#ffffff;
}
.news-list-main .news-card h3,
.news-list-main .news-card h4,
.news-list-main .news-card .news-title,
.news-list-main .news-item h3,
.news-list-main .news-item h4,
.news-list-main .news-item .news-title {
color:#ffffff;
margin-bottom:10px ;
}
.news-list-main .news-card p,
.news-list-main .news-card .news-description,
.news-list-main .news-card .news-summary,
.news-list-main .news-item p,
.news-list-main .news-item .news-description,
.news-list-main .news-item .news-summary {
color:#e0e0e0;
line-height:1.6 ;
}
.news-list-main .news-card .news-meta,
.news-list-main .news-card .news-date,
.news-list-main .news-card .news-source,
.news-list-main .news-item .news-meta,
.news-list-main .news-item .news-date,
.news-list-main .news-item .news-source {
color:#b0b0b0;
font-size:0.9em ;
}
.news-list-main .news-card a,
.news-list-main .news-item a {
color:#ffffff;
text-decoration:none ;
}
.news-list-main .news-card a:hover,
.news-list-main .news-item a:hover {
color:#c8860d;
text-decoration:underline ;
}
#yokohama-precious-metals-news-list * {
background:transparent ;
}
#yokohama-precious-metals-news-list,
#yokohama-precious-metals-news-list * {
color:#ffffff;
}
#yokohama-precious-metals-news-list a {
color:#ffffff;
}
#yokohama-precious-metals-news-list a:hover {
color:#c8860d;
}
#yokohama-precious-metals-news-list .date,
#yokohama-precious-metals-news-list .source,
#yokohama-precious-metals-news-list .meta {
color:#b0b0b0;
}
#yokohama-precious-metals-news-list .description,
#yokohama-precious-metals-news-list .summary,
#yokohama-precious-metals-news-list p {
color:#e0e0e0;
}
#sidebar h3,
.sidebar h3 {
color:#ffffff;
border-bottom-color:rgba(255,255,255,0.3) ;
}
.precious-metals-news-sidebar {
background:transparent ;
}
.precious-metals-news-sidebar * {
background:transparent ;
color:#ffffff;
}
.precious-metals-news-sidebar .loading-message,
.precious-metals-news-sidebar p {
color:#e0e0e0;
}
#sidebar .unstyled,
.sidebar .unstyled {
background:transparent ;
border-color:rgba(255,255,255,0.2) ;
}
#sidebar .unstyled li,
.sidebar .unstyled li {
background:transparent ;
border-color:rgba(255,255,255,0.1) ;
}
#sidebar .unstyled li a,
.sidebar .unstyled li a {
background:transparent ;
color:#ffffff;
text-decoration:none ;
}
#sidebar .unstyled li a:hover,
.sidebar .unstyled li a:hover {
color:#c8860d;
background:rgba(200,134,13,0.1) ;
}
#sidebar form,
.sidebar form {
background:transparent ;
}
#sidebar form select,
.sidebar form select,
#sidebar form input[type="text"],
.sidebar form input[type="text"] {
background:rgba(255,255,255,0.1) ;
color:#ffffff;
border:1px solid rgba(255,255,255,0.3) ;
border-radius:4px ;
}
#sidebar form select option,
.sidebar form select option {
background:#333333;
color:#ffffff;
}
#sidebar form .btn,
.sidebar form .btn {
background:rgba(200,134,13,0.8) ;
color:#ffffff;
border:1px solid #c8860d;
}
#sidebar form .btn:hover,
.sidebar form .btn:hover {
background:#c8860d;
}
#yokohama-content-categories,
#yokohama-content-categories * {
background:transparent ;
color:#ffffff;
}
#yokohama-content-categories a {
color:#ffffff;
}
#yokohama-content-categories a:hover {
color:#c8860d;
background:rgba(200,134,13,0.1) ;
}
#sidebar .mar_b_50 h3,
.sidebar .mar_b_50 h3 {
color:#ffffff;
}
#sidebar .mar_b_50 p,
.sidebar .mar_b_50 p {
color:#e0e0e0;
}
.news-list-main .pagination-nav {
margin-bottom:20px ;
padding:0 ;
}
.news-list-main .pagination-nav li {
margin:0 5px ;
}
.news-list-main .pagination-nav .btn {
padding:10px 20px ;
border:1px solid rgba(255,255,255,0.3) ;
background:transparent ;
color:#ffffff;
text-decoration:none ;
border-radius:6px ;
transition:all 0.2s ease ;
}
.news-list-main .pagination-nav .btn:hover:not(.disabled) {
background:#c8860d;
color:white ;
border-color:#c8860d;
}
.news-list-main .pagination-nav .btn.disabled {
background:transparent ;
color:#666666;
cursor:not-allowed ;
border-color:rgba(255,255,255,0.1) ;
}

/* スマホ版の調整 */
@media (max-width: 768px) {
  /* h3のマージン調整 */
  h3.mar_t_50 {
    margin-top: 20px !important;
  }
  
  /* ページャーのマージン調整（50px → 25px） */
  div.txt_c.mar_t_50.mar_b_50 {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  
  /* 商品セクションのボトムマージン調整（50px → 25px） */
  .mar_b_50 {
    margin-bottom: 25px !important;
  }
  
  /* スライドバナーのボトムマージンを0に */
  .custom-slideshow-container.mar_b_50 {
    margin-bottom: 0 !important;
  }
}
      
/* 既存スタイル */
.input-prepend.input-append input {
    font-size: 24px;
    padding-top: 11px;
    padding-bottom: 11px;
    width: 100px;
    text-align: right;
}

.stock_error {
    color: #DC5656;
    background: rgba(220, 86, 86, 0.1);
    border: 1px solid rgba(220, 86, 86, 0.3);
    padding: 12px;
    border-radius: 6px;
    margin-top: 15px;
    font-size: 14px;
}

/* 商品詳細ページ専用スタイル */

/* 既存スタイル */
.input-prepend.input-append input {
    font-size: 24px;
    padding-top: 11px;
    padding-bottom: 11px;
    width: 100px;
    text-align: right;
}

.stock_error {
    color: #DC5656;
    background: rgba(220, 86, 86, 0.1);
    border: 1px solid rgba(220, 86, 86, 0.3);
    padding: 12px;
    border-radius: 6px;
    margin-top: 15px;
    font-size: 14px;
}

/* 商品詳細ページ メインレイアウト */
.product-main-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 30px 0px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 商品画像セクション */
.product-image-section {
    position: relative;
}

/* メイン画像表示エリア */
.main-image-container {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    /* スライドアニメーション用 */
}

.main-product-image {
    max-width: 100%;
    max-height: 400px;
    height: auto;
    object-fit: contain;
    cursor: crosshair;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
}

/* スライドアニメーション関連のスタイルを削除
.sliding-image, .sliding-image.slide-in, .sliding-image.slide-out,
.main-image-container.animating .magnifier-glass は削除
*/

/* 虫眼鏡ZOOM機能のスタイル */
.magnifier-glass {
    position: absolute;
    border: 3px solid #ffffff;
    border-radius: 50%;
    cursor: none;
    width: 150px;
    height: 150px;
    display: none;
    background-repeat: no-repeat;
    z-index: 99;
    box-shadow:
        0 0 0 3px rgba(0, 123, 255, 0.5),
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 0 40px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(1px);
    pointer-events: none;
}

/* サムネイルギャラリー */
.thumbnail-gallery {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 15px;
}

.thumbnail-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
}

.thumbnail-image:hover {
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.thumbnail-image.active {
    border-color: #007bff;
    background: rgba(0, 123, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.3);
}

/* 画像ナビゲーションボタン */
.image-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 5;
}

.image-nav:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* 商品詳細セクション */
.product-details-section {
    padding: 0;
}

/* 商品タイトル */
.product-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 0px 0;
    color: inherit;
}

/* 価格セクション */
.price-section {
    margin-bottom: 0px;
    padding: 10px 0 10px 0;
}

.original-price {
    font-size: 18px;
    color: #888;
    text-decoration: line-through;
    margin-bottom: 5px;
}

.main-price {
    font-size: 14px;
    font-weight: normal;
    color: #ffffff;
    /* 白色 */
    margin-bottom: 8px;
}


.price-label {
    font-size: 14px;
    color: #8bb8e8;
    margin-bottom: 15px;
}

/* 配送情報 */
.delivery-info {
    color: #4CAF50;
    font-size: 13px;
    margin-bottom: 25px;
    padding: 10px;
    background: rgba(76, 175, 80, 0.1);
    border-left: 3px solid #4CAF50;
    border-radius: 4px;
}

/* 数量選択 */
.quantity-selection {
    margin-bottom: 25px;
}

.quantity-controls {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    width: fit-content;
    overflow: hidden;
}

.qty-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease;
    user-select: none;
}

.qty-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.qty-input {
    width: 70px;
    height: 45px;
    background: none;
    border: none;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    outline: none;
}

/* 購入ボタン */
.purchase-section {
    margin-bottom: 30px;
}

/* ソーシャルシェアセクション */
.social-share-section {
    margin-top: 20px;
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.add-cart-button {
    width: 100%;
    background: #28a745;
    color: #ffffff;
    border: none;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.add-cart-button:hover {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.quick-order-button {
    display: block;
    width: 100%;
    background: #007bff;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.quick-order-button:hover {
    background: #0056b3;
    transform: translateY(-1px);
    text-decoration: none;
    color: #ffffff;
}

.unavailable-button,
.members-button {
    width: 100%;
    background: #6c757d;
    color: #ffffff;
    border: none;
    padding: 14px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: not-allowed;
    opacity: 0.7;
}

/* オプション選択 */
.product-options-section {
    padding: 0;
    margin-bottom: 30px;
}

.option-group {
    margin-bottom: 20px;
}

.option-label {
    display: block;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.option-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: inherit;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
}

.option-select:focus {
    border-color: #007bff;
}

/* 商品情報セクション */
.product-info-sections {
    padding: 0;
    margin-bottom: 40px;
}

.info-section {
    margin-bottom: 35px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}

.section-header {
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-content {
    padding: 20px;
    color: inherit;
    line-height: 1.6;
}

/* 商品説明 */
.product-order-exp {
    color: inherit;
}

/* 仕様テーブル */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border: none;
    /* 外枠削除 */
}

.specs-table th,
.specs-table td {
    padding: 12px 15px;
    border: none;
    /* 全ての枠線を削除 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* 薄いグレーの下線のみ */
    text-align: left;
}

.specs-table th {
    color: inherit;
    font-weight: 600;
    width: 150px;
    background: rgba(255, 255, 255, 0.01);
    /* より薄い背景色 */
}

.specs-table td {
    color: inherit;
}

.specs-table tr:last-child th,
.specs-table tr:last-child td {
    border-bottom: none;
    /* 最後の行の下線は削除 */
}

.specs-table .discount {
    color: #ff4444;
    font-weight: bold;
    margin-left: 10px;
}

/* 商品関連リンク */
.product-links {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.product-links li {
    margin-bottom: 8px;
}

.product-links a {
    color: #8bb8e8;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
    display: inline-block;
    padding: 2px 0;
}

.product-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* SNSボタン */
.social-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* メールシェアボタン */
.email-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 2px 8px;
    height: 20px;
    background: #55ACEE;
    border: 1px solid #55ACEE;
    border-radius: 3px;
    color: #ffffff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    vertical-align: top;
    box-sizing: border-box;
}

.email-share-button:hover {
    background: #4A9DD5;
    border-color: #4A9DD5;
    color: #ffffff;
    text-decoration: none;
}

.email-share-button svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.email-share-button span {
    line-height: 1;
    display: inline-block;
    padding-top: 1px;
}

/* おすすめ商品 */
.recommended-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.recommended-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: center;
    padding: 15px;
}

.recommended-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.recommended-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 4px;
}

.recommended-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.item-details {
    padding: 0;
}

.item-name {
    font-size: 14px;
    color: inherit;
    margin: 0;
    line-height: 1.3;
    font-weight: 500;
}

/* エラーメッセージ */
.product-error {
    text-align: center;
    padding: 60px 20px;
    color: inherit;
}

/* Foundation互換クラス（既存サイトとの統合） */
.mar_t_50 {
    margin-top: 50px;
}

.txt_c {
    text-align: center;
}

.txt_18 {
    font-size: 18px;
}

.mar_auto {
    margin: 0 auto;
}

.mar_b_10 {
    margin-bottom: 10px;
}

.show {
    display: block;
}

.pad_20 {
    padding: 20px;
}

.hide {
    display: none;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .product-main-container {
        grid-template-columns: 1fr;
        padding: 0px;
        gap: 25px;
    }

    /* モバイルでは虫眼鏡機能を無効化 */
    .magnifier-glass {
        display: none !important;
    }

    .main-product-image {
        cursor: default;
    }

    .image-nav {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .thumbnail-gallery {
        gap: 8px;
    }

    .thumbnail-image {
        width: 60px;
        height: 60px;
    }

    .product-title {
        font-size: 14px;
    }

    .main-price {
        font-size: 14px;
    }

    .product-info-sections,
    .product-options-section {
        padding: 0px;
    }

    .recommended-products {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .recommended-item {
        padding: 10px;
    }

    .recommended-item img {
        height: 120px;
    }

    .section-content {
        padding: 15px;
    }

    .specs-table th {
        width: 100px;
        font-size: 13px;
    }

    .specs-table th,
    .specs-table td {
        padding: 8px 10px;
    }
}

@media (max-width: 480px) {
    .product-main-container {
        padding: 0px;
        gap: 20px;
    }

    .main-image-container {
        padding: 20px;
    }

    .product-title {
        font-size: 14px;
    }

    .main-price {
        font-size: 14px;
    }

    .qty-button {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .qty-input {
        width: 60px;
        height: 40px;
    }

    .add-cart-button,
    .quick-order-button {
        padding: 12px 20px;
        font-size: 15px;
    }

    .recommended-products {
        grid-template-columns: 1fr;
    }
}
/* ハンバーガーメニューの文字色修正 */
.mobile-menu-list > li > a,
.mobile-menu-section ul li a,
.menu-category-list a {
  color: #ffffff !important;
}
.mobile-menu-list > li > a:hover,
.mobile-menu-section ul li a:hover,
.menu-category-list a:hover {
  color: #FFD700 !important;
}
.mobile-menu-header h3,
.menu-category-title {
  color: #FFD700 !important;
}