/*------JAPEX.net--------- dotNet Gnavi[dn] NO<main>TMPclass ---- THIS IS [3]
Theme color:
black  #000
japexLOGOgray  #b2b2b2 (178,178,178) K30%
japexKgray     #666666 (102,102,102) K60% -- HoverColor
	X  rcRED #e83828 232/56/40
	X  crimson #dc143c 220/20/60
japexTannedBL  #1e0000 (30,0,0)  (C78,M92,Y89,K74)
darkgray  #a9a9a9 (169,169,169)
silver  #c0c0c0 (192,192,192)
lightgray  #d3d3d3 (211,211,211)


*********************************
need prefix .dn- to all elements.
*********************************
Gnavi YOC onHover + samePageLink-slideAnim / Toggle click
header not fixed to window
stylebookJSON - feedOBI @.dn-footer
j-stock(NYUKA) link with topMargin to standOut
=====
moto=<main>TMPclass in use just for samples ---> erase to be final style-dn.css
=====
[1]main style.css has 
	- html{font-size: 62.5%;}
	- same default setting at body{...}-----------style-dn(-moto).css//.netTop, Aiko-made-site
Can keep the same html/body settings as is, noNeed to tranplant to .dn-header/.dn-footer
--ADJUSTED--
.dn-ftnv.distr li 2025.1 ADDED below JAPEX Co.Ltd distributingLIST
.dn-ftnv.distr	2025.1 Swapped from.dn-adrTo.dn-ftnv.distr@768
.dn-ftnv-lbc	ADDED 2025.1 PreventKAIGYO-footerECSHOP-JPNnameTil@MediaQuery1140px JAPEX-CHOKUEITEN-JAPEX-STORE/RAKUTEN-ICHIBA-TEN/YAHOO-TEN
				ADDED 2025.1 @mediaMax1140px: nullifyToAllowKAIGYObelowMediaQuery1140px Because JAPEX-CHOKUEITEN-JAPEX-STORE won't fitAnyMore
.dn-copyright changed to static font-size to work better throughOut[1][2][3]
=====
[2]main style.css doesNOT have
	- html{font-size: 62.5%;}
	- same default setting at body{...}-----------style-dn-625.css//brand site other people made, WP
need to transplant to .dn-header/.dn-footer so it doesn't mess with other elements
.dn-header/.dn-footer	font-size: 10px staticSize is better(10px=62.5%)
--ADJUSTMENT NEEDED--
a.dn:hover, a.dn:active  May need to !important to be in effect over brand's mainCSS  eg.KNOX 
.dn-footer	padding rem--->em @initial
.dn-menu	fallback font-size: XXrem needs XXx0.625 conversion to be the right size - just in case@initial/@768
.dn-sns_footer	commentOut font-size:0;,   margin rem--->em  @initial
.dn-sns_footer li	font-size rem--->em  @initial/@480
.dn-footer-nav li	fallback font-size: XXrem needs XXx0.625 conversion to be the right size - just in case@initial/@768
.dn-ftnv.distr li 2025.1 ADDED below JAPEX Co.Ltd distributingLIST
.dn-ftnv.distr	2025.1 Swapped from.dn-adrTo.dn-ftnv.distr@768
.dn-ftnv-lbc	ADDED 2025.1 PreventKAIGYO-footerECSHOP-JPNnameTil@MediaQuery1140px JAPEX-CHOKUEITEN-JAPEX-STORE/RAKUTEN-ICHIBA-TEN/YAHOO-TEN
				ADDED 2025.1 @mediaMax1140px: nullifyToAllowKAIGYObelowMediaQuery1140px Because JAPEX-CHOKUEITEN-JAPEX-STORE won't fitAnyMore
.dn-copyright	margin-top rem--->em @initial/@768
				changed to static font-size to work better throughOut[1][2][3]
.dn-menucap		[1][2]em <---> [3]rem
   XX--font-size rem--->em @768
[2]ONLY
body#airhawk .gph-dnfooter h4   ADDED  specialCase for airhawk space aroundTXT
body#airhawk .gph-dnfooter h5   ADDED  specialCase for airhawk space aroundTXT
=====
[3]for WP - main style.css and many other are effecting WP page. 
   THIS will have the same transplant&ADJUSTMENT as [2] + further adjustment for WP
.dn-header	QuickFix for sniffingWPxResponsiveGnaviCombo in USE also to come onTop of WPstylebook .sb-nav @initial
			z-index:11<--10 to come onTop of WPstylebook .sb-nav
.dn-menu 	font-size keep AsIs HERE--->control in  WPcommon.css html, body ...{font-size: 15px OR initial   @initial
.dn-sns_footer 	margin further ADJUST @initial
.dn-sns_footer li a span{ ADDED to control SNSicon size @initial
.dn-ftnv li a	ADDED to control footer generalLinkTXT font-size@initial
.dn-ftnv.distr li 2025.1 ADDED below JAPEX Co.Ltd distributingLIST
.dn-ftnv.distr	2025.1 Swapped from.dn-adrTo.dn-ftnv.distr@768
.dn-ftnv-lbc	ADDED 2025.1 PreventKAIGYO-footerECSHOP-JPNnameTil@MediaQuery1140px JAPEX-CHOKUEITEN-JAPEX-STORE/RAKUTEN-ICHIBA-TEN/YAHOO-TEN
				ADDED 2025.1 @mediaMax1140px: nullifyToAllowKAIGYObelowMediaQuery1140px Because JAPEX-CHOKUEITEN-JAPEX-STORE won't fitAnyMore
.dn-copyright  further adjust font-size@initial
				changed to static font-size to work better throughOut[1][2][3]
[3ONLY]
HIDE stylebookJSON feedOBI @.dn-footer when WP  eg .gph-dnfooter
=====
GoogleFont:Saira Semi Condensed<--Arimo<--Teko
	webFONT AdjustClass is ADDED
--
---------------------------*/
/*html{ 
font-size: 62.5%;  root size = browserDefault16px x 62.5% = 10px  if[2][3] need to transplant to .dn-header/.dn-footer, and commentOut THIS  
}*/
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*body{  if[2][3] need to transplant all to .dn-header/.dn-footer, and commentOut THIS
background-color:#fff;
font-family: -apple-system, BlinkMacSystemFont,'Helvetica Neue', Arial,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
letter-spacing:0.03em; 0.03em 
font-kerning: normal; for alphabet 
font-feature-settings:"pkna"; works for ヒラギノ角ゴ, '游ゴシック体','Yu Gothic', Noto Sans CJK JP / doesn't work for Meiryo /DONOT use palt
word-wrap: break-word; so long english won't exceed container
opacity: 1; fadeIn effect by abeautifulsite.net - if JSenabled  NotInUSE 2020.6.18
transition: 1s opacity;
}*/
body.dntop{/*apply only for TOPPAGE NotInUSE */
/*background-color:#1e0000; japexTannedBL  #1e0000 (30,0,0) TMP*/
}
/*body.fade-out {fadeIn effect by abeautifulsite.net - if JSenabled    NotInUSE 2020.6.18
opacity: 0;
transition: none;
}*/
body #main {/*contents for JSenabled*/
display:block;
}
body #legacy{ /*hide if JSenabled*/
display:none;
}
body.no-js #main{ /*hide if noJS*/ 
display:none;
}
body.no-js #legacy{ /*show if noJS*/
display:block;
}

/* dotNet Gnavi Default link */
a.dn{ 
color:inherit; /*inherit parent*/
text-decoration:none;
background-color:transparent;
-webkit-tap-highlight-color: rgba(178,178,178,0.6); /*japexLOGOgray  #b2b2b2 (178,178,178) , ALTER highlights links on iPhones/iPads*/
cursor:pointer;
}
a.dn:link { 
color:inherit;
text-decoration:none; 
}
a.dn:visited { 
color:inherit; 
text-decoration:none;
}
a.dn:hover, a.dn:active {
color:#666666 ; /* JapexKgray #666666 102/102/102 */
text-decoration:none;
}
.nolink {/*transplant from style.css#116 ORIGINALuse for.mobile_touchJS  eg.disable WolfmanLink temporarily 2020.12.25*/
pointer-events: none; /* to disable link */
cursor: default;
transition: all .2s ease-in-out;
}
.w-shadow{
text-shadow: rgba(255,255,255,0.7) 1px 1px 0;/*, rgba(255,255,255,1) -1px -1px 1px*/
/*1px 0 1px #fff, 1px 1px 1px #fff, 0 1px 1px #fff, -1px 1px 1px #fff, -1px 0 1px #fff, -1px -1px 1px #fff, 0 -1px 1px #fff, 1px -1px 1px #fff*/
}
.bl-shadow{
text-shadow: rgba(0,0,0,0.4) 1px 1px 1px, rgba(0,0,0,0.2) -1px -1px 1px;
/*1px 0 1px #333, 1px 1px 1px #333, 0 1px 1px #333, -1px 1px 1px #333, -1px 0 1px #333, -1px -1px 1px #333, 0 -1px 1px #333, 1px -1px 1px #333*/
}

/* ---------------------------------------------------------
   FONT
   ---------------------------------------------------------*/
@font-face {
	font-family: 'NotoSansCJKjp-ip';
	font-style: normal;
	font-weight: 500;/*Medium*/
	src: url('../font/NotoSansCJKjp-Medium_subset.woff?ver=20191021') format("woff");
}
@font-face {
	font-family: 'NotoSansCJKjp-ip-b';
	font-style: normal;
	font-weight: 700;/*Bold*/
	src: url('../font/NotoSansCJKjp-Bold_subset.woff?ver=20191021') format("woff");
}
@font-face {/*'>',mail,Magnifying glass,tag,pdf icon - PMJ*/
font-family: 'icomoon-p';
src: url('../font/icomoon-p.woff?ver=20250413') format('woff');/* twitterX ADDED:?ver20250413<--withLINEicon:?ver=20210121<--withoutLINEicon:?ver=20190303*/
font-weight: normal;
font-style: normal;
}
/*::::::::::::::::::::::::::::::::::::::::::
:: iconFont - icomoon PMJ(JAPEX)ALLinONE :::
::::::::::::::::::::::::::::::::::::::::: */
[class^="icop-"], [class*=" icop-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon-p' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align:middle;
padding:0 0.3em;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icop-plus-thick:before {content: "\f067";}
.icop-plus-r:before {content: "\e917";}
.icop-minus-thick:before {content: "\f068";}
.icop-minus-r:before {content: "\e915";}
.icop-search-thick:before {content: "\f002";}
.icop-search-r:before {content: "\e924";}
.icop-check-thick:before {content: "\f00c";}
.icop-check-r:before {content: "\e90b";}
.icop-close-thick:before {content: "\f00d";}
.icop-close-r:before {content: "\e90c";}
.icop-menu-hamburger:before {content: "\e914";}
.icop-zoom-in-thick:before {content: "\f00e";}
.icop-zoom-in-r:before {content: "\e928";}
.icop-zoom-out-thick:before {content: "\f010";}
.icop-zoom-out-r:before {content: "\e929";}
.icop-chevron-down-r:before {content: "\e901";/*.net menu 'v' down */}
.icop-chevron-thin-down-r:before {content: "\e904";}
.icop-chevron-left-r:before {content: "\e902";}
.icop-chevron-thin-left:before {content: "\e905";}
.icop-chevron-right-r:before {content: "\e903";/*.net menu '>' right */}
.icop-chevron-thin-right:before {content: "\e906";}
.icop-chevron-up-r:before {content: "\e908";/*.net '^' BacktoTop JS */}
.icop-chevron-thin-up:before {content: "\e907";}
.icop-resize-100:before {content: "\e909";}
.icop-resize-full-screen:before {content: "\e90a";}
.icop-bookmark:before {content: "\e900";}
.icop-external-link:before {content: "\f08e";}
.icop-export:before {content: "\e90d";}
.icop-share-up:before {content: "\e918";}
.icop-share-up2:before {content: "\e925";}
.icop-home-flat:before {content: "\e90e";}
.icop-home-chimney:before {content: "\e92a";}
.icop-link-chain:before {content: "\e90f";}
.icop-location-pin:before {content: "\e910";}
.icop-lock-open:before {content: "\e911";}
.icop-lock:before {content: "\e912";}
.icop-mail:before {content: "\e913";}
.icop-phone:before {content: "\e916";}
.icop-star-w:before {content: "\e919";}
.icop-star-bl:before {content: "\e91a";}
.icop-user:before {content: "\e91b";}
.icop-users:before {content: "\e91c";}
.icop-camera:before {content: "\e91d";}
.icop-flag:before {content: "\e91e";}
.icop-information-w:before {content: "\e920";}
.icop-information-bl:before {content: "\e921";}
.icop-question-bl-round:before {content: "\e923";}
.icop-printer:before {content: "\e922";}
.icop-tag-bl:before {content: "\e926";}
.icop-volume-up:before {content: "\e927";}
.icop-rss-sim:before {content: "\ea9b";}
.icop-rss-box:before {content: "\ea9c";}
.icop-amazon:before {content: "\ea87";}
.icop-google-sim:before {content: "\ea88";}
.icop-google-box:before {content: "\ea89";}
.icop-google-round:before {content: "\ea8a";}
.icop-google-plus-sim:before {content: "\ea8b";}
.icop-google-plus-box:before {content: "\ea8c";}
.icop-google-plus-round:before {content: "\ea8d";}
.icop-facebook-sim:before {content: "\ea90";/*facebook*/}
.icop-facebook-box:before {content: "\ea91";}
.icop-instagram:before {content: "\ea92";/*instagram*/}
.icop-twitter:before {content: "\ea96";/*twitter*/}
.icop-youtube:before {content: "\ea9d";/*youtube*/}
.icop-vimeo-sim:before {content: "\eaa0";}
.icop-vimeo-box:before {content: "\eaa1";}
.icop-flickr-sim:before {content: "\eaa3";}
.icop-flickr-sim2:before {content: "\eaa4";}
.icop-flickr-box:before {content: "\eaa5";}
.icop-flickr-round:before {content: "\eaa6";}
.icop-tumblr-sim:before {content: "\eab9";}
.icop-tumblr-box:before {content: "\eaba";}
.icop-linkedin-sim:before {content: "\eaca";}
.icop-linkedin-box:before {content: "\eac9";}
.icop-pinterest-bl:before {content: "\ead1";/*pinterest*/}
.icop-pinterest-line:before {content: "\ead2";}
.icop-file-pdf:before {content: "\eadf";}
.icop-sns-line:before {content: "\e91f";/*snsLINE*/}
.icop-twitter-x:before {content: "\e92b";/*twitterX*/}

/* ---------------------------------------------------------
   webFONT AdjustClass  Saira Semi Condensed
   ---------------------------------------------------------*/
/*-----span webFont All UpperCase ----*/
.wf-allupper400, /* weight 400=Regular*/ 
.wf-allupper500, /* weight 500=Medium*/
.wf-allupper600, /* weight 600=SemiBold*/
.wf-allupper700{ /* weight 700=Bold*/
	font-family: 'Saira Semi Condensed', sans-serif;
	/*font-size:1.1em;adjust to JA*/
	/*letter-spacing:0.04em;0.03em@initial*/
}
/*-----span - 1st letter is upperCase, then lower case follows----*/
.wf-upperlower400, /* , weight 400=Regular*/
.wf-upperlower500, /* weight 500=Medium*/
.wf-upperlower600, /* weight 600=SemiBold*/
.wf-upperlower700{ /* weight 700=Bold*/
	font-family: 'Saira Semi Condensed', sans-serif;
	font-size:1.1em; /* <--1.05em  adjust to JA*/
	/*letter-spacing:0.04em;0.03em@initial*/
}
.wf-allupper400, .wf-upperlower400{font-weight:400;}
.wf-allupper500, .wf-upperlower500{font-weight:500;}
.wf-allupper600, .wf-upperlower600{font-weight:600;}
.wf-allupper700, .wf-upperlower700{font-weight:700;}


/* ---------------------------------------------------------
   SVG   - Need prefix dn- to distinguish with other SVG
   ---------------------------------------------------------*/
/*---SVGcontainer---*/
.dn-japex-logo-wrap,/* decide position, size for .japex-logo-box - headerLOGO*/
.dn-japex-logo-wrap-toggle,/* decide position, size for .japex-logo-box - headerLOGO in toggleOBI*/
.dn-japex-logo-wrap2,/* LOGO in Chapter Story TMP*/
.dn-japex-logo-wrap-footer{/* LOGO in footer*/
display:block;
width:80%;/*70% x width of .hero-box*/
max-width:300px;
min-width:160px;
vertical-align:middle;
margin:0 auto;/* KEEP 0 auto*/
padding:0;
font-size:0;/*to erase space around .japex-logo-box*/
}
.dn-japex-logo-wrap{/* overwrite  headerLOGO*/
max-width:160px;/*<--400px  overwrite*/
margin-left:3rem;/*<--for left-align*/
}
.dn-japex-logo-wrap2{/* TMP */
margin-top:20px;
max-width:250px;
}
.dn-toggle-obi,/*wrap .japex-logo-wrap-toggle*/
.dn-japex-logo-wrap-toggle{/* headerLOGO in toggleOBI--------------------------YOC/Toggle */
display:none;/*hide@initial-->show@768 */
}
/*.dn-japex-logo-wrap-footer{overwrite
display:block;
width:100%;
max-width:360px;
min-width:160px;
margin:0;overwrite for left-align
padding-left:0; <--1rem@initial  overwrite for left-align
}*/
.dn-japex-logo-wrap a:hover, /*headerLOGO */
.dn-japex-logo-wrap-toggle a:hover,/*headerLOGO in toggleOBI*/
/*.dn-japex-logo-wrap2 a:hover, LOGO in Chapter */
.dn-japex-logo-wrap-footer a:hover{ /*LOGO in footer */
opacity: 0.7;
}
/*--- SVGlogo ---*/
.dn-japex-logo-box{/* japex headerSVG(#svg-japex-1976-tokyo) LOGO h1*/
position: relative;
width:100%;/*controlSize/change padding-bottom accordingly*/
height: 0;
padding-bottom:17%;/* aspectRatio 17.02%=80/470*100 */
vertical-align: top; 
}
.svg-shadow{/*use with .japex-logo-box*/
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4)) drop-shadow(-1px -1px 1px rgba(0,0,0,0.2));/*same as .bl-shadow*/
-webkit-filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.4)) drop-shadow(-1px -1px 1px rgba(0,0,0,0.2));
-moz-filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.4)) drop-shadow(-1px -1px 1px rgba(0,0,0,0.2));
-o-filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.4)) drop-shadow(-1px -1px 1px rgba(0,0,0,0.2));
}

/*--------- SVG COLOR&Effect ---------*/
.dn-efflogo-japex-bl, /*JAPEX black*/
.dn-efflogo-japex-w, /*JAPEX white */
.dn-efflogo-japex-gray{/*JAPEX Gray*/
position: absolute;
width:100%;
height:100%;
top: 0;
left: 0;
/*DONOT apply filter to svg --> apply to parent .japex-logo-box*/
}
.dn-efflogo-japex-bl{ fill: #000;/*LOGO bl*/}
.dn-efflogo-japex-w{ fill: #fff;/*LOGO white*/}
.dn-efflogo-japex-gray{fill: #b2b2b2;/*japexLOGOgray #b2b2b2 (178,178,178) %*/}




/**** common.js/backtoTopBTN ****/
#fixedTop {/*BTN auto-made by common.js/backtotop_btn NO html*/
right: 10px;
bottom: -60px;/*keep bigger then buttonSize(Height)*/
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 15px;/*KEEP px*/
text-align: center;
text-decoration:none;
background: #333;
position: fixed;
z-index: 10;/*<---10<--moto:5*/
border-top-left-radius: 5px; 
border-top-right-radius: 5px;
-webkit-transform: translateZ(0);
}
#fixedTop:hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
opacity: 0.8;
}


/*:::::::::::::::::::::::::
::: dotNet Gnavi Header :::@initial
:::::::::::::::::::::::::::*/
.dn-header{/* YOC<->toggle common*/
font-size: 10px;/* [2]static10px is better<--62.5%=transplanted from html - to limit effect to Gnavi -  - for[3] leaveAsIS & CHANGE WPcommon.css #9 html, body....{font-size12px --->initial */
font-family: -apple-system, BlinkMacSystemFont,'Helvetica Neue', Arial,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
letter-spacing:0.03em; /*transplanted from body - to limit effect to Gnavi*/
font-kerning: normal; /*for alphabet   transplanted from body - to limit effect to Gnavi*/
font-feature-settings:"pkna"; /* works for ヒラギノ角ゴ, '游ゴシック体','Yu Gothic', Noto Sans CJK JP/doesn'tWorkForMeiryo/DONOT use palt -  transplanted from body*/
word-wrap: break-word; /* so long english won't exceed container -  transplanted from body - to limit effect to Gnavi*/
background-color:#1e0000; /*japexTannedBL  #1e0000 (30,0,0)  YOCobi bg@initial/@768Toggle*/
/*position:relative;relative to bring in front than parallax doNot apply position if using .overlay*/
/*pointer-events: none;allow to click through for scrollYbar below - ONLY for Toppage with parallax complication - back to default:auto@768*/
z-index:11;/*<--11 to bring onTop of WPstykebookGallery.sb-nav <--10---to bring in front than parallax*/
border-bottom:2px solid #b2b2b2;/*japexLOGOgray  (178,178,178) K30% */
position:fixed; /*[3]option:QuickFix for sniffingWPxResponsiveGnaviCombo - not to frameOut with WP x-scroll???-(1/2)*/
width:100%; /*[3]option:QuickFix for sniffingWPxResponsiveGnaviCombo - not to frameOut with WP x-scroll???-(1/2)*/
}
body.dntop .dn-header,/*apply only for TOPPAGE*/
body.dnnet .dn-header{/*apply to OTHER .netPAGE eg. company, contact, error*/
position:fixed;/*so not to have doubleYscroll- ONLY for Toppage with parallax complication*/
width:100%;/*need to define to have fullWidth*/
pointer-events: none;/*allow to click through for scrollYbar below - ONLY for Toppage with parallax complication - back to default:auto@768*/
}
body.dnnet .dn-header{/*overwrite*/
pointer-events: auto;/*back to initial so not to clickThrough*/
}
.dn-menu-logo{/*JapexLOGO in PCmenuOBI  YOC  hide@768 ADDED 44444*/
display:inline-block;
width:5%;/*to lineup with .navbox - .japex-logo-wrap is stickingOut but it's OK as is */
vertical-align:middle;
pointer-events: all; /*click to be back on caused by body.dntop .dn-header 44444*/
}
.dn-navbox {/* <nav> YOC<->toggle common*/
display:inline-block;/*44444*/
width: 94%;/* <--moto:250px to lineup with .menu-logo */
height: auto;/*<--moto:100%*/
padding-top: 0;/*0@initial-->80px@768)*/
padding-left:0;/*0@initial-->10%@768*/
/*background-color: rgba(0, 0, 0, 0.8); ADD@768Toggle - toggleMenu bg when slides out*/
/*position=when <main> is parallax(3D perspective), needs to be fixed HERE to avoid double scrollYbar.
if main is regular contents it can be anything other than static */
position: relative;/*other than static@initial-->fixed@768*/
overflow-y:visible;/*visible@initial--->auto@768*/
z-index: 2; /*KEEP bring on top of main to show pullDown*/
-webkit-transform: translateX(0);/* 0@initial-->100%@768  ADDED for oldSafari*/
-ms-transform: translateX(0);/*  ADDED for ie9*/
transform: translateX(0);/* CHANGED to translateX to work in oldBrowsers<--moto:transform: translate(250px);*/
/*transition: all .5s; --->Move from HERE to common.js toggle Gnavi - [tivel.jp]*/
/*border:1px solid red;*/
pointer-events: none;/*allow to click through to enable japexLOGO-click when YOCmenu - back to default:auto@768 44444*/
/*pointer-events: none;allow to click through for scrollYbar below - ONLY for Toppage with parallax complication - back to default:auto@768*/
}

/*-- when on Brands Page --*/
body.brands .dn-menu-logo{/*JapexLOGO in PCmenuOBI  YOC  hide@768 ADDED 44444*/
padding: 0.4em 0;/*  adjust to be same as .dn-menu li@initial - decide height of OBI*/
}
body.brands .dn-navbox {/* <nav> on BrandsPage*/
display:none;
}

@media (min-width: 769px) { /*yocMenu specific - hover effect - KEEP so that it doesn't affect ToggleMenu 1stLevelClick to open 2ndLevel */
.dn-menu-trigger-box{/*ADDED bg to .menu-trigger 10.10*/
display: none;/*-->block@768  --------------------------YOC/Toggle */
}
.dn-menu {/*ul  1st levelMENU  YOC<->toggle ver.  --------------------------YOC/Toggle */
list-style: none;
font-family: 'Saira Semi Condensed', sans-serif;/* <---'NotoSansCJKjp-ip'*/
font-weight: 500;/*Medium*/
/*font-size:0.975rem;if[2]1.5x0.625 <--because defaultFontSize:62.5% is moved to .dn-header adjust remSize justInCase -->1.6rem@768*/
/*font-size:calc(13px + (15 - 13) * (100vw - 480px) / (1400 - 480));-->(16px + (19 - 16)@768  KEEP HERE   defaultSize[1][2] */
/*font-size for [3] will be made in  WPcommon.css html, body ...{font-size: 15px OR initial  */
margin:0 auto;
/*margin-bottom:0; noNeed?? 44444*/
text-align:center;
/*pointer-events: all; click to be back on caused by header@initial & nav@initial  - ONLY for Toppage with parallax complication*/
/*border:1px solid yellow;*/
}
.dn-menu li {/* YOC<->toggle ver.  --------------------------YOC/Toggle */
position: relative;/*constraint child-ul*/
display:inline-block;/*--->block@768 */
font-size:calc(13px + (15 - 13) * (100vw - 480px) / (1400 - 480));
/*BetterNot state font-size HERE sub-menu will be messedUp*/
/*font-size:0.975rem;1.5x0.625 <--because defaultFontSize:62.5% is moved to .dn-header adjust remSize justInCase -->1.6rem@768 */
/*font-size:calc(13px + (15 - 13) * (100vw - 480px) / (1400 - 480));-->(16px + (19 - 16)@768    XXnotinEffect---MOVED from .dn-menu to overwrite WPcommon.css*/
/*font-size for [3] will be made in  WPcommon.css html, body ...{font-size: 15px OR initial */
color: #b2b2b2;/*japexLOGOgray  #b2b2b2 (178,178,178)*/
text-align: left;
vertical-align:middle;/*<--top*/
padding: 0.8em;/* decide height of menuBar - .toggle-obi@768 same*/
pointer-events: all; /*click to be back on caused by .navbox@initial 44444*/
/*border:1px solid pink;*/
}
.dn-menu li.dn-adj {/* blank li on left to adjust li.menu-logo on page center*/
/*width:4em; 4em--> display:none@768
border:1px solid pink;*/
}
/*.menu li:nth-of-type(2), About  YOC NoNeed 44444
.menu li:nth-of-type(3),  News 
.menu li:nth-of-type(5) { Brand
padding-right:1em; -->0@768
}*/
/*.menu li.menu-logo{JapexLOGO in PCmenuOBI  YOC  hide@768  NoNEED anymore 444444
padding-right:0.6em;
}*/
.dn-menu li.dn-toggle-sub-brand,
.dn-menu li.dn-toggle-sub-ecshop {
padding-right:0;
}
.dn-menu li.dn-toggle-sub-brand a,
.dn-menu li.dn-toggle-sub-ecshop a {
display: block;
padding-right:0;
}
.dn-menu li.dn-toggle-sub-brand > ul,/*2nd levelMENU-BRAND YOC*/
.dn-menu li.dn-toggle-sub-ecshop > ul {/*2nd levelMENU-ECshop*/
list-style: none;
/*display:none;*/
position: absolute;/*absolute@initial-->static@768(null)*/
top: 100%;/*40px@initial-->auto@768(null)*/
left:0.5em;/*40px@initial-->auto@768(to null)*/
height:0;
opacity: 0;
padding-bottom:0.5em;
border-radius: 0 0 3px 3px;
}
.dn-menu li.dn-toggle-sub-brand > ul li, /*2nd levelMENU-BRAND  YOC*/
.dn-menu li.dn-toggle-sub-ecshop > ul li {/*2nd levelMENU-ECshop  YOC*/
display:block;/**/
width: auto;/*<--150%*/
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .1s ease ;
-moz-transition: height .1s ease ;
transition: height .1s ease ;
}
.dn-menu li.dn-toggle-sub-brand:hover > ul, /*2nd levelMENU-BRAND YOC*/
.dn-menu li.dn-toggle-sub-ecshop:hover > ul{/*2nd levelMENU-ECshop*/
/*display:block;<--none*/
width:13em;
height:auto;
margin:0;/*<--0 0 0 0.5em*/
font-family: 'Saira Semi Condensed', sans-serif; 
/*font-family: -apple-system, BlinkMacSystemFont,'Helvetica Neue', Arial,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;  overwrite*/
font-weight: 400 ;  /*400=Regular<--normal  overwrite*/
font-size:0.95em; /*size refers to .menu*/
opacity: 1;/*<--0*/
top: 100%;/*100%or40px@initial-->auto@768(null)*/
background-color:#1e0000;/*japexTannedBL  #1e0000 (30,0,0)<--#1f1f1f to distinguish pullDownBGcolor from AboutJapexBGcolor*/
/*border:1px solid yellow;*/
}
.dn-menu li.dn-toggle-sub-brand:hover > ul li, /*2nd levelMENU-BRAND  YOC*/
.dn-menu li.dn-toggle-sub-ecshop:hover > ul li{
/*display:block;<--none*/
height: 30px;
overflow: visible;
padding: 0;
}
.dn-menu li.dn-toggle-sub-brand ul li a, /*2nd levelMENU-BRAND  YOC*/
.dn-menu li.dn-toggle-sub-ecshop ul li a {/*2nd levelMENU-ECshop  YOC*/
padding: 8px 15px;
}
.dn-menu li.dn-toggle-sub-brand:hover > a, /*2nd levelMENU-BRAND  YOC*/
.dn-menu li.dn-toggle-sub-ecshop:hover > a {/*2nd levelMENU-ECshop  YOC*/
color:#666666 ; /* JapexKgray #666666 102/102/102 */
}
.dn-menu li.dn-toggle-sub-brand > ul li:last-child  a,/*2nd levelMENU-BRAND  YOC*/
.dn-menu li.dn-toggle-sub-ecshop > ul li:last-child  a{/*2nd levelMENU-ECshop  YOC*/
/*border-radius: 0 0 3px 3px;
border:1px solid red;*/
}

}/*-- /end of yocMenu specific@769+ --*/




/*:::::::::::::::::::::::::
::: dotNet Gnavi Footer :::@initial
:::::::::::::::::::::::::::*/
.dn-footer{/*css for <footer>width100%*/
font-size: 10px;/*[2]static10px is better<--62.5% transplanted from html - to limit effect to Gnavi*/
font-family: -apple-system, BlinkMacSystemFont,'Helvetica Neue', Arial,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
letter-spacing:0.03em; /*transplanted from body - to limit effect to Gnavi*/
font-kerning: normal; /*for alphabet   transplanted from body - to limit effect to Gnavi*/
font-feature-settings:"pkna"; /* works for ヒラギノ角ゴ, '游ゴシック体','Yu Gothic', Noto Sans CJK JP/doesn'tWorkForMeiryo/DONOT use palt -  transplanted from body*/
word-wrap: break-word; /* so long english won't exceed container -  transplanted from body - to limit effect to Gnavi*/
color:#b2b2b2;/*japexLOGOgray  #b2b2b2 (178,178,178)*/
background-color:#1e0000;/*japexTannedBL  #1e0000 (30,0,0)*/
border-top:2px solid #b2b2b2;/*japexLOGOgray #b2b2b2 (178,178,178) K30% */
padding:6em 0 1.5em 0;
/*MOTO = 6em 4em 1.5em 4em  withOut StylebookJSON ---> LR padding is moved to .dn-footer-wrap as margin*/
/*extra space on right for backtoTopBTN  [2]because defaultFontSize:62.5% is moved to .dn-header USE em<--[1]6rem 4rem 1.5rem 4rem*/
}
body.dntop .dn-footer{/*apply only for TOPPAGE*/
margin-top:1px;/*make space so that 2pxK shows in full*/
/*border-top:2px solid #b2b2b2; japexLOGOgray #b2b2b2 (178,178,178) K30%*/
/*z-index:100;<--10---to bring in front than parallax - probably not going to come on top of parallax*/
}
.dn-footer-wrap{/*section container just for LR margin except stylebookJSON  ADDED*/
margin:0 4em;/* paddingLR moved from .dn-footer */
/*border:1px solid #000;*/
}
.dn-sns_footer{/*SNS ul*/
list-style: none;
/*font-size:0; if[2] commentOut*/ 
/*font-size:40px; XXXXXXif[3] define font-size HERE for snsIcons??? doesn'tWORK*/ 
text-align:center;
margin:3.5em 0 5em 0;/*[1]5rem 0 7rem 0<--->if[2]5em 0 7em 0 because defaultFontSize:62.5% is moved to .dn-header USE em<--->[3]furtherADJUST 3.5em 0 5em 0*/
/*border:1px solid yellow;*/
}
.dn-sns_footer li{/*SNS li*/
display:inline-block;
width:auto;/*overwrite*/
font-size: 3.3em;/*if[2]because defaultFontSize:62.5% is moved to .dn-header USE em <---[1]3.3rem*/
/*[3]font-size HERE won't be effective HERE for SNSicon size --> ADD .dn-sns_footer li a span  */
line-height: 1.2; 
margin:0 0.2em;
color:#b2b2b2;/*japexLOGOgray  #b2b2b2 (178,178,178)*/
/*border:1px solid white;*/
}
.dn-sns_footer li a{/*SNS*/
display:block;
height:100%;
}
.dn-sns_footer li a span{/*ADDED for [3] to control SNSicon size*/
font-size: 2.2em; /* NoNeed after .dn-footer-wrap is ADDED?? 2020.7.26*/
}

/*:::merged from style-gph.css :::
::::::::: stylebookJSON ::::::::::*/
.gph-dnfooter{/*GooglePhoto ParentContainer GNAVIfooter*/
display:none;/*doNot show thisFeedBlock when WP 2020.7.30*/
/*margin:0 0 5rem 0; [1][2]0 0 7rem 0 <--->[3]furtherADJUST 0 0 5rem 0?=7remx71.428%*/
}
.gph-dnfooter h4{/*stylebookJSON @dn-footer titleEN*/
font-family: 'Saira Semi Condensed', sans-serif;/*<--Arimo*/
font-weight:400;/*400:regular 500:Medium  600:SemiBold 700:bold*/
font-size:2.4em;/*[1][2]3.5em refer to footer baseSize <--->[3]furtherADJUST 2.4em<--2.5em???=3.5emx71.428%*/
text-align:center;
line-height:1;/*[1][2]noNeed <--->[3]furtherADJUST ADD*/
}
.gph-dnfooter h5{/*stylebookJSON @dn-footer subtitleJA*/
font-family: 'NotoSansCJKjp-ip';
font-weight: 500;/*Medium*/
font-size:1em;/*[1][2]1.5em refer to footer baseSize <--->[3]furtherADJUST 1em<--1.1em???=1.5emx71.428%*/
text-align:center;
margin-bottom:0.3em;
}
.gph-dnfooter section {/*#loadarea, #loadarea2...*/
position:relative; /*constrain .bulklink HERE */
display: flex;
flex-wrap: nowrap;/*default=nowrap, changeLine=wrap*/
margin:5px 0;
/*justify-content: space-between; AIKO ADDED not in effect?*/
/*transition: all .2s ease-in-out; NoNeed if Using InView@gph.js*/
}
.gph-dnfooter section::after {
content: '';
flex-grow: 1 ;/* 1=always fill parentWidth <--999999999*/
/*min-width: 20%;*/
}
.gph-dnfooter section a span.bulklink{/* make a bulkLink eg .gph section*/
position:absolute; /*constraint to parent */
width:100%;
height:100%;/*to make sure it covers parent?*/
top:0;
left: 0;
z-index: 1;
}
.gph-dnfooter section a:hover span.bulklink{/* for bulkLink*/
background-color:#1e0000;/*japexTannedBL  #1e0000 (30,0,0)*/
opacity:0.2;
}
.gph-dnfooter div {/*each loaded photo*/
position: relative;/*constrain CHILDimg*/
margin: 2px;
background-color: transparent;/*<---whitesmoke #f5f5f5*/
}
.gph-dnfooter i{
display: block;
}
.gph-dnfooter img {
position: absolute;/*constraint to parent*/
top: 0;
left:0;/*ADDED*/
width: 100%;
vertical-align: bottom;
}
/*::::::::: /stylebookJSON ::::::::::*/


.dn-footer-nav{/*ul bulkFrame*/
display:block;
list-style:none;
font-size:0;
}
.dn-footer-nav li{
display:inline-block;
width:15%;
margin:0 1em 0 0;/*0 2em 0 0*/
/*font-size:1.3rem; if [1] */
font-size:0.8125rem; /*if[2]1.3x0.625 <--because defaultFontSize:62.5% is moved to .dn-header adjust remSize justInCase*/
font-size:calc(12px + (13 - 12) * (100vw - 480px) / (1400 - 480));/*footer baseSize*/
line-height:1.5;
text-align:left;
vertical-align:top;
font-style:normal;/*make sure it won't be italics from <address>Tag*/
/*border:1px solid green;*/
}
.dn-footer-nav li.dn-footer-adr{/*address*/
width:25%;/* wider than others@initial*/
margin:0 5em 5em 0;/*overwrite*/
padding-top:0;/*overwrite*/
/*border:1px solid yellow;*/
}
.dn-adr li{/*ul*/
display:block;
width:100%;
}
.dn-ftnv-title{/*h4*/
font-family: 'NotoSansCJKjp-ip';/*EN will be set w/span.wf-allupperXX or .wf-upperlowerXX */
font-weight: 500;/*Medium*/
font-size:1.2em;/*refer to footer baseSize*/
margin-bottom:0.3em;
}
.dn-ftnv{/*ul menu  inside .footer-nav li*/
margin-bottom:1em;
margin-left:0.2em;
}
.dn-ftnv li{/*ul menu  inside .footer-nav li*/
display:block;/*overwrite*/
width:100%;/*overwrite*/
/*margin:0.5em 0;overwrite*/
padding:0.3em 0;
/*border:1px solid pink;*/
}
.dn-ftnv li a{/*ADDED to control [3] font-size*/
font-size:1em;/*refer to footer baseSize*/
}
.dn-ftnv.distr li{/*li below JAPEX Co.Ltd distributingLIST ADDED2025.1.9*/
padding:0.1em 0;/* overwrite<--0.3em 0*/
/*font-size:0.9em;*/
}
.dn-ftnv li.jstock{/*li below malls for NYUKA(jstock) with more topSpace tpo standOout*/
margin-top:1em;
}
.dn-ftnv-lbc{/*ADDED2025.1.21 PreventKAIGYO-footerECSHOP-JPNnameTil@MediaQuery1140px JAPEX-CHOKUEITEN-JAPEX-STORE/RAKUTEN-ICHIBA-TEN/YAHOO-TEN*/
min-width:20em;/*will nullifyToKAIGYObelowMediaQuery1140px Because JAPEX-CHOKUEITEN-JAPEX-STORE won't fitAnyMore*/
}

/*-- Newsletter   TEST - need scripting to really work --*/
.dn-nl-subscript {/*contains all except widgettitle*/
position:relative;/*ADDED KEEP*/
display: block;
max-width: 500px;
min-width: 200px;
width: 100%;
margin-top: 5px;
padding:0;
color:#fff;
}
.dn-nl-email-box{
  display:block;
}
.dn-nl-subscript input[type=email] {/*customCSS overwriting plugin styles textEnter field  */
display: inline-block;/*block*/
width: 70%;/*100%*/
height:35px;/*ADDED*/
margin: 0;
padding: 10px;/*10px*/
color: #444;
line-height: normal;
background-color: #f4f4f4;/*#f4f4f4*/
border: 1px solid #ddd;/*hide default shadow for input*/
border-radius:3px 0 0 3px;
}
.dn-nl-subscript input[type=submit]{/*customCSS overwriting plugin styles SignUpBTN positioning*/
display:inline-block !important;
margin-top:0 !important;/*KEEP*/
}
.dn-nl-subscript input.dn-nl-submit {/*customCSS overwriting plugin styles  SignUpBTN*/
position:absolute;
top:0 !important;
right:0 !important;
width: 30% !important;/*auto*/
height:100%;/*35px*/
font-size:0.8em;
font-weight:bold;
line-height:17.5px;/* 17.5px ADDED middle*/
color: #221715;
background-color: #dcdcdc;/*#444*/
border:1px solid #dcdcdc;/*hide default shadow for input*/
border-radius:0 3px 3px 0 !important;/*ADDED*/
}
.dn-nl-subscript input.dn-nl-submit:hover{/*ADDED*/
background-color:#696969;
border:1px solid #696969;/*hide default shadow for input*/
color:#fff;
}
/*--- /newsletter TEST --*/

.dn-copyright{
width:calc(100% - 60px);
margin-top:2.5em;/*if[1]2.5rem<--->if[2]because defaultFontSize:62.5% is moved to .dn-header USE em*/
font-family: 'Saira Semi Condensed', sans-serif;/*<--Arimo*/
font-weight:400;/*400:regular 500:Medium  600:SemiBold 700:bold*/
text-align:left;
vertical-align:top;
font-size:13px;/* static size works better throughOut[1][2][3] <--rem refers to html fint-size which could vary */
/*font-size:1.2em;<--font-size moto:1.1em  if[1]refer to body font<--->if[2] adjust with rem????<--->if[3] adjust 0.7rem*/
/*font-size:1.1em;if[1]refer to body font 1.1em<--->if[2] adjust with rem????*/
/*border:1px solid #333;*/
}


/*---- span linebreakCONTROL .slbc ----*/
span.slbc {/*heroTXT*/
display: inline-block;
white-space: nowrap;
}



/* ---------------------------------------------------------
  BIGGER PC styles
   ---------------------------------------------------------*/
@media (min-width: 1401px) {

}/*end of @1401px*/

@media (max-width: 1026px) {/*SpecialCase for Footer ECshopJPNname*/
	.dn-ftnv-lbc{/*ADDED2025.1.21 KAIGYO-footerECSHOP-JPNnameTil@MediaQuery1140px JAPEX-CHOKUEITEN-JAPEX-STORE/RAKUTEN-ICHIBA-TEN/YAHOO-TEN*/
		min-width:auto; /*overwrite20em@initial  nullifyToAllowKAIGYObelowMediaQuery1140px Because JAPEX-CHOKUEITEN-JAPEX-STORE won't fitAnyMore*/
	}
}/*end of @1026px*/

/* ---------------------------------------------------------
  TABLET styles 
   ---------------------------------------------------------*/
@media (max-width: 768px) {/* based on WP bones GRID(d-5of7 m-all) */
/*:::::::::::::::::::::::::
::: dotNet Gnavi Header :::@768
:::::::::::::::::::::::::::*/
/*---GnaviToggle class 1set ---*/
.dn-menu-logo{/*/*JapexLOGO in PCmenuOBI  YOC  hide@768  ADDED 44444*/
display:none;/*<--inline-block@initial*/
}
.dn-toggle-obi {/* YOC<->toggle ver.  --------------------------YOC/Toggle */
position: relative;/*[A1/4]if frameOut onScroll - ADD THIS consraint .dn-menu-trigger-box  [B1/4]if fixToggle on rightTop REMOVE this */
display:block;/*<--none@initial */
font-size:1.4rem;/*for padding to have same space as .menu li*/
font-size:calc(12px + (14 - 12) * (100vw - 480px) / (1400 - 480));/**/
padding: 0.4em 0;/*  adjust to be same as .dn-menu li@initial - decide height of OBI*/
/*pointer-events: none;allow to click through for scrollYbar below - ONLY for Toppage with parallax complication*/
/*border:1px solid pink;*/
}
.dn-japex-logo-wrap-toggle{/* overwrite - headerLOGO in toggleOBI--------------------------YOC/Toggle */
display:block;/*<--none@initial */
width:70%;
max-width:160px;
min-width:160px;
margin:0 auto;/*centering re-define*/
padding:0; /*re-define as .japex-logo-wrap */
pointer-events: auto; /*enable click HERE back on - ONLY for Toppage with parallax complication*/
/*border:1px solid yellow;*/
}
.dn-overlay {
content: "";
display: block;
width: 0;
height: 0;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;/*<---absolute*/
top: 0;
left: 0;
z-index: 9;/*<--2*/
opacity: 0;
transition: opacity .5s;
}
.dn-overlay.open {
width: 100%;
height: 100%;
opacity: 1;
}
.dn-menu-trigger-box{/*ADDED bg to .menu-trigger 10.10*/
display: block;/*<--none@initial  --------------------------YOC/Toggle */
width: 48px;
height: 44px;/*<--38px<--58px*/
position: absolute;/*<--[A2/4]if frameOut onScroll=absolute to be constrained to .dn-toggle-obi  [B2/4]if fixToggle on rightTop=fixed*/
top: 0;
right: 9px;
border-bottom-left-radius: 5px; 
border-bottom-right-radius: 5px;
z-index: 99;
background:transparent;/*<--#333*/
/*pointer-events: none;allow to click through for scrollYbar below  - ONLY for Toppage with parallax complication */
/*border:1px solid yellow;*/
}
.dn-menucap{/*menuTxt above hamburger*/
font-family: -apple-system, BlinkMacSystemFont,'NotoSansCJKjp-ip', 'Helvetica Neue', Arial, sans-serif;/*ADDED Noto to show thicker*/
font-weight: 500;/*Medium*/
font-size:0.6rem;/*[1][2]1em <--->if[3] make furtherADJUSTMENT 0.6rem*/
line-height:1.6;/*<--1.9<--2*/
text-align:center;
color:#b2b2b2;/*japexLOGOgray  #b2b2b2 (178,178,178)*/
}
.dn-menu-trigger {
display: inline-block;
width: 28px;/*<--36px*/
height: 18px;/*<--28px*/
vertical-align: middle;
cursor: pointer;
position: absolute;/*<--[A3/4]if frameOut onScroll=absolute to be constrained to .dn-toggle-obi  [B3/4]if fixToggle on rightTop=fixed*/
top: 13px;/*<--12px<--20px*/
right: 9px;/*<--[A4/4]if frameOut onScroll=9px  [B4/4]if fixToggle on rightTop=18px*/
z-index: 100;
pointer-events: auto;/* enable click HERE back on - ONLY for Toppage with parallax complication */
/*transform: translateX(0); No Need if hamburger doesn't change position
transition: transform .5s;*/
}
/*.dn-menu-trigger.active {keep commentOut for X to stay at Rtop
transform: translateX(-250px);
}*/
.dn-menu-trigger span {/*Hamburger Bar*/
display: inline-block;
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #b2b2b2;
}
.dn-menu-trigger.active span {/*Hamburger Bar*/
background-color: #b2b2b2;
}
.dn-menu-trigger span:nth-of-type(1) {
top: 4px;/*<--5px<--moto:0*/
}
.dn-menu-trigger.active span:nth-of-type(1) {
transform: translateY(6px) rotate(-45deg);/*<--9px<--13px<--moto:12px*/
}
.dn-menu-trigger span:nth-of-type(2) {
top: 10px;/*<--15px<--13px<--moto:12px*/
}
.dn-menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}
.dn-menu-trigger span:nth-of-type(3) {
bottom: 0;
}
.dn-menu-trigger.active span:nth-of-type(3) {
transform: translateY(-6px) rotate(45deg);/*<-- -13px<--moto:12px*/
}

/*-- when on Brands Page --*/
body.brands .dn-menu-trigger,
body.brands .dn-menucap{
display:none;/*hide*/
}

.dn-navbox {/*<nav>*/
width: 100%; /*<--80%<--(toggleONLY=250px@initial) (Yoc<->toggle=??%@initial) */
height: 120%; /*<--moto:100% */
padding-top: 80px;/*<--0@initial*/
padding-left:20%;/*<--10%<--0@initial*/
background-color: rgba(30,0,0,0.8); /*japexTannedBL  #1e0000 (30,0,0)  ADD@768Toggle - toggleMenu bg when slides out*/
position: fixed;
overflow-y:auto;/*enable overlay to verical-swipe if there's menu outside viewport*/
pointer-events: auto;/*prevent clickthrough caused@initial - back to default:auto@768 44444*/
/*pointer-events: auto ; prevent clickthrough caused by .header and self none@initial - ONLY for parallaxToppage */
top: 0;
right: 0;
z-index: 10;
-webkit-transform: translateX(100%);/* <--ToggleONLY:250px@initial  ADDED for oldSafari*/
-ms-transform: translateX(100%); /*ADDED for ie9*/ 
transform: translateX(100%);
/*transition: all .5s;*/
}
.dn-navbox.open {
-webkit-transform: translateX(0); /*ADDED for oldSafari*/
-ms-transform: translateX(0); /*ADDED for ie9*/
transform: translateX(0);/*<---CHANGE to translateX to work for oldBrowser   moto:transform: translateZ(0)*/
}
.dn-menu {/*ul  1st levelMENU*/
list-style: none;
font-family: 'Saira Semi Condensed', sans-serif;/*<--'NotoSansCJKjp-ip'*/
font-weight: 500;/*Medium*/
/*font-size:1.9rem;if[1]*/
font-size:1.19rem;/*if[2]1.9x0.625 <--because defaultFontSize:62.5% is moved to .dn-header adjust remSize justInCase*/
font-size:calc(16px + (19 - 16) * (100vw - 480px) / (1400 - 480));/*<--(13px + (15 - 13)@initial*/
margin-bottom:10em;/*<--0@initial*/
/*text-align:center;*/
}
.dn-menu li {
display:block;
color:#b2b2b2;/*japexLOGOgray  #b2b2b2 (178,178,178)*/
text-align: left;
padding: 0.6em 0;/*<--0.8em 0@initial*/
}
.dn-menu li.dn-adj {/* blank li on left to adjust li.menu-logo on page center*/
display:none;
/*width:4em; @initial*/
}
/* .menu li:nth-of-type(2),  About YOC  
.menu li:nth-of-type(3),   News YOC  
.menu li:nth-of-type(5) {   Brand YOC  
padding-right:0;  0@768(null) just in case<---1em@initial
}*/
/*.menu li.menu-logo{JapexLOGO in PCmenuOBI  YOC NotInUSE 44444
display:none;  ADDED@768
}*/
.dn-menu li.dn-toggle-sub-brand a,
.dn-menu li.dn-toggle-sub-ecshop a {
position: relative;/*<--relative@initial  constraint child-ul*/
display: inline-block;/*<--block@initial*/
background:transparent;/*null<-- #000@initial*/
}
.dn-menu li.dn-toggle-sub-brand > ul,/*2nd levelMENU-BRAND*/
.dn-menu li.dn-toggle-sub-ecshop > ul {/*2nd levelMENU-ECshop*/
list-style: none;
display:none;
top: 0;
left:0;
opacity: 0;
}
.dn-menu li.dn-toggle-sub-brand > ul li,/*2nd levelMENU-BRAND*/
.dn-menu li.dn-toggle-sub-ecshop > ul li {/*2nd levelMENU-ECshop*/
height: 0;
overflow: hidden;
padding: 0;
background-color:transparent;/*null<-- #000@initial*/
/*-webkit-transition: height 2s ease .1s;0 ease 0 NOT inEffect as  add.Class byJS??
-moz-transition: height 2s ease .1s;
transition: height 2s ease .1s;*/
}
.dn-menu li.dn-toggle-sub-brand > ul.open,
.dn-menu li.dn-toggle-sub-ecshop > ul.open { 
display:block;
margin:1em 0 0 0.5em;
font-family: 'Saira Semi Condensed', sans-serif;
/*font-family: -apple-system, BlinkMacSystemFont,'Helvetica Neue', Arial,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;overwrite*/
font-weight: 400 ;  /*400=Regular<--normal  overwrite*/
font-size:0.95em;/*size refers to .menu*/
opacity: 1; 
}
.dn-menu li.dn-toggle-sub-brand > ul.open li,
.dn-menu li.dn-toggle-sub-ecshop > ul.open li {
height: 30px;
overflow: visible;
padding: 0;
background-color:transparent;/*null<-- #000@initial*/
}
/*--- /dotNet Gnavi Toggle*/

/*:::::::::::::::::::::::::
::: dotNet Gnavi Footer :::@768
:::::::::::::::::::::::::::*/
.dn-footer-nav li{
width:30%;/*<--15%@initial*/
/*font-size:1.4rem; if[1]*/
font-size:0.875rem; /*if[2]1.4x0.625 <--because defaultFontSize:62.5% is moved to .dn-header adjust remSize justInCase*/
font-size:calc(13px + (14 - 13) * (100vw - 480px) / (1400 - 480));/*<--(12px + (13 - 12)@initial*/
}
.dn-footer-nav li.dn-footer-adr{
width:30%;/*same as others <--25%@initial*/
margin:0 1em 0 0;/*same as others<--0 5em 5em 0@initial*/
}
.dn-adr{/*ul*/
margin-bottom:5em;/*ADDED@768*/
}
/*.dn-adr,*/ .dn-ftnv.distr{/*ul Swapped from.dn-adrTo.dn-ftnv.distr 2025.1.9*/
width:100%;/*re-define*/
}
.dn-sns_footer li{/*SNS li*/
width:auto;/*re-define*/
}
.dn-ftnv-title{/*h4*/
margin-top:2em;/*<---0.5em@initial*/
}
.dn-ftnv li{/*ul menu  inside .footer-nav li*/
display:block;/*re-define*/
width:100%;/*re-define*/
}
.dn-copyright{
margin-top:4em;/*if[1]4rem<--->if[2]because defaultFontSize:62.5% is moved to .dn-header USE em*/
}

}/*end of @media768px */


/* ---------------------------------------------------------
  SMARTPHONE styles 
   ---------------------------------------------------------*/
@media (max-width: 480px) {
/*---SVGcontainer ---*/
.dn-japex-logo-wrap-footer{/* LOGO in footer*/
max-width:250px;/*<--300px@initial*/
/*min-width:160px;*/
margin:0;/* to left-align <--0 auto@initial*/
}
/*:::::::::::::::::::::::::
::: dotNet Gnavi Footer :::@480
:::::::::::::::::::::::::::*/
.dn-footer{/*css for <footer>width100%*/
/*padding:6rem 4rem 1.5rem 4rem;@initial*/
/*padding-left:2em;moved to.dn-footer-wrap   overwrite 2020.7.25*/
}
.dn-footer-wrap{/*section container just for LR margin except stylebookJSON  ADDED*/
/*margin:0 4rem; <---0 4rem@initial */
margin-left:2em;
/*border:1px solid #000;*/
}
/*::::::::: stylebookJSON @480 ::::::::::*/
.gph-dnfooter h4{/*stylebookJSON @dn-footer titleEN*/
font-size:1.93emem;/*<--2.5em@initial  [1][2]2.7em refer to footer baseSize <--->[3]furtherADJUST 1.93em?=2.7emx71.428%*/
text-align:left;/*<--center@initial */
margin-left:1em;/*ADDED@480*/
}
.gph-dnfooter h5{/*stylebookJSON @dn-footer subtitleJA*/
font-size:0.93em;/*<--1.5em@initial [1][2]1.3em refer to footer baseSize <--->[3]furtherADJUST 0.93em?=1.3emx71.428%*/
text-align:left;/*<--center@initial */
margin-left:2em;/*ADDED@480*/
}
.gph-dnfooter div:nth-last-of-type(-n+2) {/*show less div  ADDED@480*/
display:none;
}
/*::::::::: /stylebookJSON @480 ::::::::::*/
.dn-sns_footer{/*SNS ul*/
text-align:left;/*<--center@initial*/
margin-left:-1rem;/*ADDED to lineUpLeft*/
}
.dn-sns_footer li{/*SNS li*/
font-size: 2.8em;/*if[1] 2.8rem<--->if[2]because defaultFontSize:62.5% is moved to .dn-header USE em*/
margin:0 0.1em;/*<--0.2em@initial*/
}
.dn-footer-nav li, .dn-footer-nav li.dn-footer-adr{
width:100%;/*<--30%@768<--15em@initial*/
}
.dn-footer-nav li.dn-footer-adr .dn-ftnv-title{/*h4*/
margin-top:0;/*<--2em@768 overwrite*/
}

}/*end of @media480px */