#raijin-hero {
position: relative;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #242424;
min-height: 240px;
isolation: isolate;
}
#raijin-hero .raijin-hero-slide {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
pointer-events: none;
transition: opacity 1200ms ease-in-out;
}
#raijin-hero .raijin-hero-slide.is-active {
opacity: 1;
z-index: 1;
}
#raijin-hero .raijin-hero-fill {
position: absolute;
inset: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
max-width: none;
object-fit: cover;
object-position: center;
filter: blur(10px) brightness(.83) saturate(.96);
transform: scale(1.02);
pointer-events: none;
}
#raijin-hero .raijin-hero-slide::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: rgba(18, 19, 20, .06);
pointer-events: none;
}
#raijin-hero .raijin-hero-photo {
position: relative;
z-index: 2;
display: block;
width: auto;
height: auto;
max-width: 96vw;
max-height: 100%;
flex: none;
object-fit: contain;
}
/* Slide 01: softly feather the edges into the blanking fill. */
#raijin-hero .raijin-hero-slide--soft .raijin-hero-photo {
-webkit-mask-image: linear-gradient(to right,
transparent 0%, #000 3.5%, #000 96.5%, transparent 100%);
mask-image: linear-gradient(to right,
transparent 0%, #000 3.5%, #000 96.5%, transparent 100%);
}
/* Slide 02: keep a clear boundary so the blanking-fill structure reads crisply. */
#raijin-hero .raijin-hero-slide--crisp .raijin-hero-photo {
-webkit-mask-image: none;
mask-image: none;
}
@media (max-width: 768px) {
#raijin-hero .raijin-hero-fill {
filter: blur(7px) brightness(.87) saturate(.98);
}
#raijin-hero .raijin-hero-slide::before {
background: rgba(18, 19, 20, .04);
}
#raijin-hero .raijin-hero-photo {
max-width: 98vw;
}
}
/* BASE preview typically nests the shop in a scrollable frame.
Keep wheel/touch/keyboard scrolling while hiding only the redundant
scrollbar belonging to this embedded shop. */
html.raijin-framed-preview,
html.raijin-framed-preview body {
scrollbar-width: none;
-ms-overflow-style: none;
}
html.raijin-framed-preview::-webkit-scrollbar,
html.raijin-framed-preview body::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
@media (prefers-reduced-motion: reduce) {
#raijin-hero .raijin-hero-slide {
transition: none !important;
}
}

body.shop #mainFooter #baseMenu {
position: static;
top: auto;
right: auto;
left: auto;
z-index: auto;
width: 100%;
margin: 20px 0 0;
padding: 0;
box-sizing: border-box;
}
body.shop #mainFooter #baseMenu > ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 12px;
}
body.shop #mainFooter #baseMenu > ul > li,
body.shop #mainFooter #baseMenu > ul > li.base {
float: none;
margin: 0;
padding: 0;
list-style: none;
}
body.shop #mainFooter #baseMenu > ul > li > a,
body.shop #mainFooter #baseMenu > ul > li > a:hover {
display: block;
margin: 0;
padding: 5px;
border-radius: 0;
box-shadow: none;
background: #fff;
line-height: 1;
}
body.shop #mainFooter #baseMenu > ul > li > a img {
height: 24px;
width: auto;
max-width: none;
vertical-align: middle;
}
@media (max-width: 768px) {
body.shop #mainFooter #baseMenu > ul {
justify-content: center;
}
}

body.shop #mainHeader.raijin-site-header {
width: 100%;
max-width: none;
padding: 0;
margin: 0;
box-sizing: border-box;
background: #fff;
}
body.shop #shopHeader .raijin-header-bar {
max-width: 1480px;
min-height: 100px;
margin: 0 auto;
padding: 12px 32px 12px 32px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 34px;
}
body.shop #shopHeader .raijin-header-bar h1 {
margin: 0;
padding: 0;
flex: 0 1 320px;
min-width: 0;
font-size: 0;
line-height: 0;
text-align: left;
}
body.shop #shopHeader .raijin-header-bar h1 a {
display: inline-block;
max-width: 100%;
}
body.shop #shopHeader .raijin-header-bar h1 img {
display: block;
width: 100%;
height: auto;
max-width: 320px;
vertical-align: middle;
}
body.shop #shopHeader .raijin-header-bar nav {
flex: 0 0 auto;
margin: 0;
padding: 0;
border: 0;
font-size: 12px;
}
body.shop #shopHeader .raijin-header-bar nav ul {
display: flex;
flex-wrap: nowrap;
gap: clamp(12px, 2.4vw, 34px);
width: auto;
margin: 0;
padding: 0;
justify-content: flex-end;
align-items: center;
}
body.shop #shopHeader .raijin-header-bar nav ul > li,
body.shop #shopHeader .raijin-header-bar nav ul > li:hover {
flex: 0 0 auto;
width: auto;
height: auto;
border: 0;
line-height: 1.5;
}
body.shop #shopHeader .raijin-header-bar nav ul > li > a {
display: block;
padding: 10px 2px;
letter-spacing: 0.06em;
white-space: nowrap;
font-size: 12px;
text-decoration: none;
}
body.shop #shopHeader .raijin-header-bar nav ul > li > a:hover,
body.shop #shopHeader .raijin-header-bar nav ul > li > a:focus-visible {
opacity: .62;
}
body.shop #shopHeader .raijin-header-bar nav ul li.itemSearch {
width: 70px;
padding: 0;
}
@media (max-width: 768px) {
body.shop #shopHeader .raijin-header-bar {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
row-gap: 4px;
min-height: 0;
padding: 13px 18px 11px;
}
body.shop #shopHeader .raijin-header-bar h1 {
flex: 0 0 auto;
width: clamp(175px, 48vw, 240px);
max-width: calc(100% - 116px);
margin: 0;
}
body.shop #shopHeader .raijin-header-bar nav {
width: 100%;
align-self: stretch;
}
body.shop #shopHeader .raijin-header-bar nav ul {
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 2px 22px;
}
body.shop #shopHeader .raijin-header-bar nav ul > li > a {
padding: 8px 1px;
font-size: 11px;
}
}

body.shop #mainHeader.raijin-site-header {
position: relative;
z-index: 2010;
}
body.shop #shopHeader .raijin-header-bar nav ul > li.raijin-about-menu {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 1px;
}
body.shop #shopHeader .raijin-header-bar .raijin-about-menu > button {
appearance: none;
border: 0;
border-radius: 2px;
background: transparent;
color: inherit;
font: inherit;
line-height: 1;
padding: 8px 4px;
cursor: pointer;
}
body.shop #shopHeader .raijin-header-bar .raijin-about-menu > button:hover,
body.shop #shopHeader .raijin-header-bar .raijin-about-menu > button:focus-visible {
opacity: .6;
}
body.shop #shopHeader .raijin-header-bar .raijin-about-menu .raijin-about-submenu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
min-width: 245px;
max-width: calc(100vw - 20px);
box-sizing: border-box;
padding: 7px 0;
background: white;
border: 1px solid #e5e5e5;
box-shadow: 0 7px 22px rgba(0,0,0,.1);
display: none;
z-index: 2050;
}
body.shop #shopHeader .raijin-header-bar .raijin-about-menu:hover .raijin-about-submenu,
body.shop #shopHeader .raijin-header-bar .raijin-about-menu:focus-within .raijin-about-submenu,
body.shop #shopHeader .raijin-header-bar .raijin-about-menu.is-open .raijin-about-submenu {
display: block;
}
body.shop #shopHeader .raijin-header-bar .raijin-about-submenu a {
display: block;
box-sizing: border-box;
padding: 13px 18px;
font-size: 12px;
line-height: 1.65;
color: #222;
text-align: left;
white-space: normal;
text-decoration: none;
}
body.shop #shopHeader .raijin-header-bar .raijin-about-submenu a:hover,
body.shop #shopHeader .raijin-header-bar .raijin-about-submenu a:focus-visible {
background: #f2f2f2;
}
body.shop #about .raijin-about-law-link {
margin-top: 24px;
font-size: 13px;
}
body.shop #about .raijin-about-law-link a {
color: #222;
text-decoration: underline;
text-underline-offset: 3px;
}

/* Unchanged: original header geometry and HERO slideshow. */
body.shop #shopHeader .raijin-header-bar { position: relative; }
.raijin-walk-track {
pointer-events: none;
overflow: hidden;
background: transparent;
}
.raijin-walk-track--header {
position: absolute;
left: 50%;
bottom: 0;
width: 100vw;
height: 100px;
transform: translateX(-50%);
z-index: 10;
}
/* v30: footer has a fixed 960px .wrapper at desktop widths. Moving the
walking track OUTSIDE that wrapper lets Fujin exit at the real viewport
boundary rather than being clipped 50-70px before the edge. */
.raijin-walk-track--footer {
position: relative;
left: 0;
width: 100%;
max-width: none;
height: 104px;
transform: none;
margin: 0 0 18px;
box-sizing: border-box;
}
/* HOME: the foot lane starts directly below HERO, as in v22. */
body.shop.raijin-view-home #mainFooter { margin-top: 0; }
/* One moving actor includes BOTH the 100px sprite and the right-side bubble.
A single transform keeps the separation constant across screen widths. */
.raijin-walk-actor {
position: absolute;
left: 0;
bottom: 0;
display: flex;
align-items: flex-start;
gap: 10px;
width: max-content;
height: 100px;
transform: translate3d(-300px,0,0);
will-change: transform;
pointer-events: none;
}
.raijin-walk-figure {
position: relative;
left: auto;
bottom: auto;
top: auto;
transform: none;
flex: 0 0 auto;
height: 100px;
line-height: 0;
}
.raijin-walk-figure img {
display: block;
width: auto;
height: 100px;
max-width: none;
object-fit: contain;
}
.raijin-walk-bubble {
position: relative;
top: 3px;
left: auto;
bottom: auto;
flex: 0 0 154px;
width: 154px;
box-sizing: border-box;
min-height: 55px;
padding: 9px 11px;
color: #222;
background: rgba(255,255,255,.97);
border: 1px solid rgba(28,28,28,.85);
border-radius: 17px;
box-shadow: 0 2px 5px rgba(0,0,0,.08);
font-family: sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, visibility .2s ease;
pointer-events: none;
z-index: 11;
}
.raijin-walk-bubble span { display: block; }
.raijin-walk-bubble.is-visible { opacity: 1; visibility: visible; }
/* Both characters speak to their right; the tail points left at its owner. */
.raijin-walk-bubble::after {
content: '';
position: absolute;
left: -6px;
bottom: 12px;
width: 10px;
height: 10px;
background: #fff;
border-left: 1px solid #333;
border-bottom: 1px solid #333;
transform: rotate(45deg);
}
/* Keep the desktop design intact, including the 100px figure size. */
@media (max-width: 768px) {
/* Reserve the lane below the wrapped two-row header. */
body.shop #shopHeader .raijin-header-bar { padding-bottom: 122px; }
.raijin-walk-track--header { bottom: 8px; height: 104px; }
/* No lower bubble row. Both speech balloons are always BESIDE the figure. */
.raijin-walk-track--footer { height: 104px; margin-bottom: 8px; }
.raijin-walk-bubble {
flex-basis: 138px;
width: 138px;
min-height: 52px;
padding: 8px 6px;
font-size: 12px;
line-height: 1.45;
}
}
@media (max-width: 360px) {
.raijin-walk-bubble { flex-basis: 128px; width: 128px; font-size: 11px; }
body.shop #shopHeader .raijin-header-bar { padding-bottom: 118px; }
}
@media (prefers-reduced-motion: reduce) {
.raijin-walk-track--header, .raijin-walk-track--footer { display: none; }
}

body.shop:not(.raijin-show-walkers) .raijin-walk-track--header,
body.shop:not(.raijin-show-walkers) .raijin-walk-track--footer {
display: none !important;
}
@media (max-width: 768px) {
/* Do not reserve a 100px walker lane on SHOP/FAQ/ABOUT/CONTACT. */
body.shop:not(.raijin-show-walkers) #shopHeader .raijin-header-bar {
padding-bottom: 12px;
}
}

body.shop.raijin-view-faq #raijin-faq-panel .raijin-view-title { padding: 40px 18px 18px; }
body.shop .raijin-faq-list { max-width: 990px; margin: 0 auto; padding: 0 18px 28px; box-sizing: border-box; display: grid; gap: 18px; }
body.shop .raijin-faq-card { border: 1px solid #e5e3df; border-radius: 7px; padding: clamp(15px, 2.6vw, 26px); background: #fff; box-sizing: border-box; }
body.shop .raijin-faq-question { display: flex; align-items: flex-start; gap: 13px; border-bottom: 1px solid #eae8e4; padding-bottom: 13px; margin-bottom: 17px; color: #222; }
body.shop .raijin-faq-number { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .08em; padding: 5px 7px; border-radius: 3px; color: #67615a; background: #f3f1ed; }
body.shop .raijin-faq-question h3 { margin: 0; color: #222; font-size: clamp(16px, 2.2vw, 21px); font-weight: 600; line-height: 1.65; letter-spacing: .015em; }
body.shop .raijin-faq-images { max-width: 830px; margin: 0 auto; }
body.shop .raijin-faq-images--paired { max-width: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
body.shop .raijin-faq-cut { min-width: 0; margin: 0; padding: 0; }
body.shop .raijin-faq-cut img { width: 100%; height: auto; display: block; object-fit: contain; }
body.shop .raijin-faq-cut figcaption { font-size: 12px; text-align: center; color: #777; margin-top: 7px; }
body.shop .raijin-faq-contact-link { max-width: 990px; margin: 0 auto 56px; padding: 0 18px; text-align: center; font-size: 13px; color: #555; line-height: 1.9; }
@media (max-width: 620px) {
 body.shop.raijin-view-faq #raijin-faq-panel .raijin-view-title { padding: 24px 12px 18px; }
 body.shop .raijin-faq-list { padding: 0 10px 18px; gap: 12px; }
 body.shop .raijin-faq-card { padding: 13px 10px; }
 body.shop .raijin-faq-question { gap: 8px; padding-bottom: 11px; margin-bottom: 10px; }
 body.shop .raijin-faq-question h3 { font-size: 16px; }
 body.shop .raijin-faq-images--paired { grid-template-columns: 1fr; gap: 10px; }
}

.raijin-contact-native-intro {
  width: 100%; box-sizing: border-box; margin: 0 auto;
  padding: 35px 18px 20px; text-align: center; background: #fff;
}
.raijin-contact-native-intro .raijin-native-inner {
  max-width: 920px; margin: 0 auto;
}
.raijin-contact-native-intro h2 {
  margin: 0 0 22px; color: #222;
  font-size: clamp(21px, 3.2vw, 32px); line-height: 1.3;
  letter-spacing: .14em; font-weight: 600;
}
.raijin-contact-native-intro figure { max-width: 840px; margin: 0 auto 19px; }
.raijin-contact-native-intro img { display: block; width: 100%; height: auto; object-fit: contain; }
.raijin-contact-native-intro p { margin: 0 auto 12px; font-size: 14px; line-height: 1.85; color: #333; }
@media (max-width: 620px) {
 .raijin-contact-native-intro { padding: 22px 10px 15px; }
 .raijin-contact-native-intro h2 { margin-bottom: 12px; font-size: 23px; }
 .raijin-contact-native-intro figure { margin-bottom: 14px; }
 .raijin-contact-native-intro p { font-size: 13px; }
}

body.shop .raijin-about-company,body.shop .raijin-about-policy{box-sizing:border-box;background:#fff;color:#262626;width:100%;}
body.shop .raijin-about-company{padding:36px 18px 62px;}
body.shop .raijin-about-body{width:100%;max-width:850px;margin:0 auto;box-sizing:border-box;}
body.shop .raijin-about-company h2,body.shop .raijin-about-policy h2{font-size:clamp(24px,3vw,33px);font-weight:600;line-height:1.5;letter-spacing:.055em;text-align:center;margin:8px 0 30px;}
body.shop .raijin-company-cut{max-width:780px;margin:0 auto 34px;}
body.shop .raijin-company-cut img{display:block;width:100%;height:auto;object-fit:contain;}
body.shop .raijin-company-copy{font-size:clamp(14px,1.5vw,16px);line-height:2.15;letter-spacing:.015em;}
body.shop .raijin-company-copy p{margin:0 0 24px;}
body.shop .raijin-about-policy{display:none;padding:34px 18px 65px;}
body.shop.raijin-view-privacy #raijin-privacy-panel,body.shop.raijin-view-law #raijin-law-panel{display:block;}
body.shop .raijin-policy-inner{max-width:850px;margin:0 auto;}
body.shop .raijin-policy-content{font-size:14px;line-height:1.95;letter-spacing:0;overflow-wrap:anywhere;}
body.shop .raijin-policy-content h3{font-size:16px;font-weight:700;color:#262626;line-height:1.7;margin:29px 0 12px;}
body.shop .raijin-policy-content p{font-size:inherit;line-height:inherit;margin:0 0 18px;}
body.shop.raijin-view-privacy #raijin-hero,body.shop.raijin-view-law #raijin-hero{display:none;}
body.shop.raijin-view-privacy .pinnedBlog,body.shop.raijin-view-law .pinnedBlog{display:none;}
@media(max-width:620px){
 body.shop .raijin-about-company,body.shop .raijin-about-policy{padding:24px 14px 40px;}
 body.shop .raijin-about-company h2,body.shop .raijin-about-policy h2{margin:4px 0 18px;}
 body.shop .raijin-company-cut{margin-bottom:22px;}
 body.shop .raijin-company-copy{line-height:1.95;}
 body.shop .raijin-company-copy p{margin-bottom:18px;}
 body.shop .raijin-policy-content{font-size:13px;line-height:1.85;}
 body.shop .raijin-policy-content h3{font-size:14px;}
}

/* Hide only the shopping-cart shortcut: retain BASEMenuTag and the legal/contact links. */
body.shop #mainFooter #baseMenu li.cart,
body.shop #mainFooter #baseMenu a.cart,
body.shop #mainFooter #baseMenu a[href*="/cart"] {display:none!important;}
/* Native item detail: real purchase button remains in markup, but is not usable. */
body#shopDetailPage .raijin-prelaunch-real-purchase {display:none!important;}
body.shop .raijin-prelaunch-disabled {
 display:block;box-sizing:border-box;width:100%;max-width:440px;
 padding:15px 18px;margin:14px auto 0;background:#dededb;color:#626262;
 border:1px solid #c7c7c4;border-radius:3px;font-weight:700;
 font-size:15px;text-align:center;cursor:not-allowed;opacity:1;
}
body.shop .raijin-prelaunch-note {font-size:13px;line-height:1.85;color:#555;margin:12px auto 22px;text-align:center;}
body.shop .raijin-prelaunch-shop-note {max-width:990px;margin:0 auto 24px;padding:11px 18px;
 box-sizing:border-box;text-align:center;font-size:14px;line-height:1.8;color:#444;
 border-top:1px solid #e4e1da;border-bottom:1px solid #e4e1da;background:#faf9f7;}
body.shop .raijin-prelaunch-contact-note {max-width:840px;margin:20px auto 12px;padding:14px 18px;
 box-sizing:border-box;background:#faf9f7;border:1px solid #e8e5df;
 color:#444;font-size:14px;line-height:1.8;text-align:center;}
@media(max-width:620px){body.shop .raijin-prelaunch-shop-note {font-size:13px;margin:0 10px 20px;}
body.shop .raijin-prelaunch-contact-note{margin:14px 10px 0;font-size:13px;}}