/*==================================================
# 00. BASE STYLE (基盤設定)
==================================================*/

/*----------------------------------
  01. Charset & Box Sizing Reset
----------------------------------*/
@charset "UTF-8";

* {
  box-sizing: border-box;
  outline: none;
}
*:before,
*:after {
  box-sizing: border-box;
}

/*----------------------------------
  02. Root (HTML & Body) Setting
----------------------------------*/
html {
  font-size: 62.5%; /* 1rem = 10px */
  overflow-x: hidden;
}

body {
  color: #1C1C1C;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.3rem;
  line-height: 1.8;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;

  /* visibility: hidden;
  opacity: 0; */
  transition: opacity 0.4s;
}
/* body.visible {
  visibility: visible;
  opacity: 1;
} */

/*----------------------------------
  03. Tag Reset & Default
----------------------------------*/
h1, h2, h3, h4, h5, h6,
ul, ol {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}
ul, ol {
  list-style: none;
}

a, a:focus,
button, button:focus {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/*----------------------------------
  04. Root Variables
----------------------------------*/
:root {
  --color-main: #5FD2EF;
  --color-accent: #DC143C;
  --color-text: #1C1C1C;
  --color-bg-light: #F9F9F9;

  --font-size-base: 1.3rem;
  --font-size-heading: 2.4rem;
  --line-height-base: 1.8;

  --max-width: 1100px;
  --gutter: 20px;
  --gutter-pc: 40px;

  --header-height-sp: 70px;
  --header-height-pc: 90px;

  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 920px;
  --breakpoint-xl: 1200px;
}

/*----------------------------------
  05. Utility Classes
----------------------------------*/
.u-anchor-adjust {
  margin-top: calc(-1 * var(--header-height-sp));
  padding-top: var(--header-height-sp);
}

@media (min-width: 920px) {
  .u-anchor-adjust {
    margin-top: calc(-1 * var(--header-height-pc));
    padding-top: var(--header-height-pc);
  }
}

/*----------------------------------
  06. PC向けスタイル上書き
----------------------------------*/
@media (min-width: 920px) {
  body {
    font-size: 1.6rem;
  }

  h1 {
    font-size: 3.2rem;
  }

  h2 {
    font-size: 2.6rem;
  }

  h3 {
    font-size: 2.2rem;
  }

  h4 {
    font-size: 1.8rem;
  }

  p, ul, ol {
    font-size: 1.6rem;
  }
}