/* ------------------------flexVer.(Fallback:table,table-cell)-------------------- HTML5 - style ThemeColor forsythia-black(logo) #4b4b4b 75/75/75 forsythia-black(txt) #333333 51/51/51 darkgray #a9a9a9 169/169/169 //a:hover parrot green #37a34a 55/163/74 //.update ---------------------------------------------------------*/ html{ /* define root size and use px(IE8&partof10,11)/rem(new browser) for all the other font-size */ font-size: 62.5%; /* root size = browserDefault16px x 62.5% = 10px */ } *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body {/*EN*/ color: #333333;/*forsythia-black(txt) 51/51/51*/ font-family: 游明朝, 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', HGS明朝E, メイリオ, Meiryo, serif; font-kerning: normal; letter-spacing: 0.04em; /*word-spacing: -0.1em; control space between words */ word-wrap: break-word;/*so long english won't exceed container*/ line-height: 1.5; opacity: 1;/*fadeIn effect by abeautifulsite.net*/ transition: 1s opacity; } body.fade-out {/*fadeIn effect by abeautifulsite.net*/ opacity: 0; transition: none; } body.ja{/*JA*/ letter-spacing: 0.01em; } /* Default link */ a{ color:inherit; /*inherit parent*/ text-decoration:none; background-color:transparent; -webkit-tap-highlight-color: rgba(105,105,105,0.2); /*dimgray #696969 hide 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:#a9a9a9; /*darkgray 169/169/169*/ 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; } .no-hi-light a{ /*set with js mobile_touch*/ 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; } .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 */ pointer-events: none; /* disable link */ cursor: default; transition: all .2s ease-in-out; } .cf { /*clearfix*/ margin:0; zoom: 1; } .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; } .b{ font-weight:bold; } /* --------------------------------------------------------- FONT ---------------------------------------------------------*/ @font-face {/*mail,Magnifying glass,tag,pdf icon*/ font-family: 'icomoon-p'; src: url('/font/icomoon-p.woff?ver=20190303') format('woff'); font-weight: normal; font-style: normal; } /*:::::::::::::::::::::::::::::::::::::::::: :: iconFont - icomoon(pmj) 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";/* 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";} .icop-chevron-thin-right:before {content: "\e906";/* menu '>' right */} .icop-chevron-up-r:before {content: "\e908";/* '^' 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";} /* --------------------------------------------------------- SVG ---------------------------------------------------------*/ /*--------- SVG container -------*/ .logo-wrap{/* decide position, size for .logo-box - headerLOGO*/ display:block; width:100%; max-width:270px; min-width:140px; vertical-align:middle; /*margin:0 auto; KEEP 0 auto*/ font-size:0;/*to erase space around*/ } .logo-wrap a:hover{ opacity: 0.5; } /*--------- SVG Element ---------*/ .logo-box{/*#svg-profusion-of-flowers-g*/ position: relative; width:100%; padding-bottom:15.27%;/* aspectRatop 15.27%=40/262*100 */ } /*--------- SVG COLOR&Effect ---------*/ .efflogo{/*Profusion of Flowers*/ position: absolute; width:100%; height:100%; top: 0; left: 0; fill: #4b4b4b;/*forsythia-black(logo) 75/75/75*/ /*filter: drop-shadow(5px 7px 2px rgba(105,105,105,0.3)); DONOT apply direct to svg --> apply to parent .logo-box*/ } .efflogo-br{/*only for Toppage*/ display:none;/*default Hidden for all page - show only when Toppage@animate_top-slide.css*/ } /*--------end of SVG----------*/ /**** common.js/backtoTopBTN ****/ #fixedTop {/*BTN auto-made by backtotop_btn.js 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-color: rgba(75, 75, 75, 0.9); /*#4b4b4b 75/75/75 */ position: fixed; z-index: 4;/*<--9999 CHANGED bring below #modal-content=6,#modal-overlay=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 ::::::::: :::::::::::::::::::::::::*/ .logo-g{/*contain SVGlogo & subtitle*/ margin-bottom:2em; } .logo-sub-en{/*EN*/ font-size: 0.8em;/*refer to .header*/ } .logo-sub-ja{/*JPN*/ font-size: 0.7em;/*refer to .header*/ } .menu-trigger-box{/*ADDED bg to .menu-trigger 10.10*/ display: none;/*-->block@768 */ } nav {/* TAT<->toggle common*/ width: 100%; height: auto; padding-top: 0;/*0@initial-->80px@768)*/ padding-left:0;/*0@initial-->20%@768*/ position: relative;/*other than static@initial-->fixed@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]*/ /*border:1px solid red;*/ } .menu {/*ul 1st levelMENU TAT<->toggle ver. --------------------------TAT/Toggle */ list-style: none; /*border:1px solid yellow;*/ } .menu li {/* TAT<->toggle ver. --------------------------TAT/Toggle */ display:block;/*--->block@768 */ padding: 0.7em 0; /*border:1px solid pink;*/ } .update{/*span basic property for allPages - includeTopPage*/ padding-left:0.5em; font-size:0.8em; /*Animation defined@animate_top-slide.css for Toppage --> nullAnime&defineColor@animate_top-slide.css@768*/ /*color:#37a34a ;parrot green 55/163/74 to be defined for OtherPages below*/ } .menu li > ul{/*2nd levelMENU-Works*/ margin-top:0.4em; font-size:0.85em; /*border:1px solid yellow;*/ } .menu li > ul li{/*2nd levelMENU*/ padding: 0.3em 0; } .menu li > ul li span{/*JA wa in ENmenu*/ font-size:0.9em; } .menu li > ul li span.icop-chevron-thin-right{/*icomoon-p '>'*/ font-size:0.7em; } .menu li ul li a {/*2nd levelMENU-Works*/ /*padding: 8px 15px;*/ } /*-- emphasize current menu --*/ body.greetings .menu li.greetings a, body.profile .menu li.profile a, body.wa .menu li > ul li.wa a, body.awakening .menu li > ul li.awakening a, body.merriment .menu li > ul li.merriment a, body.nostalgia .menu li > ul li.nostalgia a, body.serene .menu li > ul li.serene a, body.festivals .menu li > ul li.festivals a, body.archive .menu li > ul li#archive a{ border-bottom: 1px dotted; display:inline ;/*to keep line close to letter*/ line-height: 100%;/*to keep line close to letter*/ text-decoration: none; } body.greetings .update,/*span define color for OtherPages - excludeToppage, base definedABOVE*/ body.profile .update, body.works .update{ color:#37a34a ;/*parrot green 55/163/74*/ } /*--- Language SwitchBTN ---*/ .langbtn{/*.menu li - languageSwitchBTN*/ margin-top:3rem; margin-bottom:5rem; font-size:0; } .langbtn ul{ list-style:none; /*font-size:0;*/ text-align:left; /*margin-left: auto;center@480*/ /*margin-right: auto;center@480*/ max-width:20rem;/*12rem*/ } .langbtn ul li{ display:inline-block; width:48%; min-width:5em;/*<--4em*/ margin:0; font-size: 1.2rem; font-size:calc(11px + (12 - 11) * (100vw - 480px) / (1400 - 480));/*calc([min] + ([max] - [min]) * ((100vw - [min]) / ([max] - [min])));*/ text-align:center; } .langbtn ul li.lang-ja{/* JA*/ border-left: 2px solid transparent; /* devide EN/JA */ } .langbtn ul li.lang-en a,/* EN*/ .langbtn ul li.lang-ja a{/* JA*/ display:block; padding:0.4em 0.8em ; border-radius: 3px 0 0 3px; /* Ltop-Rtop-Rbtm-Lbtm */ background-color: rgba(169, 169, 169, 0.2); /*#a9a9a9*/ } .langbtn ul li.lang-ja a{/* JA ovrewrite*/ border-radius: 0 3px 3px 0; /* Ltop-Rtop-Rbtm-Lbtm */ } .langbtn ul li.lang-en a:hover,/* EN*/ .langbtn ul li.lang-ja a:hover{/* JA*/ /*color:#1a1a1a;forsythia-black 26/26/26*/ background-color: rgba(169, 169, 169, 0.4);/*#a9a9a9*/ } .lang-selected a, .lang-selected a:hover{ /*color:#1a1a1a !important;forsythia-black 26/26/26*/ background-color: rgba(169, 169, 169, 0.4) !important; /*#a9a9a9*/ } /*:::::Archive PullDown 2020.6:::::*/ .menu li > ul li#archive{/* 2nd levelMENU [Archive1stLevel] */ padding: 1.5em 0;/*<--0.3em 0@initial*/ } .menu li > ul li#archive > a + ul {/* [Archive2ndLevel] Feb.2020 */ /*display: none; don't need this as long as this menu is only without hrefDestination */ list-style: none; top: 100%; left:0.5em; height:0; opacity: 0; /*-webkit-transition: height .1s ease; height is notInEffect??-->all makes weired animation so not using -moz-transition: height .1s ease ; transition: height .1s ease ;*/ } .menu li > ul li#archive > a + ul li {/* [Archive2ndLevel] Feb.2020 */ padding:0.1em 0;/*<--0.3em 0@initial*/ } .menu li > ul li#archive.open > a + ul { /*display: block; don't need as long as [.menu li > ul li.archive > a + ul] is not using display: none*/ width:8em; height:auto;/*change to number for transition to work<--auto*/ margin-left:1em; font-size:0.95em; /*<--0.9em size refers to .menu*/ opacity: 1;/*<--0*/ /*top: 100%;*/ /*background-color:#f5f5f5;T ul li#archive > ul > li > a + ul {/*[Archive3rdLevel] part1..*/ /*display:none; so that THIS wont interfere with parent[Feb.2020] OR use pointer-events*/ pointer-events: none;/*so that THIS wont interfere with parent[Feb.2020]*/ list-style: none; top: 100%; left:0.5em; height:0; opacity: 0; -webkit-transition: all .1s ease ; -moz-transition: all .1s ease ; transition: all .1s ease ; } .menu li > ul li#archive > ul > li.open > a + ul { /*display: block; to show[part1..] if none is used above*/ pointer-events: auto;/*putBack clickFunction*/ width:8em; height:auto;/*change to number for transition to work<--auto*/ margin:0;/*<--0 0 0 0.5em*/ font-size:0.95em; opacity: 1;/*<--0*/ /*top: 100%;*/ /*background-color:#f5f5f5;T ul li#archive > ul > li.open > a + ul li{/*4th levelMENU :hover part1...*/ padding:0.3em 0;/*back to defaultStyle<--#404 0.1em 0<--0.3em 0@initial*/ } .menu li > ul li#archive > ul > li.open > a + ul li:last-child{/*4th levelMENU :hover part1... .open is to be add/takenOff by JS*/ margin-bottom:0.5em; } .menu li > ul li#archive > ul > li > a, .menu li > ul li#archive > ul > li > a + ul li a {/*null #337 body.archive .menu li > ul li.archive a*/ border-bottom: none !important;/* overwrite erase dotline from child<--1px dotted@#337*/ } /*:::::::::::::::::: :::: CONTAINER :::: ::::::::::::::::::::*/ .container{/*wrap everything - Common*/ /*will overwrite in animate_top-slide.css when Toppage*/ margin:0 auto;/*DO NOT change*/ margin-top:3em; padding:0;/*DO NOT change*/ width:90%; max-width:1400px; /*border:1px solid pink;*/ } .header{ position: sticky;/*-->relative@768*/ top:6rem;/*so not to move with scroll<--3+3=margin-top@.container and self-->auto@768 to null*/ display:inline-block; width:29%; margin-top:3rem; vertical-align:top; font-size:1.5em;/*refer to body*/ z-index:10;/*<--10---to bring in front*/ } .main{/*css for photoGallery width100%*/ display:inline-block; width:70%; margin-top:3rem; vertical-align:top; margin-bottom:4em; font-size:1.5em;/*refer to body*/ } .footer{/*css for