/* ===================== 01: common */
:root {
  --color-main: #AF9A71;
  /* --color-sub: #bfbeba; */
  --color-dim: #898989;
  --color-light: #F9F9F9;
  --color-grayout: #bfbeba;
}

body {
  font-family: "Roboto", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Osaka, sans-serif;
  color: #000;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

ol,
ul {
  list-style: none;
}

picture,
img {
  width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

a:hover {
  opacity: 0.6;
}

.underline {
  text-decoration: underline;
}

.js-time_limited_fire {
  display: none;
}

@media screen and (max-width: 768px) {
  html {
    font-size: 1.3333333333vw;
  }
  .main-container .hidden_sml {
    display: none;
  }
}
/* ===================== 02: btn */
.main-container .registBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--registBtn-w);
  height: var(--registBtn-h);
  margin-inline: auto;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.5;
}
.main-container .registBtn :not(.--grayedOut) {
  background-color: var(--color-main);
}
.main-container .registBtn.--grayedOut {
  background-color: var(--color-grayout);
}
.main-container .registBtn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  letter-spacing: 0.06em;
}

/* --- for mobile phone --- */
@media screen and (max-width: 768px) {
  .main-container {
    -webkit-padding-before: 5em;
            padding-block-start: 5em;
    -webkit-padding-after: 24rem;
            padding-block-end: 24rem;
  }
  .main-container .registBtn {
    font-size: 13px;
  }
  .main-container .registBtn--firstview {
    -webkit-margin-before: 6rem;
            margin-block-start: 6rem;
    --registBtn-w: 52.5rem;
    --registBtn-h: 9rem;
  }
  .main-container .registBtn--introduction {
    -webkit-margin-before: 9.5rem;
            margin-block-start: 9.5rem;
    --registBtn-w: 56.2rem;
    --registBtn-h: 15rem;
  }
  .main-container .registBtn--follow {
    visibility: hidden;
    opacity: 0;
    transition-duration: 0.5s;
    margin-inline: auto;
    position: fixed;
    right: 0;
    bottom: 2rem;
    left: 0;
    --registBtn-w: 56.2rem;
    --registBtn-h: 15rem;
    z-index: 10;
  }
  .main-container .registBtn--follow.is-visible {
    visibility: visible;
    opacity: 1;
  }
}
/* --- for desktop --- */
@media screen and (min-width: 769px) {
  .main-container {
    font-size: 14px;
    -webkit-padding-after: 100px;
            padding-block-end: 100px;
  }
  .main-container .registBtn__wrap {
    display: flex;
    justify-content: center;
    gap: 40px;
  }
  .main-container .registBtn--firstview {
    -webkit-margin-before: 35px;
            margin-block-start: 35px;
    --registBtn-w: 230px;
    --registBtn-h: 38px;
  }
  .main-container .registBtn--introduction {
    -webkit-margin-before: 55px;
            margin-block-start: 55px;
    --registBtn-w: 470px;
    --registBtn-h: 78px;
  }
}
/* ===================== 03: header */
.header__logo {
  margin-inline: auto;
}

/* --- for mobile phone --- */
@media screen and (max-width: 768px) {
  .header__logo {
    width: 34rem;
    padding-block: 5rem;
  }
}
/* --- for desktop --- */
@media screen and (min-width: 769px) {
  .header__logo {
    width: 200px;
    padding-block: 50px;
  }
}
/* ===================== 04: firstview */
.main-container .firstview__lead {
  text-align: center;
  letter-spacing: 0.1em;
}
.main-container .firstview__attention {
  color: var(--color-dim);
  text-align: center;
  letter-spacing: 0.1em;
}
.main-container .firstview__info {
  text-align: center;
  letter-spacing: 0.1em;
}

/* --- for mobile phone --- */
@media screen and (max-width: 768px) {
  .main-container .firstview__lead {
    -webkit-margin-before: 9.5rem;
            margin-block-start: 9.5rem;
    font-size: 12px;
    line-height: 2.0833333333;
  }
  .main-container .firstview__attention {
    -webkit-margin-before: 5rem;
            margin-block-start: 5rem;
    font-size: 10px;
    line-height: 1.8;
  }
  .main-container .firstview__info {
    -webkit-margin-before: 5rem;
            margin-block-start: 5rem;
    font-size: 12px;
    line-height: 1.8;
  }
}
/* --- for desktop --- */
@media screen and (min-width: 769px) {
  .main-container .firstview__image {
    max-width: 870px;
    margin-inline: auto;
  }
  .main-container .firstview__lead {
    -webkit-margin-before: 45px;
            margin-block-start: 45px;
    line-height: 2;
  }
  .main-container .firstview__attention {
    -webkit-margin-before: 15px;
            margin-block-start: 15px;
    font-size: 10px;
    line-height: 1.6;
  }
  .main-container .firstview__info {
    -webkit-margin-before: 15px;
            margin-block-start: 15px;
    font-size: 12px;
    line-height: 1.6;
  }
}
/* ===================== 05: introduction */
.main-container .introduction {
  border: 4px solid var(--color-main);
}
.main-container .introduction__image {
  margin-inline: auto;
}
.main-container .introduction__prodName {
  text-align: center;
}
.main-container .introduction__text {
  text-align: center;
}

/* --- for mobile phone --- */
@media screen and (max-width: 768px) {
  .main-container .introduction {
    -webkit-margin-before: 12rem;
            margin-block-start: 12rem;
    margin-inline: 3.75rem;
    -webkit-padding-before: 6rem;
            padding-block-start: 6rem;
    -webkit-padding-after: 9rem;
            padding-block-end: 9rem;
  }
  .main-container .introduction__image {
    width: 32.8rem;
  }
  .main-container .introduction__prodName {
    -webkit-padding-before: 3rem;
            padding-block-start: 3rem;
    font-size: 14px;
    line-height: 1.7142857143;
    letter-spacing: 0.1em;
  }
  .main-container .introduction__texts {
    -webkit-margin-before: 9.5rem;
            margin-block-start: 9.5rem;
  }
  .main-container .introduction__text {
    font-size: 12px;
    line-height: 2.0833333333;
  }
  .main-container .introduction__text + .introduction__text {
    -webkit-padding-before: 3.5rem;
            padding-block-start: 3.5rem;
  }
}
/* --- for desktop --- */
@media screen and (min-width: 769px) {
  .main-container .introduction {
    max-width: 770px;
    -webkit-margin-before: 80px;
            margin-block-start: 80px;
    margin-inline: auto;
    -webkit-padding-before: 40px;
            padding-block-start: 40px;
    -webkit-padding-after: 65px;
            padding-block-end: 65px;
  }
  .main-container .introduction__image {
    width: 240px;
  }
  .main-container .introduction__prodName {
    -webkit-padding-before: 15px;
            padding-block-start: 15px;
    font-size: 17px;
    line-height: 1.5882352941;
    letter-spacing: 0.05em;
  }
  .main-container .introduction__texts {
    -webkit-margin-before: 55px;
            margin-block-start: 55px;
  }
  .main-container .introduction__text {
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.1em;
  }
  .main-container .introduction__text + .introduction__text {
    -webkit-padding-before: 20px;
            padding-block-start: 20px;
  }
}
/* ===================== 06: notes */
.main-container .notes {
  background-color: var(--color-light);
  margin-inline: auto;
  letter-spacing: 0.1em;
}
.main-container .notes__attention {
  color: var(--color-dim);
}

/* --- for mobile phone --- */
@media screen and (max-width: 768px) {
  .main-container .notes {
    -webkit-margin-before: 12rem;
            margin-block-start: 12rem;
    padding-block: 9rem;
    padding-inline: 6rem;
    line-height: 2.2727272727;
  }
  .main-container .notes__text {
    font-size: 11px;
    text-align: justify;
  }
  .main-container .notes__text + .notes__text {
    -webkit-padding-before: 6rem;
            padding-block-start: 6rem;
  }
  .main-container .notes__attention {
    font-size: 10px;
  }
}
/* --- for desktop --- */
@media screen and (min-width: 769px) {
  .main-container .notes {
    -webkit-margin-before: 105px;
            margin-block-start: 105px;
    max-width: 980px;
    padding-block: 65px;
    line-height: 1.9230769231;
  }
  .main-container .notes__texts {
    width: 650px;
    margin-inline: auto;
  }
  .main-container .notes__text {
    font-size: 13px;
  }
  .main-container .notes__text + .notes__text {
    -webkit-padding-before: 2.5rem;
            padding-block-start: 2.5rem;
  }
  .main-container .notes__attention {
    font-size: 11px;
  }
}
@media screen and (min-width: 769px) {
  html {
    font-size: 62.5%;
  }
  body {
    width: 95%;
    margin-inline: auto;
  }
  .main-container .hidden_lrg {
    display: none;
  }
}