@charset "utf-8";

.footer {color: #fff;}
.footer__logo {display: block;}
.footer_top {background: #333; padding: 50px 0;}
.footer_bot {background: #1b1b1b; color: #afafaf; padding: 25px 0;}
.footer .copy {font-size: 14px; font-weight: 300;}
.footer__sns {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.footer__sns a {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #dfdfdf; border-radius: 50%; color: #000;}

@media screen and (max-width: 1399px) {
  .footer {font-size: 14px;}
  .footer_top {padding: 35px 0;}
  .footer_bot {padding: 15px 0;}
  .footer .copy {font-size: 12px;}
}

.footer--simple1 .footer__logo {display: block; margin: 0 auto 20px auto;}
.footer--simple1 .footer__info .tag {display: inline-block; margin-right: .5em;}
.footer--simple1 .footer__info .addr {margin-bottom: .5em;}
.footer--simple1 .footer__info .contact {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.footer--simple1 .footer__info .contact .item {display: flex; align-items: center;}
.footer--simple1 .footer__info .contact .item::after {display: block; content: ""; width: 1px; height: 1em; margin: 0 1em; background: #afafaf;}
.footer--simple1 .footer__info .contact .item:last-child::after {display: none;}

.edit-base_container_size--1024 .footer--simple2 .container {width: calc(1200px);}
.footer--simple2 .footer_top .container {display: flex; align-items: flex-start; gap: 60px;}
.footer--simple2 .footer__logo {margin-right: auto; flex-shrink: 0;}
.footer--simple2 .footer__info .contact {display: flex; flex-wrap: wrap; gap: 1em;}
.footer--simple2 .ico_info {flex-shrink: 0;}
.footer--simple2 .ico_info .key {font-size: 16px; font-weight: 700;}
.footer--simple2 .ico_info .val {display: flex; align-items: center;}
.footer--simple2 .ico_info .val .ico {flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: #000; font-size: 16px; margin-right: 10px;}
.footer--simple2 .ico_info .val .con {font-size: 24px;}
.footer--simple2 .footer__sns a {border-radius: 3px; border: 1px solid #dfdfdf; background: none; color: #dfdfdf;}

.edit-base_container_size--1024 .footer--simple3 .container {width: calc(1200px);}
.footer--simple3 .copy {font-size: 16px;}
.footer--simple3 .footer__logo {margin-right: auto; flex-shrink: 0;}
.footer--simple3 .footer_top .container {gap: 50px;}
.footer--simple3 .footer__info .contact {display: flex; flex-wrap: wrap; gap: 0em 1em;}
.footer--simple3 .footer__etc {flex-shrink: 0;}
.footer--simple3 .footer__etc .links {gap: .7em; margin-bottom: 15px;}
.footer--simple3 .footer__etc .boxed_link {display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 50px; border: 1px solid #fff;}
.footer--simple3 .footer__icons {display: flex; gap: 10px;}
.footer--simple3 .footer__icons .icon {width: 70px; height: 70px; border-radius: 50%; background: #dfdfdf; font-size: 0;}

@media screen and (max-width: 1399px) {
  .footer--simple1 .footer__logo {width: 120px; margin-bottom: 10px;}

  .footer--simple2 .footer_top .container {flex-wrap: wrap; gap: 20px 40px;}
  .footer--simple2 .footer__info {width: 100%;}
  .footer--simple2 .ico_info.call {margin-right: 50px;}
  .footer--simple2 .ico_info .key {font-size: 15px; margin-bottom: 0.5em;}
  .footer--simple2 .ico_info .val .ico {width: 28px; height: 28px; font-size: 15px;}
  .footer--simple2 .ico_info .val .con {font-size: 18px;}

  .footer--simple3 .copy {font-size: 14px;}
  .footer--simple3 .footer_top .container {flex-wrap: wrap;}
  .footer--simple3 .footer__etc {margin-left: auto;}

}

@media screen and (max-width: 767px) {
  .footer--simple1 .footer__logo {margin-bottom: 20px;}
  .footer--simple1 .footer__info .tag {display: block;}
  .footer--simple1 .footer__info .contact .item {margin: 0 .5em;}
  .footer--simple1 .footer__info .contact .item::after {display: none;}
  .footer--simple2 .footer_bot .container {gap: 20px; padding: 10px 0;}

  .footer--simple3 .footer_top .container {flex-direction: column; gap: 20px 0;}
  .footer--simple3 .footer__etc {margin-left: 0;}
  .footer--simple3 .addr {margin-bottom: 1em;}
  .footer--simple3 .copy {margin-top: 1em;}
}