@charset "UTF-8";
/* ============================================
   font setteing
============================================ */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
/* ============================================
   global setting
============================================ */
* {
  margin: 0;
  padding: 0;
}
/* * {
  outline: 1px solid pink;
} */
html {
  font-size: 62.5% !important;
}
img {
  width: 100%;
}
/* ============================================
   responsive
============================================ */
.pc {
  display: none;
}
.tab {
  display: none;
}
.sp {
  display: block;
}
/* タブレット以上 */
@media screen and (min-width: 451px) {
  .sp {
    display: none;
  }
  .tab {
    display: block;
  }
}

/* PC以上 */
@media screen and (min-width: 1001px) {
  .tab {
    display: none;
  }
  .pc {
    display: block;
  }
} /* ============================================
   CSS variables
============================================ */
:root {
  /* カラー */
  --color-primary: 1rem;
  --color-secondary: 1rem;
  --color-accent: 1rem;
  --color-background: 1rem;
  --color-surface: 1rem;
  --color-border: 1rem;
  --color-text: 1rem;
  --color-muted: 1rem;
  --color-link: 1rem;
  --color-hover: 1rem;
  --color-red: #ff0000;
  --color-white: #fff;
  --color-black: #000;
  --color-basicgray: #676767;

  /* フォント系 */
  --font-family-ja: "Noto Sans JP", sans-serif;
  --font-family-en: "Open Sans", sans-serif;
  --font-headline-01: 1.6rem;
  --font-headline-02: 2.4rem;
  --font-headline-03: 2rem;
  --font-headline-04: 1.8rem;
  --font-size-16: 1.6rem;
  --font-size-14: 1.4rem;
  --font-size-12: 1.2rem;
  --font-size-10: 1rem;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-base: 1rem;
  --letter-spacing: 1rem;

  /* 余白・間隔系 */
  --spacing-section: 50px;
  --spacing-element: 15px;
  --spacing-xs: 1rem;
  --spacing-sm: 1rem;
  --spacing-md: 1rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1rem;
  --gap-base: 1rem;
  --padding-base: 1rem;
  --margin-base: 1rem;
  /* サイズ系 */
  --container-width: 1rem;
  --max-width: 1rem;
  --header-height: 1rem;
  --footer-height: 1rem;
  --sidebar-width: 1rem;
  --avatar-size: 1rem;
  --icon-size: 1rem;
  /* ボーダー・角丸 */
  --border-radius-sm: 1rem;
  --border-radius-md: 1rem;
  --border-radius-lg: 1rem;
  --border-width: 1rem;
  --border-color: 1rem;
  /* 影・透明度 */
  --box-shadow-sm: 1rem;
  --box-shadow-md: 1rem;
  --box-shadow-lg: 1rem;
  --opacity-disabled: 1rem;
  --opacity-hover: 1rem;
  /* トランジション・アニメーション */
  --transition-speed: 1rem;
  --transition-ease: 1rem;
  --animation-duration: 1rem;
  --animation-easing: 1rem;
}
@media (min-width: 450px) {
}
@media (min-width: 1000px) {
  :root {
    /* カラー */
    --color-primary: 1rem;
    --color-secondary: 1rem;
    --color-accent: 1rem;
    --color-background: 1rem;
    --color-surface: 1rem;
    --color-border: 1rem;
    --color-text: 1rem;
    --color-muted: 1rem;
    --color-link: 1rem;
    --color-hover: 1rem;
    --color-red: #ff0000;
    --color-white: #fff;
    --color-black: #000;
    --color-basicgray: #676767;

    /* フォント系 */
    --font-size-1: 1.6rem;
    --font-size-2: 4.8rem;
    --font-size-3: 2.4rem;
    --font-size-4: 1.8rem;
    --font-size-text: 1.6rem;
    --font-size-medium: 1.3rem;
    --font-size-small: 1rem;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-base: 1rem;
    --letter-spacing: 1rem;
    /* 余白・間隔系 */
    --spacing-section: 150px;
    --spacing-element: 30px;
    --spacing-xs: 1rem;
    --spacing-sm: 1rem;
    --spacing-md: 1rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1rem;
    --gap-base: 1rem;
    --padding-base: 1rem;
    --margin-base: 1rem;
  }
}
/* ============================================
   typography
============================================ */
h1 {
  font-family: var(--font-family-en);
  font-size: var(--font-size-1);
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--color-basicgray);
}
h2 {
  font-family: var(--font-family-en);
  font-size: var(--font-headline-02);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  line-height: 1.5;
  margin-bottom: var(--spacing-element);
  color: var(--color-basicgray);
}
h3 {
  font-family: var(--font-family-en);
  font-size: var(--font-headline-03);
  margin-bottom: var(--spacing-element);
  color: var(--color-basicgray);
}

h4 {
  font-family: var(--font-family-ja);
  font-size: var(--font-headline-04);
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--spacing-element);
  color: var(--color-basicgray);
}
p {
  font-family: var(--font-family-ja);
  font-size: var(--font-size-text);
}
a {
  transition: 0.5s;
}

@media (min-width: 1000px) {
  h2 {
    font-size: 4.8rem;
  }
  h2 span {
    font-size: 1.3rem;
  }
}
/* ============================================
   section-ttl
============================================ */
h2.section-ttl {
  font-family: var(--font-family-en);
  font-size: 2.8rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
  margin-bottom: 15px;
  color: var(--color-basicgray);
  display: flex;
  align-items: center;
}
h2.section-ttl span {
  display: none;
}
@media (min-width: 1000px) {
  h2.section-ttl {
    font-size: 2.8rem;
  }
}
/* ============================================
   list
============================================ */
ul {
}
li {
  font-family: var(--font-family-en);
  font-size: var(--font-size-14);
  color: var(--color-basicgray);
}
/* ============================================
   layout
============================================ */
section {
  margin-bottom: 50px;
}
.inr {
  max-width: 90%;
  margin: 0 auto;
}
@media (min-width: 1000px) {
  .inr {
    max-width: 90%;
    margin: 0 auto;
  }
}
@media (min-width: 1200px) {
  section {
    margin-bottom: 200px;
  }
  .inr {
    max-width: 80%;
    margin: 0 auto;
  }
}
/* ============================================
   btn
============================================ */
.btn {
  padding: 2rem 5rem;
  background-color: var(--color-red);
  color: var(--color-white);
  border: none;
  border-radius: 0.5rem;
  font-size: var(--font-size-text);
  cursor: pointer;
  transition: background-color 0.1s ease;
  text-decoration: none; /* aタグ用 */
  display: inline-block;
  margin-bottom: var(--spacing-element);
}
.btn:hover {
  opacity: 0.5;
}
.hover {
  color: #0D99FF;
}
/* ============================================
   back to top
============================================ */
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  background-color: #0D99FF;
  color: white;
  padding: 0;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-bold);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: translateY(20px);
  z-index: 999;
}

#backToTop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
@media (min-width: 1000px) {
  a:hover {
    color: #0D99FF;
    transition: 0.5s;
  }
  #backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
    background-color: #0D99FF;
    color: white;
    padding: 0;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-bold);
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: translateY(20px);
    z-index: 999;
  }
}