/*------- BiancoInternational ---------02_home202206_email-encrypt Ver.
Theme color:
BCblack  #1a1a1a (26,26,26)
Bianco Beige  #e6b366  (230,179,102) tooHADAIRO? / AOG #b2a36f(178,163,111)
HoverGray  #808080 (128,128,128) <---#666 (102,102,102)
HighlightGray #b2b2b2 (178,178,178) K30%
Warning Red  #ff0033;  (255,0,51)
*********************************
GoogleFont: Noto Serif JP - 2018- can load fast enough from google, noSubset Needed
---------------------------*/
html{
font-size: 62.5%; /* root size = browserDefault16px x 62.5% = 10px */
/*position:relative; for #mid to be CenterMiddle  ADDED @PORTRAIT styles
height:100%; for #mid to be CenterMiddle  ADDED @PORTRAIT styles*/
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family:'Noto Serif JP',serif;
font-weight: 400;/*400=regular, 600=semibold*/
font-size:2em;/*<--1.7em*/
font-size:calc(16px + (20 - 16) * (100vw - 480px) / (1400 - 480));
line-height:1.5;
/*letter-spacing:0.03em;0.03em*/
font-kerning: normal;/*for alphabet*/
word-wrap:break-word; /* so long word won't exceed container */
color: #1a1a1a; /* (26 26 26) */
background-color:rgba(178,163,111,0.7);/*Bianco Beige  #e6b366  (230,179,102) / AOG #b2a36f(178,163,111)*/
opacity: 1;/*fadeIn effect by abeautifulsite.net - if JSenabled*/
transition: 1s opacity;
}
body.fade-out { /*fadeIn effect by abeautifulsite.net - if JSenabled*/
opacity: 0;
transition: none;
}

/* Default link */
a{ 
color:inherit; /*inherit parent*/
text-decoration:none;
background-color:transparent;
-webkit-tap-highlight-color: rgba(178,178,178,0.6); /*HighlightGray  #b2b2b2 (178,178,178) ,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:#808080  ; /*HoverGray (128,128,128)*/
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;
}
/*NOTinUSE .no-hi-light a{ set with js.mobile_touch if don't want to apply -webkit-tap-highlight-color#71 
color:inherit;
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
pointer-events: none;   disable link
cursor: default;
transition: all .2s ease-in-out;
}*/
.c{/*quick centerClass*/
text-align:center;
}
.b{/*quick BoldClass*/
font-weight:600;/*SemiBold(600)*/
}

/* ---------------------------------------------------------
   iconFONT
   ---------------------------------------------------------*/
@font-face {/*'>',mail,Magnifying glass,tag,pdf icon - PMJ*/
font-family: 'icomoon-p';
src: url('../lib/icomoon-p.woff?ver=20190303') format('woff');/*path from css file*/
font-weight: normal;
font-style: normal;
}
[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";/*'v' downArrow */}
.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";/*'>' rightArrow */}
.icop-chevron-thin-right:before {content: "\e906";}
.icop-chevron-up-r:before {content: "\e908";/* '^' upArrow */}
.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
   ---------------------------------------------------------*/
/*---SVGcontainer ---*/
.bianco-logo-wrap{/* decide position, size for .bianco-logo-box - headerLOGO*/
display:block;
vertical-align:middle;
margin:0 auto;/* KEEP 0 auto*/
padding:0;/* KEEP 0 or Don'tUSE ---asItCausesPositionShift on mobileJIKKI*/
font-size:0;/*to erase space around .bianco-logo-box*/
width:60%;
max-width:270px;/*<--380px*/
min-width:140px;
/*border:1px solid #dcdcdc; 220,220,220*/
}
.bianco-logo-wrap a:hover{ /*headerLOGO */
opacity: 0.7;
}
/*--- SVGlogo ---*/
.bianco-logo-box{
position: relative;
width:100%;
height: 0;
padding-bottom:67.6%;/* aspectRatio h142/w210*100 */
vertical-align: top; 
filter: drop-shadow(5px 5px 2px rgba(105,105,105,0.3));
-webkit-filter:drop-shadow(5px 5px 2px rgba(105,105,105,0.3));
-moz-filter:drop-shadow(5px 5px 2px rgbargba(105,105,105,0.3));
-o-filter:drop-shadow(5px 5px 2px rgbargba(105,105,105,0.3));
}
/*--------- SVG COLOR&Effect ---------*/
.efflogo-bianco-bl,/* Bianco black*/
.efflogo-bianco-w{/*Bianco white*/
position: absolute;
width:100%;
height:100%;
top: 0;
left: 0;
/*DONOT apply filter to svg --> apply to parent .bianco-logo-box*/
}
.efflogo-bianco-bl{/* Bianco black*/
fill: #1a1a1a;
}
.efflogo-bianco-w{/*Bianco white footer*/
fill: #fff;
}
.efflogo-bianco-bl:hover, /*svg linkEFFECT on:hover*/
.efflogo-bianco-w:hover {
opacity: 0.7;
}


/* ---------------------------------------------------------
   INITIAL
   ---------------------------------------------------------*/
#wrap{/*waku with shadow*/
width:90%;/*vw works better than % if contained by #mid overwrite@PORTRAIT styles*/
max-width:1400px;
margin:3em auto; /*top/bottom ONLY as width will take care of L/R*/
margin-bottom:0.7em;/*<--1em*/
padding:1em;
background-color:#fff;
box-shadow: 2px 3px 10px rgba(0,0,0,0.3);
border-radius:5px;
/*border:1px solid pink;*/
}
header, main{
width:80%;
max-width:790px;/*same as biancoSVG*/
margin:0 auto;
/*border:1px solid pink;*/
}
header{
margin-top:5em;/*control marginTop from #wrap*/
/*border:1px solid pink;*/
}
main{
margin-bottom:4em;
/*border:1px solid green;*/
}
aside{/*Client LogIn BTN in toppage*/
text-align:right;
font-size:0.85em;/*<--0.75em*/
line-height:1;
/*border:1px solid cyan;*/
}
footer{
width:90%;/*vw works better than % if contained by #mid overwite@PORTRAIT styles*/
max-width:1400px;
margin:0 auto; /*top/bottom ONLY as width will take care of L/R*/
margin-bottom:1.5em;
font-size:0.6em;
}

.headlines{ /*L/R border*/
overflow: hidden;
text-align: center;
}
.headlines > .inl{/*.inl=inline*/
position: relative;
display: inline-block;
font-size:1.7em;
}
body.sub.tp .headlines > .inl{/*.tp=term&privacy*/
font-size:1.3em;/*<--1.7em@initial*/
}
.headlines > .inl:before, .headlines > .inl:after{
content: '';
position: absolute;
top: 50%;
border-bottom: 1px solid #b2b2b2;/* (178,178,178) K30% */
width: 100vw;
margin: 0 5px;
}
.headlines > .inl:before{
right: 100%;
}
.headlines > .inl:after{
left: 100%;
}

.desc{/*toppage main<p> textbox*/
margin:3em 0 1em 0;
padding:3em 2em 0.7em 2em;/*<--left-align:3em 0.7em 3em 2em*/
border-top:1px solid #b2b2b2;
/*border-bottom:1px solid #b2b2b2;
border:1px solid cyan;*/
}
.git-enq{ /*email container for contact@*/
font-size:0.85em;
margin-bottom:8em;/*control marginBottom from #wrap*/
}
.git-enq p{/*subTXT*/
font-size:0.8em;/*<--0.75em*/
}
/*NoNEED for 02_home202206_email-encrypt Version
.git-enq img{img of enquiries@ show when noJS 
 width:20em; 28letter-alpha 
 width:24em; 32letters-alpha
height:1.2em;
}*/
a .gitm, a:visited .gitm{/*email to be echoed by JS*/
color:#808080 ; /*gray (128,128,128)*/
}
a:hover .gitm, a:active .gitm{
color:#1a1a1a; /*(26 26 26)*/
}
.copyright{/*ul inside <footer>*/
list-style:none;
}
.copyright li{
display:inline-block;
vertical-align:top;
padding:0 0.3em;
}
.copyright li:nth-child(1){
width:69%;
text-align:left;
}
.copyright li:nth-child(2){
width:30%;
text-align:right;
}

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

/* ---------------------------------------------------------
   SUBPAGE overwrite
   ---------------------------------------------------------*/
/*--- SVG ---*/
body.sub .bianco-logo-wrap,/*if not Toppage*/
body.erp .bianco-logo-wrap{/*.erp = error page*/
/*width:60%;<--60%@initial
max-width:270px;<--270px@initial
min-width:140px;*/
}
body.sub header,
body.erp header{/*.erp = error page*/
margin-top:2em;/*<--5em@initial*/
/*border:1px solid pink;*/
}
body.sub main,
body.erp main{/*.erp = error page*/
margin-top:1em;/* ADDED*/
margin-bottom:4em;/*<--4em@initial*/
/*border:1px solid green;*/
}
body.sub .headlines > .inl,/*.inl=inline*/
body.erp .headlines > .inl{/*.erp = error page*/
font-size:1.4em;/* ADDED*/
}
body.sub .subtxt,/*txt below L/R border*/
body.erp .subtxt{/*.erp = error page*/
text-align:center;
font-size:0.85em;/* ADDED*/
}
body.sub .desc,/*<div><--<p>*/
body.erp .desc{/*.erp = error page*/
margin:0 0 4em 0;/*<--3em 0 1em 0@initial*/
padding:1.5em 2em 3em 2em;/*<--3em 2em 0.7em 2em@initial*/
border-top:none;/*<--1px solid #b2b2b2@initialforHOME*/
border-bottom:1px solid #b2b2b2;/*ADDED*/
}
body.sub .desc form{/*<form>*/
margin:0 auto;
width:25em;
/*border:1px solid pink;*/
}
/*button,input - font-family is altered in normalize.css#247 */
.formset input{/*enter field for Username, Password*/
margin:0;/*0 0 0.5em 0*/
width:100%;
padding:0.5em 0.2em;
background:rgba(220,220,220,0.5);
border:1px solid #dcdcdc;/*(220,220,220)*/
border-radius: 0.2em;
}
.formset input:focus, .formset input:active{
border:1px solid #b2b2b2;/*(178,178,178)*/
outline: none;
}
.bcbtn{/*contain submitBTN*/
font-size:0.85em;
text-align:center;
}
.error{/*errorTXT inLoginPage*/
margin:1em 0 2em 0;
color:#ff0033; /*red (255,0,51)*/
text-align:center;
font-size:0.8em;/*biancoADDED*/
}
.bcbtn input{/*submitBTN*/
padding:0.5em 1em;
background:rgba(0,0,0,0);
border:1px solid #808080;/*(128,128,128)*/
border-radius: 0.2em;
color:#1a1a1a !important;/*(26,262,26)*/
-webkit-appearance: none;
}
.bcbtn input:hover{/*submitBTN*/
background:rgba(220,220,220,0.7);/*#dcdcdc*/
}
.bcbtn input:focus, .bcbtn input:active{
border:1px solid #1a1a1a;/*(26,262,26)*/
outline: none;
}
.formset.hide, .error.hide{
visibility:hidden;
}
/*---Terms & Privacy --*/
body.sub.tp header, body.sub.tp main{/*.tp=term&privacy*/
width:90%;/*<--80%@header, main@initial*/
max-width:initial;/*<--790px@header, main initial*/
margin-bottom:0 !important;/*need !important to overwrite 4em@body.sub main<--4em@initial*/
}
body.sub.tp header{/*.tp=term&privacy*/
max-width:240px;/*<--initial<--790px@header initial*/
/*margin-top:2em;ADDED*/
margin-bottom:1em !important;/*<--0 !important<--4em@body.sub main<--4em@initial*/
}
body.sub.tp main .desc{
margin-bottom:4em;/*<--4em@initial*/
padding:1em 0 2em 0;/*<--1.5em 2em 3em 2em@body.sub .desc<--3em 2em 0.7em 2em@initial*/
text-align:center;/*to center #terms, #privacy */
}
body.sub.tp main .subtxt{/*reUsed for BTMtxt<--txt below L/R border*/
margin:0 auto;/*ADDED*/
margin-top:3em;/*ADDED*/
width:90%;/*ADDED*/
font-size:0.7em;/*<--0.85em@body.sub .subtxt*/
}
#terms, #privacy{
display:inline-block;
width:48%;
margin:0 ;
padding:0 1em;
text-align:left;/*back to default */
vertical-align:top;
/*border:1px solid pink;*/
}
#terms h3, #privacy h3{/*sectionTitle*/
font-size:0.9em;
text-align:center;
}
#terms h4, #privacy h4{/*each paragraphTitle*/
margin:0.7em 0 0 0;
font-size:0.65em;/*same as #terms div, #privacy div*/
font-weight:600;/*semiBold*/
}
#terms div, #privacy div{/*generalTXT*/
margin:0 0 0.3em 0;
font-size:0.65em;
}
#terms ul, #privacy ul{
padding-left: 2em;
}
#terms div img,/*img of enquiries@ OR DataProtection@ show when noJS*/
#privacy div img{
height:1.4em;/*<--.git-enq:1.2em*/
}
/*---ERRORpages---Additional attribute*/
body.erp .desc{/*.erp(=error page)  addTo body.erp .desc@#398*/
text-align:center;
}
body.erp .desc p{
font-size:0.85em;
}
body.erp .desc p:first-child{/* first <p> with bigger TXT*/
font-size:1.2em;
/*margin-bottom:0.5em;biggerAKI*/
}
body.erp .desc p:last-child{/* 3rd <p> with smallerTXT*/
margin:0.8em 0;/*controlTopBtmAKI*/
}



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

}/*end of @1401px*/



/* ---------------------------------------------------------
  TABLET styles 
   ---------------------------------------------------------*/
@media (max-width: 768px) {
body.sub .desc form{/*<form>*/
width:100%;/*<--25em@initial*/
}
}/*end of @media768px */



/* ---------------------------------------------------------
  PORTRAIT styles  ONLY if using #mid
   ---------------------------------------------------------*/
@media (min-width: 481px) and (orientation: portrait) {

html{
position:relative; /*for #mid to be CenterMiddle*/
height:100%; /*for #mid to be CenterMiddle*/
}
#mid{
position: absolute;
bottom: 52%;/*to bringUp slightly<--50%*/
right: 50%;
transform:translate(50%, 50%);
/*border:1px solid yellow;*/
}
#mid #wrap, #mid footer{
width:90vw; /*vw<--90%@initial*/
}

}/*end of @481 portrait*/


/* ---------------------------------------------------------
  SMARTPHONE styles 
   ---------------------------------------------------------*/
@media (max-width: 480px) {

body{
font-size:3em;/*<--1.7em@initial*/
font-size:calc(18px + (30 - 18) * (100vw - 480px) / (1400 - 480));/*<--16px + (20 - 16)@initial*/
}
.bianco-logo-wrap{
/*padding:1rem 0;<--KEEP 0 or DonotUSE@initial*/
}
/*--- SVG ---*/
body.sub .bianco-logo-wrap,/*if not Toppage*/
body.erp .bianco-logo-wrap{/*.erp = error page*/
/*width:60%;<--60%@initial*/
/*max-width:270px;<--270px@initial*/
min-width:100px;/*<--140px@initial*/
}
/*--- SVGlogo ---*/
body.sub .bianco-logo-box,
body.erp .bianco-logo-box{
filter: drop-shadow(3px 3px 2px rgba(105,105,105,0.3));	/*<---5px 5px 2px@initial*/
-webkit-filter:drop-shadow(3px 3px 2px rgba(105,105,105,0.3));
-moz-filter:drop-shadow(3px 3px 2px rgbargba(105,105,105,0.3));
-o-filter:drop-shadow(2px 2px 2px rgbargba(105,105,105,0.3));
}
header, main{
width:90%;/*<--80%@initial*/
}
header{
width:60%;/*<--90%<--80%@initial*/
margin-top:2em;/*<--5em@initial*/
}
main{
margin-bottom:2em;/*<--4em@initial*/
}
body.sub main,
body.erp main{
margin-top:1em;/* <--1em@initial*/
margin-bottom:2em;/*<--4em@initial*/
}
footer{
font-size:0.7em;/*<--0.6em@initial*/
}

.desc{/*toppage main<p> textbox*/
margin:2em 0 0 0;/*<--3em 0 1em 0*/
padding:2em 0;/*<--3em 2em 0.7em 2em@initial*/
}
.git-enq{ /*email container for contact@*/
font-size:1em;/*<--0.85em@initial*/
margin-bottom:3em;/*<--8em@initial  control marginBottom from #wrap*/
}
.copyright li{
display:block;/*<--inline-block@initial*/
}
.copyright li:nth-child(1), .copyright li:nth-child(2){
width:100%;/*<--69%, 30%@initial*/
text-align:center;/*<--left, right@initial*/
}
/* -----------SUBPAGE overwrite---------------*/
body.sub .desc,/*<div><--<p>*/
body.erp .desc{
margin-bottom:0;/*<--4em@initial*/
padding:1em 0 2em 0;/*<--2em 2em 4em 2em@initial*/
border-bottom:1px solid #b2b2b2;
}
/*body.sub .desc form{<form> MOVED to @768
margin:0 auto;
width:100%; <--25em@initial 
}*/
.error{/*LoginPage errorTXT*/
margin:0 0 1em 0;/*<--1em 0 2em 0@initial*/
}
/*---Terms & Privacy --*/
body.sub.tp .headlines > .inl{/*.tp=term&privacy*/
font-size:1.4em;/*<--1.3em@initial*/
}
body.sub.tp main .desc{
padding:2em 0 2em 0;/*<--2em 0 4em 0<--2em 2em 4em 2em@body.sub .desc<--1em 0.7em 4em 2em@initial*/
}
#privacy, #terms{
display:block;/*<--inline-block@initial*/
width:100%;/*<--47%@initial*/
margin:0;/*<--0 0.5em@initial*/
padding:0;/*<--0 1em@initial*/
}
#terms{
margin-top:2em;/*ADDED*/
}
#terms h3, #privacy h3{/*sectionTitle*/
font-size:1.2em;/*<--0.9em@initial*/
}
#terms h4, #privacy h4{/*each paragraphTitle same as #terms div, #privacy div */
font-size:0.9em;/*<--0.65em@initial*/
}
#terms div, #privacy div{/*generalTXT*/
font-size:0.9em;/*<--0.65em@initial*/
}
body.sub.tp main .subtxt{/*reUsed for BTMtxt<--subtxt below L/R border*/
width:100%;/*<--90%@initial*/
text-align:left;
font-size:0.9em;/*<--0.7em@initial*/
}

}/*end of @media480px */