@charset "UTF-8";

/* ------------------------------
変数設定
------------------------------ */
:root {
  --bg-color-01: #ffffff;
  --bg-color-02: #f1f1f1;
  --text-color-01: #000000;
  --text-color-02: #404040;
  --vwSmall: 375; /* SP */
}

/* ------------------------------
HEADER
------------------------------ */
.header {
  background: var(--bg-color-01); padding: 2rem;
  & .content {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; max-width: 140rem; margin: 0 auto;
    & .site__name {
      font-size: 2rem; font-weight: 500; color: var(--text-color-01); margin: 0 0 0 0; flex-basis: calc( 100% - 12.7rem );
    }
    & .logo__box {
      flex-basis: 12.7rem;
      & a {
        display: block;
      }
    }
  }
}
@media screen and ( max-width:767px) {
  .header {
    & .content {
      & .site__name {
        flex-basis: calc( 100% - ( ( 100vw / var(--vwSmall) ) * 100 ) ); font-size: calc( ( 100vw / var(--vwSmall) ) * 15 );
      }
      & .logo__box {
        flex-basis: calc( ( 100vw / var(--vwSmall) ) * 100 );
      }
    }
  }
}

/* ------------------------------
FOOTER
------------------------------ */
.footer {
  background: var(--bg-color-01); color: var(--text-color-02); padding: 5rem 2rem 2rem 2rem;
  & .content {
    display:flex; flex-wrap:wrap; justify-content:space-between; width: 100%; max-width: 140rem; margin: 0 auto;
    & .site__name {
      flex-basis: 100%; text-align: center; font-size: 2rem; font-weight: 700; margin: 0 0 7rem 0;
    }
    & .logo__box {
      flex-basis: 20.3rem; align-self: flex-end;
      & a {
        display: block;
      }
    }
    & .text__box {
      flex-basis: calc( 100% - 20.3rem); padding: 0 0 5rem 0 ; 
    }
    & .link__list {
      list-style: none; margin: 0 0 0 0;
      & ul {
        & li {
          font-size: 1.2rem; margin: 0 0 1rem 0;
          & a {
            color: var(--text-color-02); text-decoration: none; position: relative; display: block; padding: 0 0 0 2rem;
            &:before {
              content: ''; display: block; position: absolute; left: 0.25em; top:0; width: 0.75em; height: 0.875em; clip-path: polygon(0 0 , 0 100% , 100% 50%); background: var(--text-color-02);
            }
            &:hover {
              text-decoration: underline;
            }
          }
        }
      } 
    }
    & .copyright {
      transform: translateY(-2rem); flex-basis: 100%;
      & p {
        font-size: 1.2rem; line-height: 1.77;
      }
    }
  }
}
@media screen and ( max-width:767px) {
  .footer {
    & .content {
      justify-content: center;
      & .text__box {
        flex-basis: 100%;
      }
      & .logo__box {

      }
      & .link__list {
        
      }
      & .copyright {
        transform: none; margin: 2rem 0 0 0; flex-basis: 100%; text-align: center;
      }
    }
  }
}

/* ------------------------------
MAIN
------------------------------ */
.main {
  background: var(--bg-color-02);
  & .dummy__content {
    width: 100%; max-width: 144rem; margin: 0 auto; padding: 5rem 2rem;
    & p {
      font-size: 1.6rem;
    }
  }
}