@charset "UTF-8";

/**********************************************************************
  ヘッダー用css
**********************************************************************/

/* headerコンテナ Start */
.container .header-container .header-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: 100px;

  .header-logo { z-index: 10; }  
  .header-contents {
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0px;
    font-size: 0.8rem;

    button,
    .button-block a {
      padding: 8px 10px;
      font-size: 0.8rem;
      background-color: var(--color-text);
    }
    .font-accessibility {
      display: flex;
      justify-content: start;
      align-items: center;
      flex-direction: row;
      gap: 0.4rem;
      padding: 4px 8px 6px 8px;
      background-color: var(--color-back-font-size-change);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      line-height: 1.2rem;
      button {
        padding: 4px 10px 6px 10px;
        background-color: var(--color-back-green);
      }
    }
  }
}
/* headerコンテナ End */

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1279px（タブレット）以下 */
@media screen and (max-width: 1279px) {
  /* headerコンテナ Start */
  .container .header-container .header-in .header-contents .font-accessibility {
    display: none;
  }
  /* headerコンテナ End */
}

/* 767px（スマホ）以下 */
@media screen and (max-width: 767px) {
  /* headerコンテナ Start */
  .container .header-container {
    box-shadow: 0px 7px 5px -5px var(--color-shadow);
    .header-in .header-contents { display: none; }
  }
  /* headerコンテナ End */
}