:root {
  --font-primary: mencken-std-head, sans-serif;
  --color-normal: #000;
  --color-bg: #FBEDED;
}

html {
  font-size: 62.5%;
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: calc(10* (100vw / 1400)) !important;
  }
}

@media screen and (max-width: 767px) {
  html {
    font-size: calc(10* (100vw / 750));
  }
}

body {
  width: 100%;
}

.main-area .main-inner {
  max-width: initial;
  width: initial;
}

.main-container.__landing-page img,
.main-container.__landing-page video,
.main-container.__landing-page svg {
  width: 100%;
  height: auto;
}

.main-container.__landing-page * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-weight: inherit;
  line-height: inherit;
}

.main-container.__landing-page a,
.main-container.__landing-page picture {
  display: block;
}

@media screen and (min-width: 768px) {
  .main-container.__landing-page .hidden__mobile {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .main-container.__landing-page .hidden__desktop {
    display: none;
  }
}

/*//////////////////////////////////////////////////

Title : _layout.css
For   : "Sweet Teaser" styles of the site

Created       : 2022-04-06
Last Modified : 2022-04-06

==========================================

Content

    common

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                            common
============================================================================================== */
.main-container.__landing-page {
  font-family: mencken-std-head, sans-serif;
  font-style: normal;
  color: #000;
  text-align: center;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
}

.main-container.__landing-page .heading__ttl {
  font-size: var(--heading-fz, 8.8rem);
  line-height: var(--heading-lh, 10.5rem);
}

.main-container.__landing-page .heading__date {
  font-weight: 700;
  font-size: var(--date-fz, 4.2rem);
  line-height: var(--date-lh, 5rem);
}

.main-container.__landing-page .heading__date .week-of-day {
  font-size: var(--wod-fz, 3.2rem);
}

.main-container.__landing-page .visual {
  width: var(--visual-width, 54rem);
  margin: auto;
  padding-top: var(--visual-pbs, 7.7rem);
  padding-bottom: var(--visual-pbe, 8.4rem);
  background: #fbeded;
}

.main-container.__landing-page .visual > * {
  margin: auto;
}

.main-container.__landing-page .visual__logo {
  width: var(--logo-width, 37rem);
}

.main-container.__landing-page .visual__illust {
  width: var(--illust-width, 25.6rem);
}

.main-container.__landing-page .visual__illust .cls-1,
.main-container.__landing-page .visual__illust .cls-2 {
  stroke-width: .5px;
}

.main-container.__landing-page .visual__name {
  width: var(--name-width, 19.8rem);
}

.main-container.__landing-page .button {
  width: var(--btn-width, 66rem);
  height: var(--btn-height, 18rem);
  margin: auto;
  font-weight: 700;
  border: 1px solid #000;
  font-size: var(--btn-fz, 3.8rem);
}

.main-container.__landing-page .button a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                        for desktop
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  .main-container.__landing-page {
    padding: 45px 0 100px;
  }
  .main-container.__landing-page .heading__ttl {
    --heading-fz: 68px;
    --heading-lh: 81.6px;
  }
  .main-container.__landing-page .heading__date {
    --date-fz: 29px;
    --date-lh: 34.8px;
    margin-top: 17px;
  }
  .main-container.__landing-page .heading__date .week-of-day {
    --wod-fz: 21px;
  }
  .main-container.__landing-page .visual {
    --visual-width: 360px;
    --visual-pbs: 50px;
    --visual-pbe: 55px;
    margin-top: 76px;
  }
  .main-container.__landing-page .visual__logo {
    --logo-width: 246px;
  }
  .main-container.__landing-page .visual__illust {
    --illust-width: 171px;
    margin-top: 115px;
    -webkit-transform: translateX(-6px);
            transform: translateX(-6px);
  }
  .main-container.__landing-page .visual__name {
    margin-top: 115px;
    --name-width: 132px;
  }
  .main-container.__landing-page .button {
    margin-top: 120px;
    --btn-width: 500px;
    --btn-height: 120px;
    --btn-fz: 25px;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                      for mobile phone
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container.__landing-page {
    padding: 7rem 0 24rem;
  }
  .main-container.__landing-page .heading__date {
    margin-top: 2.5rem;
  }
  .main-container.__landing-page .visual {
    margin-top: 11.5rem;
  }
  .main-container.__landing-page .visual__illust {
    margin-top: 17rem;
    -webkit-transform: translateX(-0.7rem);
            transform: translateX(-0.7rem);
  }
  .main-container.__landing-page .visual__name {
    margin-top: 17.4rem;
  }
  .main-container.__landing-page .button {
    margin-top: 16rem;
  }
}

@media all and (-ms-high-contrast: none) {
  .main-container.__landing-page .visual__logo svg {
    height: 30px;
  }
  .main-container.__landing-page .visual__name svg {
    height: 50px;
  }
}