/* Font Face Definitions */
@font-face {
  font-family: 'OpenSans-Regular';
  src: url('../fonts/OPENSANS-REGULAR.TTF') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenSans-SemiBold';
  src: url('../fonts/OPENSANS-SEMIBOLD.TTF') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenSans-Bold';
  src: url('../fonts/OPENSANS-BOLD.TTF') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DingTalk Sans';
  src: url('../fonts/DINGTALK SANS.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body, td, input, select, textarea, h1, h2, h3, h4, h5, h6{ font-size:14px;}
h1, h2, h3, h4, h5, h6{ font-weight:normal;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}
ul, ol{ list-style:none;}
img{border:0; vertical-align:top;}
input,select,textarea{vertical-align:middle;}

/* link */
a{ text-decoration:none;}
a:hover{text-decoration:none;}
.clearfix:after{ visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0; }  
.clearfix{zoom: 1;}
:root {
  --font-size-12: 0.12rem;
  --font-size-14: 0.14rem;
  --font-size-16: 0.16rem;
  --font-size-18: 0.18rem;
  --font-size-20: 0.2rem;
  --font-size-22: 0.22rem;
  --font-size-24: 0.24rem;
  --font-size-26: 0.26rem;
  --font-size-32: 0.32rem;
  --font-size-30: 0.3rem;
  --font-size-40: 0.4rem;
  --font-size-46: 0.46rem;
  --font-size-60: 0.6rem;
  --font-size-80: 0.8rem;
}
:root {
  --primary-color: #011E50;
  --lightblue-color: #69c7ec;
  --bg-light-blue: #edf3f7;
  --blue-color: #6a779b;
  --text-gray: #231e1e;
  --text-light-gray: #666666;
  --text-btn-gray: #4e4e4e;
  --bg-light-gray: #f5f5f5;
  --text-light-gray2: #8c8b8b;
  --border-color: #bbbbbb;

}
body{font-family: 'OpenSans-Regular';}
html,body{width: 100%;overflow-x: hidden;}

@media (max-width: 768px) {
  :root {
    --font-size-12: 0.22rem;
    --font-size-14: 0.24rem;
    --font-size-16: 0.26rem;
    --font-size-18: 0.28rem;
    --font-size-20: 0.3rem;
    --font-size-22: 0.32rem;
    --font-size-24: 0.36rem;
    --font-size-32: 0.42rem;
    --font-size-30: 0.4rem;
    --font-size-40: 0.5rem;
    --font-size-60: 0.7rem;
  }
}
@media (max-width: 768px) {
  .pc-only{display: none !important;}
}
@media (min-width: 768px) {
  .mobile-only{display: none !important;}
}
.banner{width: 100%;}
.banner img{width: 100%;}
.line-btn {
  display: inline-block;
  
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 6px;
  font-size: var(--font-size-18);
  font-family: inherit;
  cursor: pointer;
  transition: 
    background 0.22s cubic-bezier(.4,0,.2,1),
    color 0.22s cubic-bezier(.4,0,.2,1),
    border-color 0.22s cubic-bezier(.4,0,.2,1);
  box-sizing: border-box;
}

.line-btn:hover {
  background: #fff;
  color: var(--blue-color);
  border-color: #fff;
}
.dark-btn{
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  font-size: var(--font-size-18);
  font-family: inherit;
  cursor: pointer;
  transition: 
    background 0.22s cubic-bezier(.4,0,.2,1),
    color 0.22s cubic-bezier(.4,0,.2,1),
    border-color 0.22s cubic-bezier(.4,0,.2,1);
  box-sizing: border-box;
}
.dark-btn:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

@media (max-width: 768px) {
  .line-btn {
    font-size: var(--font-size-16);
  }
}
.required-fields{font-size: var(--font-size-18);
  color: var(  --primary-color);
  margin-top: 0.1rem;
  line-height: 1.4;
}