@charset "UTF-8";



/* ------------------------------------------

  top

------------------------------------------ */
/* top
-----------------------------------------------------------  */

/* PC タブレット用スタイル */
@media (min-width: 768px) {

/* link move
----------------------------------------------------------- */
.head .btn a,
.newsList .newsListInner .news a,
.bn4 .bn4item a,
.bn2 .bn2item a,
.btn a,
.btn2 a
  {
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  cursor: pointer;
  }

.head .btn a:hover,
.newsList .newsListInner .news a:hover,
.bn4 .bn4item a:hover,
.bn2 .bn2item a:hover,
.btn a:hover,
.btn2 a:hover
  {
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  }
  
/* width
-----------------------------------------------------------  */
.inner      { margin: 0 auto 0px; max-width: 1110px; padding: 130px 0; }
.bn4        { margin: 0 auto 0px; max-width: 1220px;}
.bn2        { margin: 0 auto 0px; max-width: 1220px; }

/* contents
-----------------------------------------------------------  */
#mv { position: relative; z-index: 0;}
#mv:after { content: '';
    display: block;
    width: 239px;
    height: 239px;
    background: url(../../img/union/under@2x.png) no-repeat;
    position: absolute;
    top: -40px;
    right: -197px;
    background-size: 35%; }

.newsList {}
.newsList .newsListInner {margin-bottom: 90px;}
.newsList .newsListInner .news { padding: 35px 0px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; }
.newsList .newsListInner .news a .lbl-category { background-color: #b8cc00; border-radius: 20px; padding: 7px 17px; font-size: 12px; margin-right: 35px; color: #FFFFFF; font-weight: bold; }
.newsList .newsListInner .news span.txt-date { font-weight: bold; font-size: 16px; margin-right: 35px;}
.newsList .newsListInner .news a { text-decoration: none; color:#747474; font-size: 16px; }
.newsList .newsListInner .news h3 {font-weight: normal;}

.head { margin-bottom: 60px; text-align: center; }
.head h2 {font-size: 40px; color: #333333; margin-bottom: 12px; }
.head h2 span { font-size: 16px; color: #747474; display: block;line-height: 1.0;}
.head img { text-align: center; display: inline-block;}
.head .btn {}
.head .btn a { display: block; border-radius: 22px; background: #fff; border: 1px solid #707070; padding: 12px 24px; font-size: 14px; text-decoration: none;}

.topCont { position: relative; width: 100%; background-size: 5%; margin: 0 auto 40px; padding-top: 130px;}
.topCont .l { width: 60%; }
.topCont .r { position: relative; background: url(../../img/union/en1@2x.png) no-repeat top right; background-size: 20%; }
.topCont .r img { position: relative;top: 50px;right: 50px; width: 90%; float: right; }
.topCont h2 {font-size: 50px; margin: 100px 0 100px 80px; position: relative; z-index: 1; line-height: 1.5; }
.topCont h2:before { content: ""; background: #b8cb00; width: 5px; height: calc(100% + 100px); position: absolute; left: -4%; top: 28px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; }

.topCont h2:before {height: 0; top: calc(100% + 100px); -webkit-transition: top 0.6s 0.2s ease-in-out, height 0.6s 0.2s ease-in-out; transition: top 0.6s 0.2s ease-in-out, height 0.6s 0.2s ease-in-out;}
.topCont h2:before { -webkit-animation: topMvTextBoxBorderMove 3s 1.5s ease infinite; animation: topMvTextBoxBorderMove 3s 1.5s ease infinite; -webkit-transform-origin: bottom center; transform-origin: bottom center;}

@-webkit-keyframes topMvTextBoxBorderMove {
  0% { height: 0;top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  40% { height: calc(100% + 230px);top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  60% { height: calc(100% + 230px);top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  100% { height: calc(100% + 230px);top: 0;-webkit-transform: translateX(-50%) scale(1, 0); transform: translateX(-50%) scale(1, 0); }
}
@keyframes topMvTextBoxBorderMove {
  0% { height: 0; top: 0; -webkit-transform: translateX(-50%);transform: translateX(-50%);}
  40% { height: calc(100% + 230px);top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
  60% { height: calc(100% + 230px);top: 0; -webkit-transform: translateX(-50%);transform: translateX(-50%); }
  100% { height: calc(100% + 230px);top: 0; -webkit-transform: translateX(-50%) scale(1, 0); transform: translateX(-50%) scale(1, 0);}
}

.topCont h2 span { color: #6fa11f;}
.topCont strong { font-size: 22px; line-height: 1.8; background-color: #ecf8ff; display: block; width: 33%; padding: 10px 15px; border-radius: 20px;margin-right: 15px;}

.topAbout { background: url(../../img/top/about1@2x.png) no-repeat; background-size: cover; padding: 0px; margin-top: -130px; }
.topAbout:before {content: '';
    display: block;
    width: 100px;
    height: 100px;
    background: url(../../img/top/about_r@2x.png) no-repeat;
    position: absolute;
    right: 0px;
    background-size: 100%;}

.topAbout .inner { padding:140px 0; }
.topAbout .cont {margin-bottom: 70px;}
.topAbout .cont p {font-size: 17px;}

.bn4Cont { background-color: #e1ebf2; padding: 64px 0px; margin:0 auto; }
.bn4 { display: flex; justify-content: space-between;}
.bn4 .bn4item { margin-right: 15px; }
.bn4 .bn4item:nth-child(4) { margin-right: 0; }
.bn4 .bn4item a {}
.bn4 .bn4item h3 { background-color: #FFFFFF; text-align: center; padding: 18px 0px; font-size: 18px;}

.bn2Cont {padding:140px 0px; margin:0 auto;background: url(../../img/union/sidebar_bg2.png) no-repeat; background-size: cover;}
.bn2Cont .inner {padding: 0;}
.bn2Cont h2{ color: #FFFFFF; }
.bn2Cont .head h2 span {color: #FFFFFF;}
.infoBtn { display: flex; color: #FFFFFF; justify-content: space-evenly; margin-bottom: 100px;margin-top: 90px;}
.infoBtn .l {text-align: center;}
.infoBtn .r { text-align: center; }
.infoBtn h4 { font-size: 16px; margin-bottom: 17px;}
.infoBtn a { color: #FFFFFF; font-size: 38px; text-decoration: none; font-weight: bold; }
.infoBtn img { display: inline-block; margin-right: 14px;}

.bn2 { display: flex; justify-content: space-between; }
.bn2 .bn2item { width: 100%; margin-right: 30px; background: #FFFFFF; border-radius: 20px;}
.bn2 .bn2item:nth-child(2) { margin-right: 0; }
.bn2 .bn2item a { text-decoration: none; }
.bn2 .bn2item a img { float: left; margin-top: 44px; margin-left: 40px; }
.bn2 .bn2item a .bn2Txt { background-color: #FFFFFF; display: flex; height: 144px; flex-direction: column; justify-content: center; padding-left: 20px; text-align: left; border-radius: 20px; background: url(../../img/union/up3@2x.png) no-repeat center right; background-size: 20%;background-position-x: 90%;}
.bn2 .bn2item a .bn2Txt h3 { font-size: 30px;}
.bn2 .bn2item a .bn2Txt p { font-size: 16px; }

.btn a,
.btn2 a { display: block; border-radius: 22px; padding: 12px 24px; font-size: 16px; text-decoration: none; margin:0 10px; font-weight: bold; color: #FFFFFF; }
.btn a { background-color: #6fa11f; }
.btn2 a { background-color: #6fa11f; }
.btn3 { display:block; }
.btn3 a { display: block; border-radius: 22px; padding: 12px 24px; font-size: 20px; text-decoration: none; margin:0 10px; font-weight: bold; color: #FFFFFF; border:1px solid #FFFFFF; width: 280px;}

}

@media (min-width: 1024px) and (max-width: 1500px) {
.topCont h2 {font-size: 44px;}
}

@media (min-width: 1024px) and (max-width: 1220px) {
.inner      { margin: 0 auto 0px; max-width: 98%; width: 96%; padding: 110px 0;}
.bn4        { margin: 0 auto 0px; max-width: 100%; width: 96%; }
.bn2        { margin: 0 auto 0px; max-width: 100%; width: 96%; }
.head {margin-bottom: 40px;}
.head img {}
.head h2 { font-size: 30px; }
.bn2 .bn2item { margin-right: 2%; }
.bn2 .bn2item a .bn2Txt h3 { font-size: 24px; }
.bn2 .bn2item a .bn2Txt { height: 120px; }
.bn2 .bn2item a img { margin-top: 32px;margin-left: 28px; }
.topCont { width:auto; }
.topCont h2 {font-size: 30px; width:auto; margin:60px 0 60px 60px;}
.topAbout {padding: 0;}

}

@media (min-width: 768px) and (max-width: 1023px) {
.inner      { margin: 0 auto 0px; max-width: 100%; width: 96%; padding: 100px 0;}
.bn4        { margin: 0 auto 0px; max-width: 100%; width: 96%; }
.bn2        { margin: 0 auto 0px; max-width: 100%; width: 96%; }
.head {margin-bottom: 40px;}
.head img {}
.head h2 { font-size: 28px; }
.newsList .newsListInner { margin-bottom: 50px; }
.newsList .newsListInner .news { display: block; padding: 16px 0px; }
.newsList .newsListInner .news a { font-size: 1.5rem; }
.newsList .newsListInner .news a .lbl-category { padding: 5px 10px; border-radius: 12px;}
.newsList .newsListInner .news p { margin-top: 10px; }

.bn4 .bn4item h3 { padding: 10px 0px; font-size: 1.8rem;}
.bn2 .bn2item { margin-right: 2%; }
.bn2Cont {padding: 100px 0;}
.bn2 .bn2item a .bn2Txt {height: 100px;}
.bn2 .bn2item a img { width: 12%; margin:30px 0 0px 20px; }
.bn2 .bn2item a .bn2Txt h3 { font-size: 1.8rem; }
.bn2 .bn2item a .bn2Txt p { font-size: 1.5rem; }
.infoBtn { margin: 60px 0; }
.topCont { width: auto; }
.topCont h2 {font-size: 2.8rem; width: auto; margin:40px 0 40px 40px;}
.topAbout {padding: 0;}
.topAbout .cont p { font-size: 1.6rem; }
.spbr { display: none; }

}

/* スマホ用スタイル */
@media screen and (max-width: 767px){

#mv { position: relative; z-index: 0;}

.spbr { display: none; }

.topCont { position: relative; width: 100%; background-size: 5%; margin: 0 auto 40px; }
.topCont .l { width:auto; }
.topCont .r { position: relative; background: url(../../img/union/en1@2x.png) no-repeat top right; background-size: 20%; }
.topCont .r img { width: 90%; margin:20px auto; }
.topCont h2 {font-size: 2.0rem; margin: 30px 0 30px 30px; position: relative; z-index: 1; line-height: 1.5; }
.topCont h2:before { content: ""; background: #b8cb00; width: 5px; height: calc(100% + 100px); position: absolute; left: -4%; top: 28px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; }

.topCont h2:before {height: 0; top: calc(100% + 100px); -webkit-transition: top 0.6s 0.2s ease-in-out, height 0.6s 0.2s ease-in-out; transition: top 0.6s 0.2s ease-in-out, height 0.6s 0.2s ease-in-out;}
.topCont h2:before { -webkit-animation: topMvTextBoxBorderMove 3s 1.5s ease infinite; animation: topMvTextBoxBorderMove 3s 1.5s ease infinite; -webkit-transform-origin: bottom center; transform-origin: bottom center;}

@-webkit-keyframes topMvTextBoxBorderMove {
  0% { height: 0;top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  40% { height: calc(100% + 230px);top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  60% { height: calc(100% + 230px);top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  100% { height: calc(100% + 230px);top: 0;-webkit-transform: translateX(-50%) scale(1, 0); transform: translateX(-50%) scale(1, 0); }
}
@keyframes topMvTextBoxBorderMove {
  0% { height: 0; top: 0; -webkit-transform: translateX(-50%);transform: translateX(-50%);}
  40% { height: calc(100% + 230px);top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
  60% { height: calc(100% + 230px);top: 0; -webkit-transform: translateX(-50%);transform: translateX(-50%); }
  100% { height: calc(100% + 230px);top: 0; -webkit-transform: translateX(-50%) scale(1, 0); transform: translateX(-50%) scale(1, 0);}
}
.topCont h2 span { color: #6fa11f;}

.topAbout { background: url(../../img/top/about1@2x.png) no-repeat; background-size: cover; padding: 50px 0px;}
.topAbout .inner { padding: 0; margin-bottom: 0; }
.topAbout .cont {margin-bottom: 35px;}
.topAbout .cont p {font-size: 1.5rem;color: #333333;}

.slick-slider { margin-bottom: 0!important; }

.btn a,
.btn2 a { display: block; border-radius: 22px; padding: 12px 24px; font-size: 1.4rem; text-decoration: none; margin:20px auto 5px; width: 80%; font-weight: bold; color: #FFFFFF;text-align: center;}
.btn a { background-color: #6fa11f; }
.btn2 a { background-color: #6fa11f;  }
.btn3 { display:block; margin-top: 20px;}
.btn3 a { display: block; border-radius: 22px; padding: 12px 24px; font-size:2.0rem!important; text-decoration: none; margin:0 auto 10px; width: 80%; font-weight: bold; color: #FFFFFF; border:1px solid #FFFFFF; width: 280px;}

.inner      { margin: 0 auto 0px; max-width: 100%; width: 94%; padding: 50px 0; }
.bn4        { margin: 0 auto 0px; max-width: 100%; width: 94%; }
.bn2        { margin: 0 auto 0px; max-width: 100%; width: 94%; }
.newsList .newsListInner {margin-bottom: 40px;}
.newsList .newsListInner .news { display: block; padding: 10px 0px 15px; border-bottom: 1px solid #CCC;}
.newsList .newsListInner .news a .lbl-category { background-color: #b8cb00; padding: 3px 7px; font-size: 1.2rem; border-radius: 9px; margin-right: 8px; color: #FFFFFF; font-weight: bold;}
.newsList .newsListInner .news h3 { margin-top: 7px; font-size: 1.4rem; line-height: 1.5; font-weight: normal;}
.newsList .newsListInner .news span.txt-date { font-weight: bold; font-size: 1.3rem; margin-right: 7px;}
.newsList .newsListInner .news a { text-decoration: none; }

.head { margin-bottom: 30px; text-align: center; }
.head h2 { font-size: 2.2rem; margin-bottom: 5px; color: #333333;}
.head h2 span { font-size: 1.3rem; color: #747474; display: block;line-height: 1.0;}
.head img { display: inline; text-align: center; }
.head .btn {}
.head .btn a { display: block; border-radius: 20px; background: #fff; border: 1px solid #707070; padding: 10px 20px; font-size: 1.4rem; text-decoration: none;}

.bn4Cont { background-color: #e1ebf2; padding: 30px 0px; margin:0 auto; }
.bn4 { display: flex; flex-wrap: wrap; justify-content: center;}
.bn4 .bn4item { margin-right: 4%;width: 46%; margin-bottom: 15px; }
.bn4 .bn4item:nth-child(even) { margin-right: 0; }
.bn4 .bn4item a {}
.bn4 .bn4item h3 { background-color: #FFFFFF; text-align: center; padding: 8px 0px; font-size: 1.4rem;}

.bn2Cont { margin:0 auto; background: url(../../img/union/sidebar_bg2.png) no-repeat; background-size: cover;}
.bn2Cont h2{ color: #FFFFFF; }
.bn2Cont .head h2 span {color: #FFFFFF;}
.infoBtn { display: block; color: #FFFFFF; margin-bottom: 50px;}
.infoBtn .l {text-align: center; margin-bottom: 20px;}
.infoBtn .r { text-align: center; }
.infoBtn h4 { font-size: 1.5rem; margin-bottom: 8px;}
.infoBtn a { color: #FFFFFF; font-size: 2.8rem; text-decoration: none; font-weight: bold; }
.infoBtn img { display: inline-block; margin-right: 14px; width: 30px;}

.bn2 { display: block; }
.bn2 .bn2item { width: 100%; background: #FFFFFF; border-radius: 20px; margin-bottom: 20px;}
.bn2 .bn2item a { text-decoration: none; }
.bn2 .bn2item a img { float: left; margin-top: 20px; margin-left:20px; width: 30px;}
.bn2 .bn2item a .bn2Txt { background-color: #FFFFFF; display: flex; height: 75px; flex-direction: column; justify-content: center; padding-left: 20px; text-align: left; border-radius: 20px; background: url(../../img/union/up3@2x.png) no-repeat center right; background-size: 15%;background-position-x: 90%;}
.bn2 .bn2item a .bn2Txt h3 { font-size: 2.0rem;line-height: 1.3;}
.bn2 .bn2item a .bn2Txt p { font-size: 1.4rem; }

}


/* contact
----------------------------------------------------------- */  
.formCont { margin-top: 90px; }
.input-field {}
.input-field .wpcf7-list-item { margin:0 1rem 0 0; }
::-webkit-input-placeholder {color: #555; }
:-moz-placeholder { /* Firefox 18- */color: #555; }
::-moz-placeholder {/* Firefox 19+ */color: #555; }
:-ms-input-placeholder {color: #555; }

input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
  border: none; border-radius: 0; height: 6rem; width: 95%; /*margin: 0 0 15px 0;*/ padding: 0 1% 0 1%; box-shadow: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; transition: all .3s; background-color: transparent; border-bottom: 1px solid #9e9e9e; outline: none; }
  input[type=text]:disabled, input[type=text][readonly="readonly"], input[type=password]:disabled, input[type=password][readonly="readonly"], input[type=email]:disabled, input[type=email][readonly="readonly"], input[type=url]:disabled, input[type=url][readonly="readonly"], input[type=time]:disabled, input[type=time][readonly="readonly"], input[type=date]:disabled, input[type=date][readonly="readonly"], input[type=datetime-local]:disabled, input[type=datetime-local][readonly="readonly"], input[type=tel]:disabled, input[type=tel][readonly="readonly"], input[type=number]:disabled, input[type=number][readonly="readonly"], input[type=search]:disabled, input[type=search][readonly="readonly"], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly="readonly"] {
    color: #CCC; border-bottom: 1px dotted #CCC; }
  input[type=text]:disabled + label, input[type=text][readonly="readonly"] + label, input[type=password]:disabled + label, input[type=password][readonly="readonly"] + label, input[type=email]:disabled + label, input[type=email][readonly="readonly"] + label, input[type=url]:disabled + label, input[type=url][readonly="readonly"] + label, input[type=time]:disabled + label, input[type=time][readonly="readonly"] + label, input[type=date]:disabled + label, input[type=date][readonly="readonly"] + label, input[type=datetime-local]:disabled + label, input[type=datetime-local][readonly="readonly"] + label, input[type=tel]:disabled + label, input[type=tel][readonly="readonly"] + label, input[type=number]:disabled + label, input[type=number][readonly="readonly"] + label, input[type=search]:disabled + label, input[type=search][readonly="readonly"] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly="readonly"] + label {
    color: #CCC; }
  input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #e51565; box-shadow: 0 1px 0 0 #e51565; }
  input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {
    color: #0e366d; }
  input[type=text].valid, input[type=text]:focus.valid, input[type=password].valid, input[type=password]:focus.valid, input[type=email].valid, input[type=email]:focus.valid, input[type=url].valid, input[type=url]:focus.valid, input[type=time].valid, input[type=time]:focus.valid, input[type=date].valid, input[type=date]:focus.valid, input[type=datetime-local].valid, input[type=datetime-local]:focus.valid, input[type=tel].valid, input[type=tel]:focus.valid, input[type=number].valid, input[type=number]:focus.valid, input[type=search].valid, input[type=search]:focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
    border-bottom: 1px solid #4CAF50; box-shadow: 0 1px 0 0 #4CAF50; }
  input[type=text].valid + label:after, input[type=text]:focus.valid + label:after, input[type=password].valid + label:after, input[type=password]:focus.valid + label:after, input[type=email].valid + label:after, input[type=email]:focus.valid + label:after, input[type=url].valid + label:after, input[type=url]:focus.valid + label:after, input[type=time].valid + label:after, input[type=time]:focus.valid + label:after, input[type=date].valid + label:after, input[type=date]:focus.valid + label:after, input[type=datetime-local].valid + label:after, input[type=datetime-local]:focus.valid + label:after, input[type=tel].valid + label:after, input[type=tel]:focus.valid + label:after, input[type=number].valid + label:after, input[type=number]:focus.valid + label:after, input[type=search].valid + label:after, input[type=search]:focus.valid + label:after, textarea.materialize-textarea.valid + label:after, textarea.materialize-textarea:focus.valid + label:after {
    content: attr(data-success); color: #4CAF50; opacity: 1; }
  input[type=text].invalid, input[type=text]:focus.invalid, input[type=password].invalid, input[type=password]:focus.invalid, input[type=email].invalid, input[type=email]:focus.invalid, input[type=url].invalid, input[type=url]:focus.invalid, input[type=time].invalid, input[type=time]:focus.invalid, input[type=date].invalid, input[type=date]:focus.invalid, input[type=datetime-local].invalid, input[type=datetime-local]:focus.invalid, input[type=tel].invalid, input[type=tel]:focus.invalid, input[type=number].invalid, input[type=number]:focus.invalid, input[type=search].invalid, input[type=search]:focus.invalid, textarea.materialize-textarea.invalid, textarea.materialize-textarea:focus.invalid {
    border-bottom: 1px solid #F44336; box-shadow: 0 1px 0 0 #F44336; }
  input[type=text].invalid + label:after, input[type=text]:focus.invalid + label:after, input[type=password].invalid + label:after, input[type=password]:focus.invalid + label:after, input[type=email].invalid + label:after, input[type=email]:focus.invalid + label:after, input[type=url].invalid + label:after, input[type=url]:focus.invalid + label:after, input[type=time].invalid + label:after, input[type=time]:focus.invalid + label:after, input[type=date].invalid + label:after, input[type=date]:focus.invalid + label:after, input[type=datetime-local].invalid + label:after, input[type=datetime-local]:focus.invalid + label:after, input[type=tel].invalid + label:after, input[type=tel]:focus.invalid + label:after, input[type=number].invalid + label:after, input[type=number]:focus.invalid + label:after, input[type=search].invalid + label:after, input[type=search]:focus.invalid + label:after, textarea.materialize-textarea.invalid + label:after, textarea.materialize-textarea:focus.invalid + label:after {
    content: attr(data-error); color: #F44336; opacity: 1; }
  input[type=text] + label:after, input[type=password] + label:after, input[type=email] + label:after, input[type=url] + label:after, input[type=time] + label:after, input[type=date] + label:after, input[type=datetime-local] + label:after, input[type=tel] + label:after, input[type=number] + label:after, input[type=search] + label:after, textarea.materialize-textarea + label:after {
    display: block; content: ""; position: absolute; top: 65px; opacity: 0; transition: .2s opacity ease-out, .2s color ease-out; }
input[type="submit"] { padding: 14px 16px;margin-top: 20px;color: #FFF; background-color: #6fa11f; width: 50%; border: none; font-weight: bold; font-size: 24px; }

.input-field { position: relative; margin-bottom: 2rem; margin-top: 3rem; }
  .input-field label { color: #333; /*position: absolute;*/ left: 0rem; cursor: text; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; -o-transition: .2s ease-out; -ms-transition: .2s ease-out; transition: .2s ease-out; /*top: -3rem;*/ display: block; margin-bottom: 10px; }
  .input-field label.active { font-size: 0.8rem; -webkit-transform: translateY(-140%); -moz-transform: translateY(-140%); -ms-transform: translateY(-140%); -o-transform: translateY(-140%); transform: translateY(-140%); }
  .input-field .prefix { position: absolute; width: 3rem; font-size: 2rem; -webkit-transition: color .2s; -moz-transition: color .2s; -o-transition: color .2s; -ms-transition: color .2s; transition: color .2s; }
  .input-field .prefix.active { color: #26a69a; }
  .input-field .prefix ~ input, .input-field .prefix ~ textarea { margin-left: 3rem; width: 92%; width: calc(100% - 3rem); }
  .input-field .prefix ~ textarea { padding-top: .8rem; }
  .input-field .prefix ~ label { margin-left: 3rem; }

.input-field input[type=search] { display: block; line-height: inherit; padding-left: 4rem; width: calc(100% - 4rem); }
.input-field input[type=search]:focus { background-color: #fff; border: 0; box-shadow: none; color: #444; }
.input-field input[type=search]:focus + label i, .input-field input[type=search]:focus ~ .mdi-navigation-close, .input-field input[type=search]:focus ~ .material-icons { color: #444; }
.input-field input[type=search] + label { left: 1rem; }
.input-field input[type=search] ~ .mdi-navigation-close, .input-field input[type=search] ~ .material-icons { position: absolute; top: 0; right: 1rem; color: transparent; cursor: pointer; font-size: 2rem; transition: .3s color; }
textarea { width: 100%; height: 3rem; background-color: transparent; }
textarea.materialize-textarea { overflow-y: hidden; padding: 1% 1% 1% 1%; min-height: 3rem; }
select.browser-default { display: block; }
select { background-color: rgba(255, 255, 255, 0.9); width: 98%; padding: 0 1% 0 1%; border: 3px solid #9e9e9e; border-radius: 2px; height: 6rem; }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: 20px; height:20px; vertical-align: middle; }