@charset "UTF-8";
.ttl-area.static { padding: 0; border-bottom: 0}
.ttl-area.static .inner { display: flex; align-items: center; min-height: 80px; background: #fff url(../img/static/bg-static_pc.png) no-repeat center right/auto 100%}
@media screen and (min-width: 769px) {
  .ttl-area.static .inner { min-height: 180px}
  .ttl-area.static h1 { justify-content: center; width: 100%}
}
/* --------------------
STATIC COMMON STYLE
-------------------- */
.main-static .bg-white { max-width: 900px; margin: 20px auto 0; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 3px 3px 3px rgba(0,0,0,.1)}
.main-static .bg-white + .banner { margin-top: 30px}
.main-static .bg-green { margin: 30px auto; padding: 10px; color: #fff; background:rgba(0,163,175,.9); border-radius: 3px}
.main-static .helpdesk { width: fit-content; margin: 50px auto 0; padding: 10px 15px; line-height: 1.5; border: 1px solid #71686c}
@media screen and (min-width: 769px) {
  .main-static .bg-white { padding: 40px 20px; box-shadow: 5px 5px 5px rgba(0,0,0,.1)}
  .main-static .bg-white + .banner { margin-top: 100px}
  .main-static .bg-green { width: fit-content}
}
/* --------------------
COMPANY STYLE
-------------------- */
.bg-white.service h2 { margin-bottom: 20px; font-size: 17px}
.bg-white.service h2 figure { display: flex; justify-content: center; align-items: center; margin-bottom: -20px!important}
.bg-white.service h2 figure img { max-width: 100px; margin-right: 10px}
@media screen and (min-width: 769px) {
  .bg-white.service h2 { margin-bottom: 40px; font-size: 24px}
  .bg-white.service h2 figure img { max-width: 140px}
}
/* --------------------
CLIENT・SERVICE・SITEMAP STYLE
-------------------- */
.bg-white.client h3, .bg-white.service h3, .bg-white.sitemap h3 { margin-bottom: 20px; padding-bottom: 10px; font-size: 16px; font-weight: 500; text-align: left; border-bottom: 1px dashed #47495b}
.bg-white.service .two-column .box { padding: 15px; border: 1px solid #47495b; border-radius: 8px}
.bg-white.service .two-column .box .ttl { margin-bottom: 10px; font-size: 16px; ; font-weight: 500; text-align: center}
.bg-white.service .btn.entry, .bg-white.client .btn.corp, .bg-white.service .btn.corp { margin-top: 30px}
@media screen and (max-width: 768px) {
  .bg-white.service .two-column .box:nth-of-type(n+2) { margin-top: 20px}
}
@media screen and (min-width: 769px) {
  .bg-white.client h3, .bg-white.service h3 { font-size: 18px}
  .bg-white.service .two-column .box { display: flex; flex-direction: column; width: 49%;}
  .bg-white.service .two-column .text { flex-grow: 1}
  .bg-white.service .two-column .box .ttl { font-size: 18px}
}
/* --------------------
SITEMAP STYLE
-------------------- */
.bg-white.sitemap { font-size: 14px}
.bg-white.sitemap h2 { margin-bottom: 10px; font-size: 17px}
.ul-pipe { display: flex; justify-content: flex-start; flex-wrap: wrap; font-size: 14px; line-height: 2}
.ul-pipe li::after { content: "|"; margin: 0 5px}
.ul-pipe li a { color: #71686c}
.ul-search { display: flex; justify-content: space-between; flex-wrap: wrap}
.ul-search li { width: 100%}
.ul-search li a { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 45px; padding: 10px 20px; color: #fff; font-size: 14px; background: #47495b; border-radius: 6px}
.ul-search li .icon-search  { display: inline-block; width: 20px; height: 20px; margin-right: 10px; background: url(../img/common/icon-search-w.png) no-repeat top 3.5px right/auto 16px}
.ul-design01 { margin-left: 1em; line-height: 2}
.ul-design01 li { list-style: disc}
.ul-design01 li::marker { color: #00a3af}

.ul-design02 { display: flex; justify-content: space-between; flex-wrap: wrap}
.ul-design02 li { width: 100%}
.ul-design02 li a { display: flex; justify-content: center; align-items: center; height: 50px; padding: 0 10px; color: #47495b; border: 1px solid #47495b; border-radius: 6px}
.bg-white.sitemap .ttl { color: #17253b; font-weight: 500}
.bg-white.sitemap .sub-ttl { color: #17253b; font-size: 14px; font-weight: bold}
.bg-white.sitemap .btn.entry { max-width: 360px; min-width: 280px; margin: 30px auto 0}
@media screen and (max-width: 768px)  {
  .ul-search li:nth-child(n+2), .ul-design02 li:nth-child(n+2) { margin-top: 10px}
}
@media screen and (min-width: 769px) {
  .bg-white.sitemap { font-size: 14px}
  .bg-white.sitemap h2 { font-size: 24px}
  .bg-white.sitemap .btn.entry { font-size: 16px}
  .ul-pipe, .ul-design01 { line-height: 1.8}
  .ul-search li { width: 49%; margin-top: 10px}
  .ul-search li:first-child { width: 100%; margin-top: 0}
  .ul-design02 li { width: 49%}
  .ul-design02 li:nth-child(n+3) { margin-top: 10px}
}

/* --------------------
TABLE STYLE（SERVICE）
-------------------- */
.table-design01 { width: 100%}
.table-design01 th, .table-design01 td { border: 1px solid #eee; padding: 10px}
.table-design01 th { color: #fff; background:rgba(0,163,175,.8);}
@media screen and (max-width: 768px) {
  .table-design01 th, .table-design01 td { display: block; width: 100%}
  .table-design01 td { border-top: 0}
}
@media screen and (min-width: 769px) {
  .table-design01 th, .table-design01 td { padding: 20px}
}	
/* --------------------
POLICY STYLE（CLIENT・SERVICE）
-------------------- */
.bg-white.policy h2 { padding-bottom: 10px; font-size: 17px; font-weight: 500; text-align: left; border-bottom: 1px dashed #47495b}
.bg-white.service h2 figure { argin-bottom: -30px!important}
.bg-white.policy ul { margin-left: 1em; line-height: 1.5}
.bg-white.policy ul li { list-style: square}
.bg-white.policy ul li::marker { color: #00a3af}
.policy-helpdesk, .client-helpdesk, .service-helpdesk { margin-top: 50px; text-align: center}
.policy-helpdesk .ttl, .client-helpdesk .ttl, .service-helpdesk .ttl { margin-bottom: 10px; color: #47495b; font-size: 16px; font-weight: 500}
.policy-helpdesk .helpdesk { margin: auto; text-align: left}
@media screen and (max-width: 768px) {
  .policy-helpdesk .helpdesk { width: 100%}
}
@media screen and (min-width: 769px) {
  .bg-white.policy { text-align: left}
  .bg-white.policy h2 { font-size: 18px}
  .policy-helpdesk .ttl, .client-helpdesk .ttl, .service-helpdesk .ttl { font-size: 18px}
}
/* --------------------
REGISTER STYLE
-------------------- */
.main-register .form-area { max-width: 900px; margin: 20px auto 0; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 3px 3px 3px rgba(0,0,0,.1)}
.main-register .form-area .label { margin: 30px 0 10px; font-weight: 500}
.main-register .form-area .label:first-of-type { margin-top: 0}
.main-register .form-area .btn.entry { min-width: 280px; margin: 30px auto 0}
@media screen and (min-width: 769px) {
  .main-register .form-area { box-shadow: 5px 5px 5px rgba(0,0,0,.1)}
  .main-register .form-area .radio { width: 19%; margin-right: 1.25%}
  .main-register .form-area input[type="radio"] + .radio:nth-of-type(3n) { margin-right: 1.25%}
  .main-register .form-area input[type="radio"] + .radio:nth-of-type(5n) { margin-right: 0}
  .main-register .form-area input[type="radio"] + .radio:nth-of-type(4),
  .main-register .form-area input[type="radio"] + .radio:nth-of-type(5) { margin-top: 0}
  .main-register .form-area input[type="radio"] + .radio:nth-of-type(n+6) { margin-top: 10px}
}

.main-register .banner { max-width: 100%; margin: 90px auto 50px}
.main-register .banner .fukidashi { background: #fa8a8a}
.main-register .banner .fukidashi span { position: relative}
.main-register .banner .fukidashi span::after { border-color: transparent transparent transparent #fa8a8a}
.main-register .banner .fukidashi big { font-size: 12.5px}
@media screen and (max-width: 600px) {
  .main-register .banner { padding-bottom: 0}
  .main-register .banner .fukidashi { display: flex; top: -80px; left: 10%; width: 90px; height: 90px}
  .main-register .banner .staff { top: -110px; left: 40%; width: 30%; transform: scale(1, 1); z-index: -1}
  .main-register .banner .box-text { padding: 15px}
}
@media screen and (min-width: 601px) {
  .main-register .banner { margin: 30px auto 50px}
}

/* --------------------
NOT FOUND STYLE
-------------------- */
.ul-not-found { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 30px}
.ul-not-found li { width: 100%}
.ul-not-found li a { position: relative; display: flex; justify-content: center; align-items: center; height: 55px; color: #fff; line-height: 1.3; background:rgba(23,37,59,.9)}
.ul-not-found li a i { position: absolute; right: 10px}
@media screen and (max-width: 600px) {
  .ul-not-found li:nth-child(n+2) { margin-top: 10px}
}
@media screen and (min-width: 601px) {
  .ul-not-found li { width: 49.5%}
  .ul-not-found li:nth-child(n+3) { margin-top: 10px}
}