/* ========================================
   NEMO Registration Form Styles
   モダンでスタイリッシュな登録フォームデザイン
   ======================================== */

   @import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Londrina+Sketch&family=Overpass:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Yuji+Mai&display=swap');

   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, font, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   dl, dt, dd, ul, li,ol,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td{
       border: 0;
       font-family: inherit;
       font-size: 100%;
       font-style: inherit;
       font-style: inherit;
       font-weight: inherit;
       margin: 0;
       outline: 0;
       padding: 0;
       vertical-align: baseline;
       list-style:none;
       text-decoration:none;
   }
   *, *:before, *:after {
       -webkit-box-sizing: border-box;
            -o-box-sizing: border-box;
           -ms-box-sizing: border-box;
               box-sizing: border-box;
   }
   p,a,h1,h2,h3,h4,h5{color:black}
   p{line-height:150%}
   
   header{
       position: fixed;
       z-index:10;
       top:0;
       left:0;
       padding:30px;
       display:flex;
       justify-content: space-between;
       align-items: center;
       width:100%;
   }
   
   header .logo img{
       width:200px;
   }
   
   html.page-id-21 {
       position: relative;
       min-height: 100%;
       height: 100%;
   }
   
   html.page-id-21::before {
       content: '';
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
       z-index: -1;
       pointer-events: none;
   }
   #nemoLogin .formBody{
       width: 400px;
       min-height: 100vh;
       background: white;
       text-align:center;
       position: relative;
   }
   #nemoLogin .formBody .inner{
       position: absolute;
       top:50%;
       left:50%;
       transform: translate(-50%, -50%);
       width:100%;
       text-align:center;
   }
   #nemoLogin footer{
       position: absolute;
       bottom:30px;
       width:100%;
       text-align:center;
       font-size:12px;
   }
   #nemoLogin .messageBox{
       margin: 20px 0 0 0;
       font-size: 13px;
       color: #942323;
   }
   .gsi-material-button {
       background-color: WHITE;
       background-image: none;
       border: 1px solid #747775;
       -webkit-border-radius: 20px;
       border-radius: 20px;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
       color: #1f1f1f;
       cursor: pointer;
       font-family: 'Roboto', arial, sans-serif;
       font-size: 14px;
       height: 40px;
       letter-spacing: 0.25px;
       outline: none;
       overflow: hidden;
       padding: 0 12px;
       position: relative;
       text-align: center;
       -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
       transition: background-color .218s, border-color .218s, box-shadow .218s;
       vertical-align: middle;
       white-space: nowrap;
       width: auto;
       max-width: 400px;
       min-width: min-content;
     }
     
     .gsi-material-button .gsi-material-button-icon {
       height: 20px;
       margin-right: 10px;
       min-width: 20px;
       width: 20px;
     }
     
     .gsi-material-button .gsi-material-button-content-wrapper {
       -webkit-align-items: center;
       align-items: center;
       display: flex;
       -webkit-flex-direction: row;
       flex-direction: row;
       -webkit-flex-wrap: nowrap;
       flex-wrap: nowrap;
       height: 100%;
       justify-content: space-between;
       position: relative;
       width: 100%;
     }
     
     .gsi-material-button .gsi-material-button-contents {
       -webkit-flex-grow: 1;
       flex-grow: 1;
       font-family: 'Roboto', arial, sans-serif;
       font-weight: 500;
       overflow: hidden;
       text-overflow: ellipsis;
       vertical-align: top;
     }
     
     .gsi-material-button .gsi-material-button-state {
       -webkit-transition: opacity .218s;
       transition: opacity .218s;
       bottom: 0;
       left: 0;
       opacity: 0;
       position: absolute;
       right: 0;
       top: 0;
     }
     
     .gsi-material-button:disabled {
       cursor: default;
       background-color: #ffffff61;
       border-color: #1f1f1f1f;
     }
     
     .gsi-material-button:disabled .gsi-material-button-contents {
       opacity: 38%;
     }
     
     .gsi-material-button:disabled .gsi-material-button-icon {
       opacity: 38%;
     }
     
     .gsi-material-button:not(:disabled):active .gsi-material-button-state, 
     .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
       background-color: #303030;
       opacity: 12%;
     }
     
     .gsi-material-button:not(:disabled):hover {
       -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
       box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
     }
     
     .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
       background-color: #303030;
       opacity: 8%;
     }