@charset "UTF-8";

/* ===========================================
   Variables
=========================================== */
footer {
  /* Colors */
  --main-base: #1e8e43;
  --main-light: #58b677;
  --main-pale: #e9efd9;
  --sub-pale: #fef6e6;
  --link: #3964bf;
  --gray: #ccc;
  --gray-pale: #f3f3f3;
  --black: #000;
  --black-light: #333;
  --black-pale: #666;
  --white: #fff;

  /* Typography */
  --font-family: "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic", sans-serif;
  --font-small: 12px;
  --font-base: 13px;
  --font-large: 14px;
  --font-xlarge: 16px;
  --letter-base: 0.08em;
  --letter-wide: 0.18em;

  /* Layout */
  --site-width: 1120px;
}

/* ===========================================
   Reset & Base
=========================================== */
footer {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

footer {
  font-family: var(--font-family);
  font-size: var(--font-base);
  line-height: 1.4;
  letter-spacing: var(--letter-base);
  color: var(--black-light);
  -webkit-font-smoothing: antialiased;
}

footer ul {
  list-style: none;
}

footer a {
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
}

footer a:hover {
  opacity: 0.7;
}

footer img {
  max-width: 100%;
  height: auto;
}

/* ===========================================
   Box Layouts
=========================================== */
footer .box01,
footer .box02,
footer .box03 {
  color: var(--black-light);
  font-family: var(--font-family);
  letter-spacing: var(--letter-base);
}

/* ===========================================
   Escalation Menu
=========================================== */
footer .escalation {
  position: relative;
  padding: 10px 0 0;
  z-index: 100;
}

footer .escalation__heading {
  margin: 0 0 10px;
  color: var(--main-base);
  font-weight: bold;
  text-align: center;
}

footer .escalation-nav {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

footer .escalation-nav__list {
  position: relative;
  margin: 0 15px;
  padding-bottom: 20px;
}

footer .escalation-nav__list:not(:last-child)::before {
  display: block;
  position: absolute;
  top: calc(50% - 10px);
  right: -24px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: url("../img/nav_arrow.svg") no-repeat left top / 18px 18px;
  content: "";
}

footer .escalation-nav__item {
  display: inline-block;
  width: 240px;
  padding: 15px 0;
  transition: 0.2s;
  border: 3px solid var(--main-light);
  border-radius: 30px;
  background: var(--white);
  color: var(--main-base);
  font-size: var(--font-large);
  font-weight: bold;
  letter-spacing: var(--letter-wide);
  line-height: 1;
  text-align: center;
}

footer .escalation-nav__item:hover {
  background: var(--main-base);
  color: var(--white);
  opacity: 1;
}

/* ===========================================
   Footer Copy
=========================================== */
footer .footer-copy {
  padding: 60px 0 140px;
  background-image: url("../img/bg_footer_copy.svg");
  background-repeat: no-repeat;
  background-position: center bottom 30px;
  background-size: 740px 115px;
}

footer .footer-copy__text {
  margin: 0 0 1em;
  color: var(--black);
  font-size: var(--font-small);
  line-height: 2;
  text-align: center;
}

/* ===========================================
   Footer Utility
=========================================== */
footer .footer-utility {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: var(--site-width);
  padding: 0;
  margin: 0 auto;
}

footer .footer-utility__box {
  padding: 35px 0;
}

footer .footer-utility__list {
  margin: 0 1em 15px;
}

footer .footer-utility__item {
  color: var(--black);
  font-size: var(--font-small);
}

footer .footer-utility__item:hover {
  color: var(--black);
  text-decoration: underline;
  opacity: 1;
}

footer .footer-utility__heading {
  width: 100%;
  margin: 10px 0;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

footer .footer-utility__pimage {
  width: 80px;
  margin: 10px auto 0;
}
@media screen and (min-width: 769px) {
    footer .footer-utility__pimage > img {
      width: 80%;
      margin: 0 auto;
      display: block;
    }
}

/* ===========================================
   Footer Login
=========================================== */
footer .footer-login {
  width: var(--site-width);
  margin: 0 auto;
  padding: 50px 0 100px;
  text-align: right;
}

footer .button-login {
  display: inline-block;
  padding: 10px 20px;
  border: 3px solid var(--main-light);
  border-radius: 100px;
  background: var(--white);
  color: var(--main-base);
  font-size: var(--font-small);
  font-weight: bold;
}

footer .button-login:hover {
  color: var(--main-base);
  text-decoration: none;
  opacity: 1;
  background: var(--main-pale);
}

/* ===========================================
   Copyright
=========================================== */
footer .copyright {
  display: block;
  padding: 20px 0;
  background: var(--main-base);
  color: var(--white);
  font-size: var(--font-small);
  text-align: center;
  font-family: var(--font-family);
  letter-spacing: var(--letter-base);
}

footer .copyright a {
  color: var(--white);
}

footer .copyright a:hover {
  opacity: 0.8;
}

/* ===========================================
   Responsive (SP)
=========================================== */
@media screen and (max-width: 768px) {
  footer{
    --font-small: 2.5vw;
    --font-base: 3vw;
    --font-large: 3.5vw;
  }

  /* Escalation */
  footer .escalation {
    padding: 2vw;
  }

  footer .escalation__heading {
    margin: 0 0 2vw;
  }

  footer .escalation-nav__list {
    margin: 0 0.8vw;
    padding-bottom: 2vw;
  }

  footer .escalation-nav__list:not(:last-child)::before {
    display: none;
  }

  footer .escalation-nav__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 18vw;
    height: 16vw;
    padding: 0;
    border-radius: 0.5vw;
    font-size: var(--font-small);
    box-shadow: 0 0.5vw 0.25vw #ddd;
  }

  /* Footer Copy */
  footer .footer-copy {
    padding: 4vw 3vw 15vw;
    background-position: center bottom 3vw;
    background-size: 75vw auto;
  }

  footer .footer-copy__text {
    font-size: var(--font-small);
    line-height: 1.2;
  }

  /* Footer Utility */
  footer .footer-utility {
    padding: 0 4vw;
  }

  footer .footer-utility__box {
    padding: 5vw 0;
  }

  footer .footer-utility__list {
    width: 50%;
    margin: 0;
    line-height: 1.5;
    text-align: center;
  }

  footer .footer-utility__list:nth-child(odd) {
    text-align: right;
  }

  footer .footer-utility__list:nth-child(even) {
    text-align: left;
  }

  footer .footer-utility__list:not(:nth-child(even)):not(:nth-child(5)):not(:nth-child(6)):not(:nth-child(9)):not(:nth-child(11))::after {
    margin: 0 0.5em;
    color: var(--gray);
    content: "/";
  }

  footer .footer-utility__item {
    color: var(--main-base);
    font-size: 2.5vw;
  }

  footer .footer-utility__heading {
    margin: 5vw 0 1vw;
    font-size: 3vw;
  }

  footer .footer-utility__pimage {
    width: 15%;
    height: 15%;
    margin: 3vw auto 0;
    padding: 0 0 8vw;
  }

  /* Footer Login */
  footer .footer-login {
    width: 100%;
    padding: 8vw 3vw 10vw;
    text-align: right;
  }

  footer .button-login {
    font-size: 2.5vw;
    padding: 2vw 4vw;
  }

  /* Copyright */
  footer .copyright {
    padding: 3.5vw 0;
    font-size: 1.5vw;
  }
}




/*251215追記*/
@media screen and (max-width: 768px) {
    footer{
        padding-bottom: 96px;
    }
}


/*260130 調整*/
footer .box03{
    background-color: #e9efd9;
}
footer .button-login::before {
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    width: 1.88vw;
    height: 3.44vw;
    transform: translateY(-50%);
    background: url("../img/ico_arrow_main-9e4c4b4e39f837c657df3486d59ea1f28428daedfd130d282d6188e6b802266c.svg") no-repeat left top / 1.88vw 3.44vw;
    content: "";
}
@media screen and (min-width: 769px) {
    footer .sp{
        display: none!important;
    }
    footer .footer-login{
        width: 1120px;
        margin: 0 auto;
        padding: 50px 0 100px;
        text-align: right;
    }
    footer .footer-about__text, .footer-login{
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
    }
    footer .button-login{
        transition-duration: .2s;
        display: inline-block;
        position: relative;
        padding: 13px 35px 13px 26px;
        border: 3px solid #58b677;
        border-radius: 100px;
        background: #fff;
        color: #1e8e43;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }
    footer .button-login::before {
        display: block;
        position: absolute;
        top: 50%;
        right: 16px;
        width: 6px;
        height: 11px;
        transform: translateY(-50%);
        background: url("../img/ico_arrow_main-9e4c4b4e39f837c657df3486d59ea1f28428daedfd130d282d6188e6b802266c.svg") no-repeat left top / 6px 11px;
        content: "";
    }
}/*pc-end*/
@media screen and (max-width: 768px) {
    footer .pc{
        display: none!important;
    }
    footer .footer-login{
        padding: 9.38vw 3.13vw 10.94vw;
        text-align: right;
    }
    footer .button-login{
        display: inline-block;
        position: relative;
        padding: 3.13vw 7.5vw 3.13vw 5.13vw;
        border: 0.94vw solid #58b677;
        border-radius: 31.25vw;
        background: #fff;
        color: #1e8e43;
        font-size: 3.13vw;
        font-weight: bold;
        text-align: center;
    }
    footer .escalation{
        position: relative;
        padding: 2.19vw;
    }
    footer .escalation__heading{
        margin: 0 0 2.5vw;
        color: #1e8e43;
        font-weight: bold;
        text-align: center;
    }
    footer .escalation-list__list{
        border-bottom: 1px solid #ccc;
    }
    footer .escalation-list__item{
        display: block;
        padding: 3.13vw 0 3.13vw 31.25vw;
        font-size: 3.13vw;
    }
    footer .escalation__icon{
        margin: 0 2.19vw;
    }
    footer .ico-symptoms{
        display: inline-block;
        width: 6.88vw;
        height: 6.88vw;
        background: url("../img/escalation-nav__list_icon1.svg") no-repeat left top / 100% 100%;
        vertical-align: -0.93vw;
    }
    footer .escalation-list__item span{
        font-size: 3.75vw;
    }
    footer .ico-sick{
        display: inline-block;
        width: 6.88vw;
        height: 6.88vw;
        background: url("../img/escalation-nav__list_icon2.svg") no-repeat left top / 100% 100%;
        vertical-align: -0.93vw;
    }
    footer .ico-hospital{
        display: inline-block;
        width: 6.88vw;
        height: 6.88vw;
        background: url("../img/escalation-nav__list_icon3.svg") no-repeat left top / 100% 100%;
        vertical-align: -0.93vw;
    }
    footer .escalation-list {
        margin: 0 -2.18vw;
        padding: 0;
        list-style: none;
        background: #fff;
        border-top: 1px solid #ccc;
    }
    .footer-copy__text {
        margin: 0 0 1em!important;
        color: #000!important;
        font-size: 3.13vw!important;
        line-height: 1.2!important;
        text-align: center!important;
    }
    footer .footer-copy {
        padding: 4.69vw 3.13vw 18.75vw;
        background-repeat: no-repeat;
        background-position: center bottom 3.13vw;
        background-size: 88.75vw auto;
    }
    footer .footer-utility__item{
        color: #1e8e43;
        font-size: 2.82vw;
    }
    /*テキスト部分*/
    .footer-utility {
        margin: 0!important;
        padding: 4.69vw!important;
        list-style: none!important;
        display: flex!important;
        flex-wrap: wrap!important;
        justify-content: center!important;
    }

    .footer-utility__list {
        width: 50%!important;
        line-height: 1.5!important;
    }

    .footer-utility__list:nth-child(odd) {
        text-align: right!important;
    }

    .footer-utility__list:nth-child(3) {
        width: 67%!important;
    }

    .footer-utility__list:nth-child(4) {
        width: 33%!important;
    }

    .footer-utility__list:nth-child(5) {
        text-align: center!important;
    }

    .footer-utility__list:nth-child(6) {
        width: 100%!important;
    }

    .footer-utility__list:nth-child(7) {
        width: 60%!important;
    }

    .footer-utility__list:nth-child(8) {
        width: 40%!important;
    }

    .footer-utility__list:nth-child(9) {
        width: 100%!important;
    }

    .footer-utility__list:nth-child(10) {
        width: 50%!important;
        text-align: right!important;
    }
    .footer-utility__list:nth-child(11) {
        width: 40%!important;
        text-align: left!important;
    }
    .footer-utility {
        margin: 0!important;
        padding: 4.69vw!important;
        list-style: none!important;
        display: flex!important;
        flex-wrap: wrap!important;
        justify-content: center!important;
    }
    .footer-utility__list:nth-child(10)::after {
        margin: 0 .5em!important;
        color: #ccc!important;
        content: "/"!important;
    }
    footer .footer-utility__heading {
        font-weight: normal;
    }
    .footer-utility__pimage {
        width: 15%;
        height: 15%;
        margin: 10px auto 0;
        padding: 0 0 30px;
    }
    .copyright {
        display: block!important;
        padding: 4.07vw 0!important;
        background: #1e8e43!important;
        color: #fff!important;
        font-size: 1.88vw!important;
        text-align: center!important;
    }
}/*sp-end*/