/* ------------------------------
変数設定
------------------------------ */
:root {
  --gray01 : #eeeeee;
  --gray02 : #8a8a8a;
  --black01 : #333333;
  --white01 : #ffffff;
  --red01 : #e6001e;
  --green01 : #47a6c2;
  --green02 : #f7f7e9;
  --green03 : #a6cec2;
  --px10: 0.625rem;
  --px12: 0.75rem;
  --px14: 0.875rem;
  --px16: 1rem;
  --px18: 1.125rem;
  --px20: 1.25rem;
  --px22: 1.375rem;
  --px24: 1.5rem;
  --px26: 1.625rem;
  --px28: 1.75rem;
  --px30: 1.875rem;
  --px32: 2rem;
  --px34: 1.125rem;
  --px36: 1.25rem;
  --px38: 1.375rem;
  --px40: 1.5rem;
  --vwMax: 1920; /* PC */
  --vwLarge: 1280; /* PC */
  --vwSmall: 375; /* SP */
  /*  *//* calc( ( 100vw / var(--vwLarge) ) * xx ) *//* PC */
  /*  *//* calc( ( 100vw / var(--vwSmall) ) * xx ) *//* SP */
}

/* ------------------------------
Basic Style and Tools
------------------------------ */
html { 
  scroll-behavior: smooth; color: var(--black01); letter-spacing: 0.03em;
}
.cap__upper { 
  text-transform: uppercase;
}
.wbr { 
  word-break: keep-all; overflow-wrap: break-word;
}
.flex__box {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  & > * {
    flex-shrink: 1; flex-grow: 0;
  }
}
/* ------------------------------
Header
------------------------------ */
.seo__text {
  & .content {
    width: 100%; max-width: 1000px; box-sizing: border-box; padding: 5px 10px; margin: 0 auto;
    & h1 {
      font-size:var(--px10);
    }
  }
}
.header {
  background: var(--white01); position: sticky; left: 0; top:0; width: 100%; box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1);
  & .content {
    width: 100%; max-width: 1000px; box-sizing: border-box; padding: 10px; margin: 0 auto;
    & .logo__box {
      flex-basis: 34%;
    }
    & .btn__box {

    }
    & .tel__box {

    }
  }
  & .navi {
    background: var(--green02);
    & ul {
      list-style: none; padding: 0 10px;
      & li {
        flex-basis: calc( 100% / 7 ); background: var(--green02); font-size: var(--px14); box-sizing: border-box; border-left: var(--gray02) solid 1px;
        & a {
          display: block; position: relative; font-weight: 400; text-decoration: none; width: 100%; padding: 10px 0; text-align: center; font-feature-settings: "palt";
          &.active,&:hover {
            &::after {
              content: ''; display: block; position: absolute; bottom:0; left: 0; width: 100%; height: 4px; background: var(--green03);
            }
          }
          &.no__link {
            pointer-events: none; color: var(--gray02);
            &:hover {
              &::after {
                display: none;
              }
            }
          }
        }
        &:last-of-type {
          border-right: var(--gray02) solid 1px;
        }
      }
    }
   }
}


/* ------------------------------
Main
------------------------------ */

.main {
  & .content {
    width: 100%; max-width: 1000px; box-sizing: border-box; padding: 10px; margin: 0 auto;
  }
}

/* ------------------------------
Footer
------------------------------ */
.footer {
  background: var(--gray01);
  & .page__top {
    position: sticky; right: 10px; bottom:10px; width: 60px; height: 60px; float: right; margin: -60px 0 0 0;
    & a {
      display: flex; flex-wrap: wrap; justify-content: center; width: 100%; height: 100%; text-align: center; background: var(--gray02); color: var(--white01); text-decoration: none; align-items: center; font-size: var(--px12); border-radius: 50%;
    }    
  }
  & .content {
    width: 100%; max-width: 1000px; box-sizing: border-box; padding: 10px; margin: 0 auto;
  }
  & .link__box {
    background: var(--white01);
    & ul {
      font-size: var(--px16); list-style: none; margin: 0 0 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap:10px;
      & li {
        
      }
    }
  }
  & .author__box {
    & .tel__box {
      padding: 0 0 10px 0; border-bottom: var(--black01) solid 1px;
    }
    & .logo__box {
      padding: 10px 0 0 0;
    }
  }
  & .contact__box {
    flex-basis: 160px;
    & a {
      color: var(--white01); background: var(--red01); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: var(--px14); text-decoration: none; border-radius: 10px; height: 80px;
    }
  }
  & .copyright {
    background: var(--white01);
    & .content {
      & p {
        font-size: var(--px12); text-align: center;
        & a {
          display: block; 
        }
      }
    }
  }
}