/* ===========================================
   common-top.css
   総合TOPサイト 共通スタイル
   =========================================== */

:root {
  /* メインカラー(オレンジ) */
  --top-color-primary: #F49000;
  --top-color-primary-light: #F5AA00;
  /* テキストカラー */
  --top-color-text-base: #3E3A39;
  --top-color-text-light: #666666;
  --top-color-text-white: #FFFFFF;
  /* 背景色 */
  --top-color-bg-base: #F8F7F4;

  /* フォント */
  --top-font-family-base: 'Noto Sans JP', sans-serif;
  --top-font-size-sm: 14px;
  --top-font-size-md: 16px;
  --top-font-size-lg: 32px;
  --top-container-width: 1000px;
}


*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--top-font-family-base);
  font-size: var(--top-font-size-md);
  color: var(--top-color-text-base);
  background-color: var(--top-color-bg-base);
  margin: 0 auto;
  height: auto;
}


.top_container {
  max-width: var(--top-container-width);
  min-width: 0;
  margin: 0 auto;
}

/* SP改行用ユーティリティ BP 576px */
.top_br_sp {
  display: none;
}

@media screen and (max-width: 576px) {
  .top_br_sp {
    display: inline;
  }
}


/* リンククリック時の青枠を消す */ 
/* タブフォーカスごと消してしまうとアクセシビリティに問題があるため、そこは残す */
/* a:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
} */

/* 汎用アニメーション　ふわっと出る */
/* ===========================================
   top fade animation
   =========================================== */

.top_fade {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.top_fade.is_visible {
  opacity: 1;
  transform: translateY(0);
}