@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
}

body {
  color: #331911;
  background-color: #f6f0ea;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 1.6em;
  line-height: 2.4rem;
  text-align: center;
}

/* タイトルの左右の線吹き出しのスタイル */
.ballon_header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.ballon_header:before, .ballon_header:after {
  width: 3px;
  height: 40px;
  background-color: #331911;
  content: "";
}

.ballon_header:before {
  transform: rotate(-35deg);
  margin-right: 20px;
}

.ballon_header:after {
  transform: rotate(35deg);
  margin-left: 20px;
}

/* 新規登録ボタンのスタイル　スマホ、タブレット用 */
.button-register {
  margin: 0 auto;
  padding: 15px;
  display: block;
  background-color: #d77e9a;
  border-radius: 30px;
  color: #FFFFFF;
  text-decoration: none;
  text-align: center;
  width: 300px;
  height: 60px;
  box-shadow: 10px 10px 15px -10px grey;
  font-size: 1.8rem;
}
.button-register:hover {
  bottom: -8px;
  box-shadow: 3px 3px 5px -3px grey;
}
/* マイページボタン、お仕事一覧ボタンのスタイル */
.button-login {
  margin: 0 auto 0;
  padding: 15px;
  display: block;
  background-color: #ffffff;
  border-radius: 30px;
  border: 2px solid #d77e9a;
  color: #d77e9a;
  text-decoration: none;
  text-align: center;
  width: 300px;
  height: 60px;
  font-size: 1.8rem;
  box-shadow: 10px 10px 15px -10px grey;
}
.button-login:hover {
  bottom: -8px;
  box-shadow: 3px 3px 5px -3px grey;
}
.button-span {
  padding-left: 10px;
}
.button-arrow {
  width: 5%;
}
@media (min-width: 1160px) {
  .button-register {
    position: relative;
    padding: 25px;
    border-radius: 40px;
    width: 480px;
    height: 80px;
    box-shadow: 15px 15px 20px -15px grey;
    font-size: 2.4rem;
  }
  .button-register:hover {
    bottom: -8px;
    box-shadow: 5px 5px 7px -5px grey;
  }
  .button-register__pc {
    position: fixed;
    top: 143px;
    right: 0px;
    z-index: 1;
    margin: 0 auto;
    padding: 10px 20px 10px 10px;
    background-color: #d77e9a;
    border-radius: 20px 0 0 20px;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    writing-mode: vertical-rl;
    width: 70px;
    height: 160px;
    align-items: center;
  }
  .button-register__pc p {
    font-size: 1.4rem;
  }
  .button-register__pc:hover {
    color: #d5d1d1;
  }
  .button-login {
    position: relative;
    padding: 25px;
    border-radius: 40px;
    width: 480px;
    height: 80px;
    box-shadow: 15px 15px 20px -15px grey;
    font-size: 2.4rem;
  }
  .button-login:hover {
    bottom: -8px;
    box-shadow: 5px 5px 7px -5px grey;
  }
  .button-login__pc {
    position: fixed;
    top: 342px;
    right: 0px;
    z-index: 1;
    margin: 0 auto 0;
    padding: 10px 20px 10px 10px;
    background-color: #FFFFFF;
    border-radius: 20px 0 0 20px;
    border-top: 2px solid #d77e9a;
    border-bottom: 2px solid #d77e9a;
    border-left: 2px solid #d77e9a;
    color: #d77e9a;
    text-decoration: none;
    text-align: center;
    writing-mode: vertical-rl;
    width: 70px;
    height: 175px;
  }
  .button-login__pc p {
    font-size: 1.4rem;
  }
  .button-login__pc:hover {
    color: #d5d1d1;
  }
  .button-span {
    padding-left: 30px;
  }
}

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

/* header */
.header {
  width: 100%;
}

.header h1 a {
  color: #331911;
  text-decoration: none;
}

.section-worris_woman_image {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
}

/* 動き用のCSS */
/* その場で */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 下から */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 1160px){
  .merit-one {
    animation-delay: 0.2s;
  }
  .merit-two {
    animation-delay: 0.4s;
  }
  .merit-three {
    animation-delay: 0.6s;
  }
}