@charset "utf-8";

/*==========================
common
==========================*/


:root {
  --txt_black: #413242;
  --pink: #F24B6A;
  --white: #E5E3E5;
  --blue: #0B758C;
}

html {
  font-size: 62.5%;
}

body {
  font-family:
    "M PLUS 1",
    'Noto Sans JP',
    sans-serif;
  font-style: normal;
  color: var(--txt_black);
  background-color: var(--white);
  line-height: 1.5;
  font-weight: 300;
}

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



/*==========================
header
==========================*/

.header {
  padding: 20px 10px;
  display: flex;
  justify-content: center;
  position: fixed;
  align-items: center;
  background-color: var(--white);
  width: 100%;
  z-index: 10000;
}

.logo {
    width: 146px;
    height: 28px;
    display: block;
}




/*==========================
footer
==========================*/

.footter {
  background-color: var(--pink);
}

.footer_logo {
  width: 220px;
  height: auto;
  margin: 40px auto 0;
  padding: 60px 0 0 0;
}


.copy {
  color: var(--white);
  margin: 40px auto 0;
  text-align: center;
}


.fadeIn {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.fadeIn.animated {
  opacity: 1;
  transform: translateY(0);
}