:root {
--ogayoshi-red: #8f2e14; --ogayoshi-navy: #192f60; --ogayoshi-bg: #fdfaf5; --ogayoshi-text: #333333;
} body, button, input, select, textarea {
font-family: 'M PLUS 1', Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif !important;
background-color: var(--ogayoshi-bg);
}
body {
color: var(--ogayoshi-text);
} h1, h2, h3, h4, h5, h6, 
.alpha, .beta, .gamma, .delta, .epsilon, .zeta,
.wp-block-heading {
font-family: 'M PLUS 1', Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif !important;
color: var(--ogayoshi-navy) !important;
font-size: clamp(20px, 4vw, 26px) !important;
font-weight: 700 !important;
} .wc-block-grid__product-title, .woocommerce-loop-product__title {
font-family: 'M PLUS 1', Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif !important;
color: var(--ogayoshi-navy) !important;
font-size: 16px !important;
font-weight: 400 !important;
} a {
color: var(--ogayoshi-red);
}
a:hover {
color: var(--ogayoshi-navy);
} .site-header {
background-color: #ffffff;
background-image: url(//wp.ogayoshi.com/wp-content/uploads/2026/03/ogayoshi_header.png);
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
border-bottom: 3px solid var(--ogayoshi-red);
padding-top: 25.64%; padding-bottom: 0;
position: relative;
}
.site-branding {
margin-bottom: 0;
padding: 0;
height: 0;
} .site-title {
margin: 0;
padding: 0;
text-indent: -9999px; white-space: nowrap;
overflow: hidden;
height: 0;
}
.site-title a {
display: none;
} .site-description {
display: none;
} .main-navigation ul li a {
color: var(--ogayoshi-navy);
font-weight: 700;
}
.main-navigation ul li a:hover {
color: var(--ogayoshi-red);
} button, input[type="button"], input[type="reset"], input[type="submit"], .button, .added_to_cart,
.storefront-handheld-footer-bar ul li > a,
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover,
.wp-block-button__link {
background-color: var(--ogayoshi-red) !important;
color: #ffffff !important;
border-color: var(--ogayoshi-red) !important;
}
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, .wp-block-button__link:hover {
background-color: var(--ogayoshi-navy) !important;
color: #ffffff !important;
} .price, .amount, .woocommerce-Price-amount {
color: var(--ogayoshi-red) !important;
font-weight: 700;
} .woocommerce span.onsale {
background-color: var(--ogayoshi-red) !important;
color: #ffffff !important;
} .site-footer {
background-color: var(--ogayoshi-navy) !important;
color: #ffffff !important;
}
.site-footer a {
color: #eeeeee;
}
.site-info {
font-family: 'Noto Serif JP', serif;
}  .woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-MyAccount-navigation ul li {
margin-bottom: 12px;
}
.woocommerce-MyAccount-navigation ul li a {
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #ffffff;
border: 1px solid #eee;
border-left: 6px solid #ccc; color: var(--ogayoshi-text);
padding: 14px 15px;
border-radius: 6px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.03);
font-size: 0.9em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
background-color: #fafafa;
border-color: #ddd;
border-left-color: var(--ogayoshi-navy); color: var(--ogayoshi-navy);
} .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
border-left-color: var(--ogayoshi-red);
color: var(--ogayoshi-red);
}  .woocommerce-MyAccount-navigation ul li a::before {
content: none !important; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a::before {
content: "🏠" !important;
display: inline-block !important;
margin-right: 12px;
font-size: 1.2em;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before {
content: "📦" !important;
display: inline-block !important;
margin-right: 12px;
font-size: 1.2em;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a::before {
content: "📍" !important;
display: inline-block !important;
margin-right: 12px;
font-size: 1.2em;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a::before {
content: "⚙️" !important;
display: inline-block !important;
margin-right: 12px;
font-size: 1.2em;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
content: "🚪" !important;
display: inline-block !important;
margin-right: 12px;
font-size: 1.2em;
} @media screen and (min-width: 768px) {
.woocommerce-account .woocommerce {
display: flex;
flex-wrap: nowrap;
gap: 4%;
align-items: flex-start;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
width: 32%;
float: none;
margin: 0 !important; }
.woocommerce-account .woocommerce-MyAccount-content {
width: 64%;
float: none;
margin: 0 !important; }
} .myaccount-welcome-message {
animation: fadeIn 0.8s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
} @media screen and (min-width: 768px) {
.storefront-secondary-navigation .col-full {
display: flex;
justify-content: flex-end;
align-items: center;
}
.storefront-secondary-navigation .secondary-navigation {
margin-right: 20px;
margin-bottom: 0;
}
.storefront-secondary-navigation .site-search {
flex-grow: 0;
margin-bottom: 0;
}
} .wp-block-latest-posts {
text-align: left;
}
.wp-block-latest-posts li {
display: flex;
flex-direction: column;
align-items: flex-start;
} .site-footer .widget-area {
margin-bottom: 0 !important;
} .site-footer .widget-title {
text-align: left;
font-size: 1.3em;
letter-spacing: 2px;
margin-bottom: 25px;
padding-bottom: 15px;
color: #ffffff !important;
position: relative;
}
.site-footer .widget-title::after {
content: "";
display: block;
width: 50px;
height: 2px;
background-color: #ffffff;
opacity: 0.5;
position: absolute;
bottom: 0;
left: 0;
} .site-footer .widget_nav_menu ul {
list-style: none !important;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 15px 35px;
}
.site-footer .widget_nav_menu ul li {
margin: 0 !important;
padding: 0 !important;
} .site-footer .widget_nav_menu ul li::before {
content: none !important;
display: none !important;
}
.site-footer .widget_nav_menu ul li a {
color: #ffffff !important;
text-decoration: none !important;
font-size: 0.95em;
opacity: 0.8;
transition: all 0.3s ease;
display: flex;
align-items: center;
} .site-footer .widget_nav_menu ul li a::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background-color: var(--ogayoshi-red, #8f2e14);
border-radius: 50%;
margin-right: 10px;
box-shadow: 0 0 3px rgba(255,255,255,0.3);
}
.site-footer .widget_nav_menu ul li a:hover {
opacity: 1;
color: #ffffff !important;
transform: translateY(-2px);
} .site-footer {
padding-top: 4em !important;
padding-bottom: 1.5em !important;
}
@media screen and (max-width: 767px) { .site-footer {
padding-bottom: 5.5em !important;
} .site-footer .footer-widgets {
display: block !important;
}
.site-footer .footer-widgets .block {
width: 100% !important;
float: none !important;
margin-right: 0 !important;
margin-bottom: 2em !important;
} .site-footer .widget_nav_menu ul {
flex-direction: column !important;
gap: 15px !important;
} ul.products li.product,
.recently-viewed-section ul.products li.product,
.wc-block-grid.has-4-columns .wc-block-grid__products .wc-block-grid__product,
.wc-block-grid .wc-block-grid__products .wc-block-grid__product {
width: 48% !important;
float: left !important;
margin-right: 4% !important;
clear: none !important;
margin-bottom: 20px !important;
flex: 0 0 48% !important;
max-width: 48% !important;
} .wc-block-grid .wc-block-grid__products {
display: flex !important;
flex-wrap: wrap !important;
}
ul.products li.product:nth-child(2n),
.recently-viewed-section ul.products li.product:nth-child(2n),
.wc-block-grid .wc-block-grid__products .wc-block-grid__product:nth-child(2n) {
margin-right: 0 !important;
}
ul.products li.product:nth-child(2n+1),
.recently-viewed-section ul.products li.product:nth-child(2n+1),
.wc-block-grid .wc-block-grid__products .wc-block-grid__product:nth-child(2n+1) {
clear: both !important;
}
}
.site-footer .widget {
margin-bottom: 20px !important;
} .site-info a,
.site-info .privacy-policy-link-separator {
display: none !important;
} @media screen and (min-width: 768px) {
.recently-viewed-section ul.products li.product {
width: 21.7391304348% !important;
float: left !important;
margin-right: 4.347826087% !important;
clear: none !important;
}
.recently-viewed-section ul.products li.product:nth-child(4n) {
margin-right: 0 !important;
}
.recently-viewed-section ul.products li.product:nth-child(4n+1) {
clear: both !important;
}
} @media screen and (min-width: 768px) {
.site-header-cart .cart-contents {
display: flex !important;
align-items: center;
justify-content: flex-end; }
.site-header-cart .cart-contents::after {
content: "" !important;
width: 20px !important;
height: 20px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238f2e14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
order: -1; float: none !important;
margin-right: 8px !important; } .secondary-navigation ul.menu a::before {
content: "" !important;
display: inline-block !important;
width: 18px !important;
height: 18px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23192f60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
margin-right: 6px !important;
vertical-align: middle;
} .site-search .widget_product_search form::before {
content: "" !important;
display: inline-block !important;
width: 16px !important;
height: 16px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
} .storefront-breadcrumb .breadcrumb a:first-child::before,
.woocommerce-breadcrumb a:first-child::before {
content: "" !important;
display: inline-block !important;
width: 16px !important;
height: 16px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
margin-right: 6px !important;
vertical-align: -2px !important;
opacity: 0.7;
} @media screen and (max-width: 767px) { .site-header .col-full {
min-height: 50px;
position: static !important; } .menu-toggle {
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
margin: 0 !important;
padding: 0.8em 1em !important;
height: auto !important;
width: auto !important;
display: inline-block !important;
z-index: 100;
} .site-header-cart {
position: absolute !important;
right: 105px !important; bottom: 5px !important;
top: auto !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
z-index: 100;
} .site-header-cart .cart-contents {
display: flex !important;
align-items: center;
justify-content: flex-end;
font-size: 0.95em;
padding: 5px 0;
} .site-header-cart .cart-contents::after {
content: "" !important;
width: 22px !important;
height: 22px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238f2e14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
order: -1;
margin-right: 5px;
display: inline-block;
} .site-header-cart .cart-contents .amount {
margin-right: 5px;
font-weight: 700;
color: var(--ogayoshi-navy) !important;
} .site-header-cart .cart-contents .count {
font-weight: 400;
opacity: 0.8;
} .storefront-handheld-footer-bar ul li > a::before {
content: "" !important;
display: block !important;
width: 24px !important;
height: 24px !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
} .storefront-handheld-footer-bar ul li.cart .count {
position: absolute !important;
top: 8px !important;
right: 15% !important; transform: none !important;
width: 1.5em !important;
height: 1.5em !important;
line-height: 1.5em !important;
font-size: 0.7em !important;
border-radius: 50% !important;
} .storefront-handheld-footer-bar ul li.my-account > a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
} .storefront-handheld-footer-bar ul li.search > a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
} .storefront-handheld-footer-bar ul li.cart > a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") !important;
}
}
.wpcf7-form {
background: #ffffff;
padding: 2em;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
margin-bottom: 2em;
}
.ogayoshi-contact-row {
margin-bottom: 1.5em;
}
.ogayoshi-contact-row label {
display: block;
font-weight: 700;
color: var(--ogayoshi-navy);
margin-bottom: 8px;
font-size: 1.05em;
}
.ogayoshi-contact-row span.required {
background-color: var(--ogayoshi-red);
color: #ffffff;
font-size: 0.75em;
padding: 2px 8px;
border-radius: 4px;
margin-left: 10px;
vertical-align: middle;
}
.ogayoshi-contact-row input[type="text"],
.ogayoshi-contact-row input[type="email"],
.ogayoshi-contact-row textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fafafa;
transition: all 0.3s ease;
font-size: 1em;
}
.ogayoshi-contact-row input[type="text"]:focus,
.ogayoshi-contact-row input[type="email"]:focus,
.ogayoshi-contact-row textarea:focus {
border-color: var(--ogayoshi-red);
background-color: #ffffff;
outline: none;
box-shadow: 0 0 0 3px rgba(143, 46, 20, 0.1);
}
.ogayoshi-contact-row textarea {
min-height: 150px;
}
.ogayoshi-contact-submit {
text-align: center;
margin-top: 2em;
}
.ogayoshi-contact-submit input[type="submit"] {
padding: 15px 40px;
font-size: 1.1em;
font-weight: 700;
border-radius: 30px;
box-shadow: 0 4px 10px rgba(143, 46, 20, 0.2);
} button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
.added_to_cart,
.checkout-button,
.single_add_to_cart_button {
border-radius: 4px !important;
}  .storefront-handheld-footer-bar {
display: none !important;
} .og-floating-actions {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 999999;
display: flex;
flex-direction: column;
gap: 15px;
align-items: flex-end;
opacity: 0.85; transition: opacity 0.3s ease;
} .og-floating-actions.is-scrolling {
opacity: 0.3;
} .og-floating-actions.search-active,
.og-floating-actions:hover,
.og-floating-actions:focus-within {
opacity: 1 !important;
} .og-floating-btn {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
color: #ffffff !important;
border: none;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s;
text-decoration: none;
padding: 0;
margin: 0;
}
.og-floating-btn:hover, .og-floating-btn:focus {
transform: scale(1.1);
color: #ffffff !important;
} .og-btn-search {
background-color: var(--ogayoshi-navy);
}
.og-btn-search:hover {
background-color: #2a4687;
} .og-btn-home {
background-color: var(--ogayoshi-red);
}
.og-btn-home:hover {
background-color: #bd3f20;
} .og-floating-search-container {
position: absolute;
bottom: 100%; margin-bottom: 20px; right: 0;
width: calc(100vw - 40px); max-width: 320px; background: #ffffff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
transform: translateX(20px) scale(0.95);
transition: all 0.3s ease;
transform-origin: right bottom;
box-sizing: border-box !important;
}
.og-floating-search-container.active {
opacity: 1;
visibility: visible;
transform: translateX(0) scale(1);
}
.og-floating-search-form {
display: flex;
gap: 8px;
margin: 0;
width: 100%;
box-sizing: border-box !important;
}
.og-floating-search-form .search-field {
flex: 1;
min-width: 0 !important; width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
border: 2px solid var(--ogayoshi-navy) !important;
border-radius: 4px !important;
padding: 8px 12px !important;
font-size: 16px !important; background: #fff !important;
color: #333 !important;
}
.og-floating-search-form .search-submit {
background: var(--ogayoshi-navy) !important;
color: white !important;
border: none !important;
border-radius: 4px !important;
padding: 8px 15px !important;
font-weight: bold !important;
white-space: nowrap;
} @media screen and (min-width: 768px) {
.og-floating-actions {
display: none !important;
}
} @media screen and (max-width: 767px) {
.site-header .main-navigation ul li.menu-item-has-children > ul.sub-menu,
.site-header .handheld-navigation ul li.menu-item-has-children > ul.sub-menu,
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.sub-menu {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
height: auto !important;
max-height: none !important;
position: relative !important;
float: none !important;
left: 0 !important;
clear: both !important;
padding-left: 15px !important;
} .site-header .main-navigation button.dropdown-toggle,
.site-header .handheld-navigation button.dropdown-toggle,
button.dropdown-toggle {
display: none !important;
}
} .site-header-cart .cart-contents {
position: relative;
display: inline-block;
} .site-header-cart .cart-contents::after {
font-size: 26px !important; } .site-header-cart .cart-contents .amount {
display: none !important;
}
.site-header-cart .cart-contents .count {
position: absolute;
top: 18px; right: 15px; background-color: #d93622 !important; color: #ffffff !important;
font-size: 12px !important; font-weight: 800 !important; width: 22px !important;
height: 22px !important;
line-height: 22px !important;
text-align: center !important;
border-radius: 50% !important;
z-index: 99 !important;
opacity: 1 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
}