/* モバイルレイアウト : 480 px およびそれ以下. */

/* --------------------------------------------------------
共通部分
-------------------------------------------------------- */
:root{
    --main-color: #2AA4DE;
    --sub-color: #663110;
}

/* スクロール時にふわっと表示 */
.scroll-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/* デバッグ用（全要素に適用し、はみ出しなどの不具合表示を発見する） */
/* *{
  outline: #F00 1px solid;
} */

/*ふわっと表示*/
body {
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
  background: #fff7ee;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body{
    color: var(--main-color);
    padding:0; margin:0;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8em;
    font-family: "Noto Sans JP", sans-serif;
  }

/* 影あり */
a.opacity2 img {
	filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

img,
object,
embed,
video {
  max-width: 100%;
  height: auto;
  margin: 0;
}

/* スクロール時にふわっと表示 */
.scroll-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/*ふわっと表示*/
body {
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
  background: #F5EFE6;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

section.content02 h2,
section.content03 h2,
section.content04 h2,
section.content05 h2{
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #61C4F3;
  color: #fff;
  border-radius: 10px;
  padding: 0 2%;
  gap: 2%;
}

a:link.pcContact{
  display: none;
}

/* --------------------------------------------------------
header
-------------------------------------------------------- */

.mainImg{
  position: relative;
}

h1{
  position: absolute;
  top: 1%;
  left: 8%;
}

h1 img{
  width: 25vw;   /* 画面幅に応じて */
  max-width: 400px;
}

@font-face {   /* webフォント */
  font-family: "UtsukushiFONT";
  src: url("/common/font/02UtsukushiMincho.woff2") format("woff2"),
       url("/common/font/02UtsukushiMincho.woff") format("woff");
  font-display: swap;
}

.mainImg h2{
  width: 80%;
  text-align: center;
  position: absolute;
  line-height: 1.5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  color: #fff;
  font-family: "UtsukushiFONT", serif;
  display: inline-block;
  white-space: nowrap;
}

/* --------------------------------------------------------
nav
-------------------------------------------------------- */

/* ハンバーガーボタン */
nav {
  width: 100%;
  position: absolute;
}

.openBtn {
  position: fixed;
  z-index: 9999;
  top: 4%;
  right: 5%;
  cursor: pointer;
  width: 80px;
  height: 80px;
  background-size: 100%;
  background: #269CFF;

}

.openBtn span {
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 3px;
  border-radius: 10px;
  background-color: #FFF;
  width: 50%;
  transition: all 0.4s;
}

.openBtn span:nth-of-type(1) {
  top: 20%;
}

.openBtn span:nth-of-type(2) {
  top: 35%;
}

.openBtn span:nth-of-type(3) {
  top: 50%;
}

.openBtn::after{
  content: "MENU";
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-58%, -40%);
  display: block;
  width: 50%;
  color: #FFF;
  font-size: 1.1rem;
  text-align: center;
}

/*×に変化*/
.openBtn.active span:nth-of-type(1) {
  transform: translate(-50%, 0) rotate(-45deg);
  top: 35%;
}
.openBtn.active span:nth-of-type(2) {
  opacity: 0;
}
.openBtn.active span:nth-of-type(3) {
  transform: translate(-50%, 0) rotate(45deg);
  top: 35%;
}

.openBtn.active span:nth-of-type(1),
.openBtn.active span:nth-of-type(2),
.openBtn.active span:nth-of-type(3){
  background:  #fff;
}

.openBtn.active::after{
  content: "CLOSE";
  font-size: 0.9rem;
  color: #fff;
}

#g-nav {
  position: fixed;
  z-index: 999;
  top: 0;
  right: -120%;
  width: 100%;
  height: 100dvh;
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.6s;
}

#g-nav.panelactive {
  top: 0;
  right: 0;
}

#g-nav.panelactive #g-nav-list { /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100dvh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#g-nav #g-nav-list #g-nav-container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

#g-nav ul{
  display: block;
  width: auto;
  padding: 0;
  margin: 0;
  text-align: center;
}

#g-nav li {
  list-style: none;
  padding: 12px 0;
}

#g-nav a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #3d98c2;
}

#g-nav ul{
  padding-left: 0;
}

#g-nav ul li{
  list-style-type: none;
  font-size: 1.5rem;
}

#g-nav .pcContact{
  display: inline-flex;      /* SPメニュー内で表示 */
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border: 1px solid #2AA4DE;
  border-radius: 50px;
  color: #2AA4DE;
  background: #fff;
  text-decoration: none;
  white-space: nowrap;
}

/* --------------------------------------------------------
article
-------------------------------------------------------- */

article{
  width: 90%;
  margin: 8% auto 10%;
}

.news{
  background: #fff;
  padding: 5%;
  border: 1px solid var(--main-color);
}

.news a:link,
.news a:visited{
  color: #000;
}

.news h3{
  text-align: center;
  font-size: 1.5rem;
}

.news dl dd{
  padding-left: 0;
  margin-left: 0;
}

.newsList{
  text-align: right;
  padding: 2% 0;
}

.newsList a:link,
.newsList a:visited{
  color: var(--main-color);
}

dl.archiveDl dd{
  padding-top: 0;
}

/* --------------------------------------------------------
section 晴るく”の想い
-------------------------------------------------------- */

section.content01{
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

section.content01 h2{
  text-align: center;
}

section.content01 p{
  text-align: center;
  font-family: "UtsukushiFONT", serif;
}

.content01Txt{
  background:
  radial-gradient(
  ellipse 75% 55% at 50% 45%,
  #FFF6D7 0%,
  rgba(255, 246, 215, 0.9) 30%,
  rgba(255, 246, 215, 0.6) 45%,
  rgba(255, 246, 215, 0.3) 60%,
  rgba(255, 246, 215, 0) 75%
);
}

.content01Txt,
section.content01 .content01Txt p{
  color: #000;
  text-align: left;
  font-family: "UtsukushiFONT", serif;
}

a.contactLink{
  display: inline-block;
  margin: 0 auto;
  color: var(--main-color);
  border-bottom: 1px solid var(--main-color);
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

a.contactLink:visited{
  text-decoration: none;
}

/* --------------------------------------------------------
section サービス案内
-------------------------------------------------------- */

section.content02{
  margin: 0 auto;
  padding: 20% 0 8%;
}

section.content02 > p{
  width: 90%;
  margin: 0 auto;
  padding: 8% 0 0;
  color: #000;
}

section.content02 > p strong{
  color: red;
}

.featuresWrap:first-of-type{
  margin: 10% 0;
}

.featuresAllWrap{
  background: #F4F7F9;
}

.number{
  font-family: "Zen Old Mincho", serif;
  font-size: 2.8rem;
  color: #61C4F3;
}

.featuresTxt{
  width: 90%;
  margin: 0 auto;
  padding: 5% 0;
}

.featuresTxt h3{
  color: #000;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.3rem;
}

.featuresTxt p{
  color: #000;
}

/* --------------------------------------------------------
section ご相談の流れ
-------------------------------------------------------- */

section.content03{
  width: 90%;
  margin: 0 auto;
  padding: 10% 0;
  color: #000;
}

img.arrow{
  display: none;
}

.flowWrap:first-of-type{
  padding-top: 8%;
}

.flowWrap{
  padding: 3% 0 0;
}

.flowWrap h3{
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  color: #614B00;
}

.flowWrap p{
  background: #FFF6D7;
  padding: 8% 5%;
}

/* --------------------------------------------------------
section 会社概要
-------------------------------------------------------- */

section.content04{
  padding-top: 8%;
}

.conmpanyBg{
  background: #F0F5F6;
  margin: 8% 0;
  padding: 15% 0;
}

.companyWrap{
  width: 90%;
  margin: 0 auto;
}

.companyWrap dl{
  display: flex;
  align-items: flex-start; /* 複数行でも上揃え */
  gap: 12px;               /* dtとddの間隔 */
  margin: 0;               /* dlの標準余白を消す */
  padding: 18px 0;         /* 行の上下余白（hrを消すならここで調整） */
}

.companyWrap dt,
.companyWrap dd{
  margin: 0;   /* dt/ddの標準余白を消す */
  padding: 0;
}

.companyWrap dt{
  flex: 0 0 30%;   /* ←重要：45%で固定（縮まない） */
  color: #007AB4;
  font-weight: 600;
}

.companyWrap dd{
  flex: 1 1 auto;  /* 残り幅 */
  min-width: 0;    /* ←重要：折返しを正常化（長文で崩れるのを防ぐ） */
  color: #000;
  text-align: left;
  line-height: 1.8;
}

.companyWrap hr{
  border: none;
  border-bottom: 1px dashed rgba(0,122,180,.45);
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------
section お問い合わせフォーム
-------------------------------------------------------- */

.contactWrap{
  width: 90%;
  margin: 0 auto;
  padding: 5% 0;
  color: #000;
}

section.content05 strong{
  color: red;
}
/* --------------------------------------------------------------------------------------------------
 ■contact (お問い合わせ)■
-------------------------------------------------------------------------------------------------- */
/* モバイルレイアウト : 480 px およびそれ以下. */

.contact h2{
  display: block;
}

/* 園利用者相談 お問い合わせ先 */
.soudan{
	background-color: #FFE4E4;
	border: #6E3D0D solid 1px;
	border-radius: 20px;
	margin: 5% auto 10%;
	padding: 5%;
}

.soudan h3{
	color: #EB280E;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.soudan h3::before,
.soudan h3::after{
	content: url(../../contact/img/pic_01.png);
	vertical-align: middle;
}

.soudan h3::before{
	margin-right: .5em;
}

.soudan h3::after{
	margin-left: .5em;
}

.soudan p.mail{
	color: #DD5A10;

}
.soudan p.mail a{
	color: #DD5A10;
	font-size: 1.3rem;
	display: inline-block;
}

/* お問い合わせフォーム */
.contactTable { width: 100%; margin:0; box-sizing: border-box;}
.contactTable td {
  display: block;
  p{
    margin: 0;
  }
  .gray{
    color: #666;
    font-size: 14px;
  }
}
.contactTable2 { width: 90%; margin:0;}
/*placeholderの色を設定*/
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#8A8A7B;}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#8A8A7B;}
::placeholder{ /* Others */
 color:#8A8A7B;}

/* テキストインプットとテキストエリアの基本装飾 */
input,
textarea{
  width: 100%;
  box-sizing: border-box;
}
input:required { background:#FFF;}
textarea:required { background:#FFF;}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
	padding: 0.8em; outline: none; border: 1px solid #DDD;
	-webkit-border-radius: 3px; -moz-border-radius: 3px;
	border-radius: 3px; font-size: 16px;}
textarea { width: 100%; height: 250px;}
input[type="checkbox"]{
  width: fit-content;
}

/* フォーカスした時のスタイルを変更 */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
textarea:focus {
	box-shadow: 0 0 7px #3498db;
	transform: translateZ(0); /*shadowをiOSで表示*/
	border: 1px solid #3498db;
}

/* ボタンのスタイルを変更 */
input[type="submit"],
input[type="button"] {
  width: fit-content;
  color: #111;
  margin: 0 0 5%;
  padding: 10px 30px;
  background: -moz-linear-gradient(top, #FFF 0%, #EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
  border: 1px solid #DDD;
  border-radius: 3px;
}

input[type="submit"]:hover,
input[type="button"]:hover {
	background: -moz-linear-gradient(top, #EFEFEF 0%, #EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#EEE));}

input.sysNextSubmit {
  background: #fff;              /* 白背景 */
  color: #2AA4DE;                /* 青文字 */
  border: 1px solid #2AA4DE;     /* 青枠 */
  border-radius: 0;              /* 角丸なし */
}

input.sysNextSubmit:hover {
  background: #2AA4DE;
  color: #fff;
}

ul.privacy{
	text-align: left;
	width: 100%;
  p{
    display: inline;
  }
}
ul.privacy{
  padding-left: 0;
}
ul.privacy li{
  list-style-type: none;
	padding: 0 0 0 1em;
}
ul.privacy li::before{
	content: "※";
	margin: 0 0 0 -1.2em;
	padding: 0 0.2em 0 0;
}
input[type="radio"]{
	width: auto;
  margin-right: .5em;
  transform: scale(1.5);
  accent-color: red;
}
.sysNextSubmit {
  font-size: 1rem;
}

/* --------------------------------------------------------
footer
-------------------------------------------------------- */

footer{
  padding: 5% 0;
  text-align: center;
}

small{
  display: block;
}

/* --------------------------------------------------------
お知らせ
-------------------------------------------------------- */

.newsList2 a:link,
.newsWrap a:link{
  display: block;
  color: #007AB4;
  text-align: center;
  padding: 3% 0;
}

.newsWrap{
  display: flex;
  gap: 5%;
  justify-content: center;
  padding-bottom: 5%;
}

.newsWp dl{
  padding-top: 30px;
}

.newsWp dl dt{
  font-size: 1.2rem;
  border-bottom: 1px dashed #007AB4;
}

.news dl dd{
  color: #000;
  padding-top: 10px;
}

.newsWp2{
  font-size: 1.2rem;
}

.newsWp2 .dateWp{
  color: #000;
}

.newsWp2 hr{
  border: none;
  border-bottom: 1px dashed #007AB4;
  margin-bottom: 30px;
}


/* タブレットレイアウト : 981px～。モバイルレイアウトからスタイルを継承。 */
@media print, screen and (min-width: 980px) {

/* --------------------------------------------------------
common
-------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #2AA4DE;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #2AA4DE;
    border-right: 3px solid #2AA4DE;
    transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color: #3293e7;
    }
}

section.content02 h2,
section.content03 h2,
section.content04 h2,
section.content05 h2{
  max-width: 350px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #61C4F3;
  color: #fff;
  border-radius: 10px;
  padding: 0;
  gap: 2%;
}

/* --------------------------------------------------------
header
-------------------------------------------------------- */

h1{
  left: 4%;
}

@media print, screen and (min-width: 1800px) {
  h1{
  left: 8%;
}
}

h1 img{
  width: 144px;
}

.mainImg h2{
  font-size: 2.5rem;
}

/* =========================================================
PC NAV（980px〜）
画像イメージ：中央メニュー + 右端CTAボタン
========================================================= */

/* ハンバーガーボタン */
nav {
  width: 100%;
  position: relative;
}

.openBtn{
  display: none;
}

/* ヘッダー上に重ねる（メイン画像の上に配置） */
header .mainImg{
  position: relative;
}

/* nav自体をヘッダー上部に重ねて横一列 */
header nav{
  position: absolute;
  top: 8%;
  left: 0;
  width: 100%;
  z-index: 50;
  padding: 0;
}

@media print, screen and (min-width: 1800px) {
header nav{
  top: 8%;
}
}

  /* SPのオーバーレイ挙動をPCでは無効化 */
  #g-nav{
    position: static;
    width: 100%;
    height: auto;
    background: transparent;
    right: auto;
    top: auto;
    transition: none;
  }

  #g-nav #g-nav-list{
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  /* ★ここが肝：ロゴ領域を避けて、メニュー＋ボタンを1列に */
  #g-nav #g-nav-list #g-nav-container{
    position: relative;     /* もしくは static */
    top: auto;
    left: auto;
    transform: none;
    width: min(1280px, 92%);
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between; /* ← right じゃなくこれ */
    flex-wrap: nowrap;          /* ←絶対に折り返さない */
    flex-direction: row;
    left: auto;                      /* ← 55% を消す */

    gap: 24px;
    padding-left: 200px; /* ←ロゴの幅ぶん確保（144px + 余白）*/
    box-sizing: border-box;
  }

  /* メニューは中央 */
  #g-nav ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;

    margin: 0 auto; /* ← メニュー中央寄せ */
    padding: 0;          /* ←今の padding: 5% 0 0; を消す */
    width: auto;
  }

  #g-nav li{
    list-style: none;
    padding: 0;
    font-size: 1.3rem;
    font-family: "Noto Sans JP", sans-serif;
  }

  #g-nav ul li a{
    color: #fff;
    text-decoration: none;
    white-space: nowrap; /* メニュー折り返し防止 */
  }

  /* ボタンは右（nav内の要素として配置） */
  .pcContact{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: static !important; /* ←絶対配置を完全に無効化 */
    margin-left: 24px;
    white-space: nowrap;

    color: #2AA4DE;
    background: #fff;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
  }

  /* ★あなたのCSSにある “pcContactをabsoluteにする定義” を殺す */
  a:link.pcContact{
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
  }

/* ナビリンク共通 */
#g-nav ul li a{
  position: relative;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  padding-bottom: 6px; /* 下線との距離 */
}

/* 下線 */
#g-nav ul li a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #fff;

  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* hover時 */
#g-nav ul li a:hover::after{
  transform: translateX(-50%) scaleX(1);
}

  /* ★display:none を確実に上書き */
  a.pcContact:link,
  a.pcContact:visited{
    display: inline-flex;
  }
/* --------------------------------------------------------
article
-------------------------------------------------------- */

article{
  max-width: 1200px;
  margin: 70px auto;
}

.news{
  padding: 20px 80px;
  display: flex;
  align-items: center;
  gap: 50px;
}

/* --------------------------------------------------------
section.content01 “晴るく”の想い
-------------------------------------------------------- */

section.content01{
  max-width: 750px;
}

.content01Txt{
  padding: 20px 0;
}

/* --------------------------------------------------------
section.content02 サービス案内
-------------------------------------------------------- */

section.content02{
  margin: 0;
  padding: 180px 0 80px;
}

section.content02 > p{
  max-width: 850px;
  padding: 80px 0;

}
.featuresWrap:first-of-type {
    margin: 0;
}

.featuresWrap{
  display: flex;
  align-items: center;
}

.featuresWrap:nth-of-type(2){
  flex-direction: row-reverse;
  padding: 100px 0;
}

.featuresWrap img{
  width: 50%;
}

.featuresTxt{
  width: 35%;
}

/* --------------------------------------------------------
section.content03 ご相談の流れ
-------------------------------------------------------- */

section.content03{
  text-align: center;
  padding: 100px 0 0;
}

.content03 img{
  display: block;
}

img.arrow{
  display: block;
  padding: 30px 0;
  margin: 0 auto;
}

.flowWrap{
  padding: 0;
}

.flowWrap p{
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 30px;
}

.flowWrap h3{
  padding-top: 0;
  margin-top: 0;
}

/* --------------------------------------------------------
section.content04 会社概要
-------------------------------------------------------- */

section.content04{
  padding: 200px 0 0;
}

.conmpanyBg{
  padding: 100px 0 80px;
  margin: 80px 0;
}

.companyWrap{
  max-width: 966px;
}

.companyTxt{
  padding: 50px 0 0;
}

.companyWrap dt{
  flex: 0 0 250px;
}

/* --------------------------------------------------------
section.content05 お問い合わせ
-------------------------------------------------------- */

section.content05{
  padding: 80px 0 0;
}

.contactWrap{
  max-width: 850px;
  margin: 0 auto;
}

/* --------------------------------------------------------
お知らせ
-------------------------------------------------------- */

.newsList2 a:link,
.newsWrap a:link{
  display: block;
  color: #007AB4;
  text-align: center;
  padding: 3% 0;
}

.newsWrap{
  display: flex;
  gap: 5%;
  justify-content: center;
  padding-bottom: 30px;
}

.news{
  display: block;
}

.news dl.topDl{
  display: flex;
  gap: 15px;
}

.news dl dd{
  padding-top: 0;
}

/* --------------------------------------------------------
お問い合わせフォーム
-------------------------------------------------------- */

.contactForm{ width: 750px; margin:0 auto;}
.contactForm p{
	margin: 2% 0;
}
.contactTable { width: 750px; margin:0 auto;}
.contactTable td { display: table-cell;}
.contactTable2 { width: 550px; margin:0 auto;}

input[type="text"],
input[type="tel"]{
  max-width: 300px;
}

input[type="text"][name="address"],
input[type="email"]{
  max-width: none;
}

textarea{
  height: 200px;
}

/* ボタンのスタイルを変更 */
input[type="submit"],
input[type="button"] {
  max-width: 300px;
  margin: 0 0 10px;
}

input.sysNextSubmit {
  display: block;
  width: 350px;
  margin: 40px auto;

  padding: 18px 0;

  font-size: 18px;
  font-weight: 500;

  cursor: pointer;
  transition: all 0.3s ease;
}

input.sysNextSubmit:hover {
  background: #2AA4DE;
  color: #fff;
}

}