/* --------------------------------------------------------- html5 - BASE style - AGE OF GLORY - mp4MOVIE @ Initial Hero - ShopifyApp:CovetGallery ver.(.gph CommentedOUT) ThemeColor //black #000 //menuBlack(pullDown) #1f1f1f (31,31,31) AOG black #393939 (57,57,57) //lighterBL<--#231f20 Gold #b2a36f (178,163,111) //AOG logoGOLD darkGold #887944 (136,121,68) dimgray #696969 (105,105,105) gray #808080 (128,128,128) darkgray #a9a9a9 (169,169,169) silver #c0c0c0 (192,192,192) lightgray #d3d3d3 (211,211,211) ===== 2025.1.23 .distr-brand Add copyright-ishTXTaboutSEIKI-SOU-DAIRITEN --- GoogleFont: Montserrat Regular(400),Semi-bold(600), Bold(700) apply only where it's used as titles, NOT body as generalFont? ===== Gnavi(YOC hover^obi w/LOGO-ToggleClick) + samePageLinkSmoothSlide ===== Revised BrandFooter to match dotNetGnaviFooter ---------------------------------------------------------*/ html{ font-size: 62.5%; } *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html,body{ height:100%;/*ADDED for .herobox*/ } body.brands { margin: 0; padding:0; background: #fff; color: #393939;/*(57,57,57)*/ font-family: -apple-system, BlinkMacSystemFont,'Helvetica Neue', Helvetica, Arial,'ƒqƒ‰ƒMƒmŠpƒS ProN W3','Hiragino Kaku Gothic ProN',Meiryo, sans-serif; line-height:1.3; letter-spacing:0.03em;/*0.03em*/ font-kerning: normal;/*for alphabet*/ font-feature-settings:"pkna";/*works for ƒqƒ‰ƒMƒmŠpƒS, 'ŸΰƒSƒVƒbƒN‘Μ','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 NotInUSE 2020.6.18 transition: 1s opacity;*/ } body.fade-out {/*fadeIn effect by abeautifulsite.net InUSEfor Age of glory to avoid1stLoad htmlFlicker WORKING??<--NotInUSEforBrandSite 2020.6.18*/ opacity: 0; transition: none; } .no-scroll{/*class to append to by modal-multi_vc.js - prevent scroll when SYNCERmodal-multi is open*/ overflow:hidden; } /* Default link */ a{ color:inherit; /*inherit parent*/ text-decoration:none; background-color:transparent; -webkit-tap-highlight-color: rgba(178,163,111,0.6); /*Gold #b2a36f (178,163,111), ALTER highlights links on iPhones/iPads*/ cursor:pointer; } a:link { color:inherit; /*inherit parent*/ text-decoration:none; } a:visited { color:inherit; text-decoration:none; } a:hover, a:active { color:#696969; /*dimgray (105,105,105) KEEP */ text-decoration:none; } a.dol{/*dot Underline Link*/ border-bottom: 1px dotted; display:inline ;/*to keep line close to letter*/ line-height: 100%;/*to keep line close to letter*/ text-decoration: none; } span.bulktone{/* [1]withoutLink-use as overlayTone eg. AgeOfGlory productLineUp*/ position:absolute; /*constraint to parent */ width:100%; height:100%;/*to make sure it covers parent?*/ top:0; left: 0; /*z-index: 1; noNeed if carefulWhereHTMLcodeIsPositioned??*/ background-color:#000; opacity:0.3; pointer-events: none;/*click through to reach belowLink*/ } span.bulktone.disable{/* [1]-2 ToneDownToLookLinkIsDisabled*/ position:absolute; /*constraint to parent */ width:100%; height:100%;/*to make sure it covers parent?*/ top:0; left: 0; z-index: 1; /*noNeed if carefulWhereHTMLcodeIsPositioned??*/ background-color:#000; opacity:0.8; pointer-events:none;/*click through to reach belowLink*/ mix-blend-mode: multiply; } a span.bulklink{/* [2]withLink make a bulkLink eg. PMJ Home productLineUp*/ position:absolute; /*constraint to parent */ width:100%; height:100%;/*to make sure it covers parent?*/ top:0; left: 0; z-index: 1; } a:hover span.bulklink{/* for bulkLink*/ background-color:#c0c0c0;/*silver #c0c0c0 192/192/192*/ opacity:0.3; } .no-hi-light a{ /*set with js.mobile_touch if don't want to apply -webkit-tap-highlight-color#34 */ color:inherit; /*inherit parent*/ text-decoration:none; background-color:transparent; -webkit-touch-callout:none;/*disable default tap highlight*/ -webkit-tap-highlight-color: rgba(0,0,0,0); /*hide highlights links on iPhones/iPads*/ cursor:pointer; } .touchstyle {/*class addByJS to element with .mobile_touch */ transition: all .2s ease-in-out; z-index:1;/*to bring to front while tap on mobile*/ } .touchstyle:hover { transform: scale(1.1); } .notouchstyle {/*class addByJS to element with .mobile_touch */ background-color:transparent; transition: all .2s ease-in-out; } .nolink {/*class addByJS to element with .mobile_touch - sameUSED@life-w-bike/css/style.css */ pointer-events: none; /* disable link */ cursor: default; transition: all .2s ease-in-out; } .cf { /*clearfix*/ margin:0; zoom: 1; font-size:0; } .cf:before, .cf:after { content: ""; display: table; } .cf:after{ clear: both; } .hatom-extra {/*ADDED only for StructuredData(schema) so no need to be seen on front webPage*/ display:none; visibility:hidden; font-size:0; } .c{/*quick class for center*/ margin:0 auto; text-align:center !important; } /* --------------------------------------------------------- FONT ---------------------------------------------------------*/ @font-face { font-family: 'NotoSansCJKjp-ip'; font-style: normal; font-weight: 500;/*Medium*/ src: url('../font/NotoSansCJKjp-Medium_subset.woff?ver=20210209') format("woff"); } @font-face { font-family: 'NotoSansCJKjp-ip-b'; font-style: normal; font-weight: 700;/*Bold*/ src: url('../font/NotoSansCJKjp-Bold_subset.woff?ver=20210209') format("woff"); } @font-face {/*'>',mail,Magnifying glass,tag,pdf icon*/ font-family: 'icomoon-p'; src: url('../../life-w-bike/font/icomoon-p.woff?ver=20210121') format('woff');/* withLINEicon:?ver=20210121 from ROOT/life-w-bike*/ 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";} .icop-chevron-thin-down-r:before {content: "\e904";/*pmj menu 'v' back */} .icop-chevron-left-r:before {content: "\e902";} .icop-chevron-thin-left:before {content: "\e905";} .icop-chevron-right-r:before {content: "\e903";} .icop-chevron-thin-right:before {content: "\e906";} .icop-chevron-up-r:before {content: "\e908";/*pmj '^' 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*/} /* --------------------------------------------------------- WP bones GRID ---------------------------------------------------------*/ .d-all {float: left; padding-right: 0; width:100%; } .d-1of2 {float: left; padding-right: 0.75em; width: 50%; } .d-1of3 {float: left; padding-right: 0.75em; width: 33.33%; } .d-2of3 {float: left; padding-right: 0.75em; width: 66.66%; } .d-1of4 {float: left; padding-right: 0.75em; width: 25%; } .d-3of4 {float: left; padding-right: 0.75em; width: 75%; } .d-1of5 {float: left; padding-right: 0.75em; width: 20%; } .d-2of5 {float: left; padding-right: 0.75em; width: 40%; } .d-3of5 {float: left; padding-right: 0.75em; width: 60%; } .d-4of5 {float: left; padding-right: 0.75em; width: 80%; } .d-1of6 {float: left; padding-right: 0.75em; width: 16.6666666667%; } .d-1of7 {float: left; padding-right: 0.75em; width: 14.2857142857%; } .d-2of7 {float: left; padding-right: 0.75em; width: 28.5714286%;} .d-3of7 {float: left; padding-right: 0.75em; width: 42.8571429%; } .d-4of7 {float: left; padding-right: 0.75em; width: 57.1428572%; } .d-5of7 {float: left; padding-right: 0.75em; width: 71.4285715%;} .d-6of7 {float: left; padding-right: 0.75em; width: 85.7142857%; } .d-1of8 {float: left; padding-right: 0.75em; width: 12.5%; } .d-1of9 {float: left; padding-right: 0.75em; width: 11.1111111111%; } .d-1of10 {float: left; padding-right: 0.75em; width: 10%; } .d-1of11 {float: left; padding-right: 0.75em; width: 9.09090909091%; } .d-1of12 {float: left; padding-right: 0.75em; width: 8.33%; } @media (max-width: 768px) {/*TABLET*/ .t-all {float: left; padding-right: 0; width: 100%; } .t-1of2 {float: left;padding-right: 0.75em; width: 50%; } .t-1of3 {float: left; padding-right: 0.75em; width: 33.33%; } .t-2of3 {float: left; padding-right: 0.75em; width: 66.66%; } .t-1of4 {float: left; padding-right: 0.75em; width: 25%; } .t-3of4 {float: left; padding-right: 0.75em; width: 75%; } .t-1of5 {float: left; padding-right: 0.75em; width: 20%; } .t-2of5 {float: left; padding-right: 0.75em; width: 40%; } .t-3of5 {float: left; padding-right: 0.75em; width: 60%; } .t-4of5 { float: left; padding-right: 0.75em; width: 80%; } } @media (max-width: 480px) {/*SMP*/ .m-all {float: left; padding-right: 0; width: 100%;} .m-1of2 {float: left; padding-right: 0.75em; width: 50%; } .m-1of3 {float: left; padding-right: 0.75em; width: 33.33%; } .m-2of3 {float: left; padding-right: 0.75em; width: 66.66%; } .m-1of4 {float: left; padding-right: 0.75em; width: 25%; } .m-3of4 {float: left; padding-right: 0.75em; width: 75%; } } /* --------------------------------------------------------- SVG ---------------------------------------------------------*/ /*---SVGcontainer ---*/ .ageofglory-logo-wrap-inimov,/* Logo to show AFTER 'Life with Bike' - InitialMOVsectionMOVver overwritten#726*/ .ageofglory-logo-wrap,/* decide position, size for .ageofglory-logo-box - (YOC/Toggle)LOGO - parentContainer will show/hide one of the two.*/ .ageofglory-logo-wrap-footer{/*ageofglory footerLOGO*/ display:block; width:100%;/*<--100% of .menu li(YOC) or .toggle-obi(Toggle)*/ max-width:240px; /*min-width:180px; add@768*/ vertical-align:middle; margin:0;/*-->0 auto@768(center whenToggle)*/ } .ageofglory-logo-wrap-footer{/*ageofglory footerLOGO overwrite*/ max-width:200px; min-width:150px; vertical-align:middle; margin:0 auto;/* center @initial-->0 auto@768(center whenToggle)*/ margin-bottom:1rem; } .ageofglory-logo-wrap a:hover, /*ageofglory headerLOGO */ .ageofglory-logo-wrap-footer a:hover{ /*ageofglory footerLOGO*/ opacity: 0.7; } /*--- SVGlogo ---*/ .ageofglory-logo-box{/* ageofglory headerSVG(#svg-ageofglory-header) LOGO h1*/ position: relative; width:100%;/*controlSize/change padding-bottom accordingly*/ height: 0; padding-bottom:24.3%;/* aspectRatop 24.3%=53/218*100 */ vertical-align: top; margin:0;/*erase topBottom space*/ } .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 ---------*/ .efflogo-ageofglory-gold,/* ageofgloryGold*/ .efflogo-ageofglory-w,/* ageofglory*/ .efflogo-ageofglory-bl{/* ageofglory*/ position: absolute; width:100%; height:100%; top: 0; left: 0; fill: #fff; /*DONOT apply filter to svg --> apply to parent .japex-logo-box*/ } .efflogo-ageofglory-gold{/* ageofglory GOLDlogo*/ fill: #b2a36f;/*Gold #b2a36f (178,163,111) overwrite*/ } .efflogo-ageofglory-bl{/* ageofglory BLlogo*/ fill: #000;/*overwrite*/ } /**** 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: 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; } /*::::::::::::::::::::::: ::::::::: Menu ::::::::: :::::::::::::::::::::::::*/ .header{/* YOC<->toggle common*/ background-color:#b2a36f; /*AOGgold(178,163,111)*/ /*position:relative;relative to bring in front than parallax doNot apply position if using .overlay*/ /*z-index:10;<--10---to bring in front than parallax*/ } /*---GnaviToggle class 1set ---*/ .toggle-obi {/* YOC<->toggle ver. --------------------------YOC/Toggle */ display:none;/*-->block@768*/ } nav {/* YOC<->toggle common*/ width: 100%;/*<--auto<--moto:250px*/ height: auto;/*<--moto:100%*/ padding-top: 0;/*0@initial-->80px@768)*/ padding-left:0;/*0@initial-->3em@768*/ background-color: rgba(178, 163, 111, 0.8);/* AOGgold(178,163,111) overlay when menu is open*/ position: relative;/*other than static@initial-->fixed@768*/ overflow-y:visible;/*visible@initial--->auto@768*/ /*top: 0; right: 0;*/ z-index: 2;/*bring on top of needed*/ -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]*/ } @media (min-width: 769px) {/* yocMenu specific - hover effect */ nav {/* YOC<->toggle common*/ background-color: rgba(178, 163, 111, 0);/* transparent when yocMenu overlay when menu is open*/ } .menu-trigger-box{/*ADDED bg to .menu-trigger 10.10*/ display: none;/*-->block@768 --------------------------YOC/Toggle */ } .menu {/*ul 1st levelMENU YOC<->toggle ver. --------------------------YOC/Toggle */ list-style: none; font-family: 'NotoSansCJKjp-ip'; font-weight: 500;/*Medium*/ font-size:1.4rem;/*-->1.6rem@768*/ font-size:calc(12px + (14 - 12) * (100vw - 480px) / (1400 - 480));/*-->15px + (16 - 15)@768*/ margin:0 auto; margin-bottom:0; text-align:center; /*border:1px solid yellow;*/ } .menu li {/* YOC<->toggle ver. --------------------------YOC/Toggle */ position: relative;/*constraint child-ul*/ display:inline-block;/*--->block@768 */ color: #fff; text-align: left; vertical-align:middle;/*<--top*/ padding: 1em 0;/*<--0.6em 0*/ /*border:1px solid pink;*/ } .menu li:nth-of-type(2),/* LineUp YOC */ .menu li:nth-of-type(3){/* About */ padding-right:2em;/*-->0@768*/ } .menu li.menu-logo{/*ageofgloryLOGO in PCmenuOBI YOC hide@768*/ width:25%; margin-right:3em; } /*.menu li.toggle-sub-about a,About NotInUSE*/ .menu li.toggle-sub-ecshop a {/*ECshop*/ display: block; } /*.menu li.toggle-sub-about > ul,2nd levelMENU-About NotInUSE*/ .menu li.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;/*40px@initial-->auto@768(to null)*/ height:0; opacity: 0; padding-left:0.5em;/*ADDED 3.9*/ padding-bottom:0.5em; border-radius: 0 0 3px 3px; } /*.menu li.toggle-sub-about > ul li, 2nd levelMENU-About YOC NotInUSE*/ .menu li.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 ; } /*.menu li.toggle-sub-about:hover > ul, 2nd levelMENU-About NotInUSE*/ .menu li.toggle-sub-ecshop:hover > ul{/*2nd levelMENU-ECshop*/ /*display:block;<--none*/ width:150%;/*<--150%*/ height:auto; margin:0;/*<--0 0 0 0.5em*/ font-family: -apple-system, BlinkMacSystemFont,'Helvetica Neue', Helvetica, Arial,'ƒqƒ‰ƒMƒmŠpƒS ProN W3','Hiragino Kaku Gothic ProN',Meiryo, sans-serif; /*overwrite*/ font-weight: normal; /*overwrite*/ font-size:0.9em; /*size refers to .menu*/ opacity: 1;/*<--0*/ top: 100%;/*100%or40px@initial-->auto@768(null)*/ background-color:#b2a36f; /*Gold #b2a36f (178,163,111)*/ /*border:1px solid yellow;*/ } /*.menu li.toggle-sub-about:hover > ul{ 2nd levelMENU-About NotInUSE width:100%; overwrite<--150% }*/ /*.menu li.toggle-sub-about:hover > ul li, 2nd levelMENU-About YOC NotInUSE*/ .menu li.toggle-sub-ecshop:hover > ul li{/*2nd levelMENU-ECshop YOC*/ /*display:block;<--none*/ height: 30px; overflow: visible; padding: 0; } /*.menu li.toggle-sub-about ul li a, 2nd levelMENU-About YOC NotInUSE*/ .menu li.toggle-sub-ecshop ul li a {/*2nd levelMENU-ECshop YOC*/ padding: 8px 15px; } /*.menu li.toggle-sub-about:hover > a, 2nd levelMENU-About YOC NotInUSE*/ .menu li.toggle-sub-ecshop:hover > a {/*2nd levelMENU-ECshop YOC*/ color:#696969; /* dimgray (105,105,105) KEEP */ } /*.menu li.toggle-sub-about > ul li:last-child a, 2nd levelMENU-About YOC NotInUSE*/ .menu li.toggle-sub-ecshop > ul li:last-child a{/*2nd levelMENU-ECshop YOC*/ /*border-radius: 0 0 3px 3px;*/ } }/*-- /end of yocMenu specific@769+ --*/ /*::::::::::::::::::::::: :::: BASE CONTAINER :::: :::::::::::::::::::::::::*/ .header{/*for
width100%*/ } .main{/*for
width100%*/ background-color:#fff; } .aside{/*for