@charset "UTF-8";
/* CSS Document */ :root {
  --beige: #feeab4;
  --black: #000000;
  --pink: #ff64b8;
  --blue: #65bcd3;
  --red: #ff0200;
  --muted: #f2f3f5;
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  font-family: 'Noto Sans JP', 'Noto Sans', system-ui, -apple-system, 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', 'Noto Sans JP', Roboto, Arial, sans-serif;
  color: var(--ink);
  background-color: var(--beige);
  line-height: 1.7;
}
img {
  max-width: 100%;
  height: auto;
  display: block
}
a {
  color: inherit
}
.container {
  max-width: 600px;
  margin: 0 auto
}
/* Header */
header {
  padding: 30px;
  margin: 0;
  position: fixed;
  z-index: 50;
}
.container {
  max-width: 600px;
  margin: 0 auto;
}
/* hero */
.hero {
  background-image: url("../img/bg-hero.png");
  background-size: 1200px;
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: 50px;
}
.hero-img img {
  margin-bottom: 30px;
}
/* main */
.main {
  position: relative;
  margin: 100px 0 0;
}
.main-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 50px auto 50px;
  position: relative;
  z-index: 30;
}
.main-txt {
  text-align: center;
  margin: 0 0 50px;
}
/* date */
.date {
  background-color: var(--black);
  color: white;
  text-align: center;
  padding: 15px 0;
}
.date-txt {
  text-align: center;
  font-size: 1.6rem;
}
/* entry */
.entry {
  background-image: url("../img/bg.jpg");
  background-repeat: repeat;
  padding: 50px 0;
}
.entry h2 {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  margin: 0 0 30px;
  color: white;
}
.container__blue {
  background-color: var(--blue);
  border: 3px black solid;
  border-radius: 50px;
  padding: 15px;
  text-align: center;
  color: white;
  font-weight: bold;
  margin-bottom: 50px;
}
.container__blue span {
  font-size: 1.6rem;
}
.container__white {
  background-color: white;
  border: 3px black solid;
  border-radius: 20px;
  padding: 15px;
  text-align: center;
  font-weight: bold;
  margin: 20px;
}
.step {
  color: var(--red);
}
.bold {
  font-size: 1.3rem;
}
.caution {
  margin-bottom: 50px;
}
/* detail */
.detail {
  padding: 70px 0;
  font-size: 0.9rem;
}
.detail__title {
  font-weight: bold;
  text-align: center;
  margin: 30px 0 15px;
}
@media (min-width:1200px) {
  .hero {
    background-size: 100%;
  }
}
@media (max-width:600px) {
  .container {
    width: 90%;
  }
  .main {
    margin: 50px 0 0;
  }
  .main-txt {
    text-align: left;
  }
  .br-sm {
    display: none;
  }
  .main-img {
    width: 80%;
    height: auto;
    margin: -100px auto 50px;
    position: relative;
    z-index: 30;
  }
  header {
    width: 100%;
    top: 0;
    right: 0;
    padding: 0;
    position: fixed;
  }
  .header-logo {
    position: absolute;
    width: 54px;
    height: auto;
    top: 0;
    right: 0;
  }
}