/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, cite, code,
del, dfn, em, img, small, strong, sub, sup, 
b, u, i, dl, dt, dd, ol, ul, li,
form, label,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details,
figure, figcaption, footer, header, hgroup,
menu, nav, ruby, section, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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

button, input, select, textarea {
  font: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* common */
html {
  scroll-behavior: smooth;
}

:root {
  --red: #e50012;
  --brown: #7f1200;
  --darkbrown: #691b07;
  --orange: #f29600;
  --gray: #595757;
  --darkgray: #231815;
  --yellow-accent: #fccf00;
  --main-bg-color: #fff697;
  --footer-black: #040000;
}

body {
  background-color: var(--yellow-accent);
  font-family: "Zen Maru Gothic", sans-serif;
  font-style: normal;
  font-feature-settings: "palt";
}

header, main, footer {
  container-type: inline-size;
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}

.color-red {
  color: #e50012!important;
}

/* header */
header {
  background: url(../img/bg-fv.svg) no-repeat;
  background-size: 100% auto;
  .firstview {
    padding-block: calc(45 / 780 * 100cqw) calc(134 / 780 * 100cqw);
  }
}

/* main */
main {
  background-color: var(--main-bg-color);
  position: relative;
  &::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: auto;
    aspect-ratio: 780 / 134;
    background: url(../img/bg-dashed-top.svg) no-repeat;
    background-size: cover;
    top: 1px;
    left: 0;
    transform: translateY(-100%);
  }

  /* entry-button */
  .entry-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: calc(50 / 780 * 100cqw) auto 0;
    width: calc(460 / 780 * 100cqw);
    height: calc(92 / 780 * 100cqw);
    background-color: var(--yellow-accent);
    border: calc(6 / 780 * 100cqw) solid #ffffff;
    border-radius: calc(46 / 780 * 100cqw);
    color: var(--red);
    font-size: calc(50 / 780 * 100cqw);
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 calc(8 / 780 * 100cqw) calc(8 / 780 * 100cqw) 0 rgba(34, 22, 19, 0.15);
    position: relative;
    transition: all 0.3s ease;
    &::before {
      content: "";
      display: block;
      position: absolute;
      width: calc(26 / 780 * 100cqw);
      height: calc(33 / 780 * 100cqw);
      clip-path: polygon(0 0, 0% 100%, 100% 50%);
      background-color: var(--brown);
      top: calc(50% - (16.5 / 780 * 100cqw));
      right: calc(40 / 780 * 100cqw);
    }
    &:hover {
      box-shadow: 0 0 0 0 rgba(34, 22, 19, 0.15);
      transform: translateY(calc(8 / 780 * 100cqw));
    }
  }

  /* plain-text */
  .plain-text {
    color: var(--darkgray);
    font-size: calc(28 / 780 * 100cqw);
    font-weight: 400;
    line-height: 1.79;
  }

  /* section-title */
  .section-title {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: calc(44 / 780 * 100cqw);
    .section-title-inner {
      color: var(--brown);
      font-size: calc(53 / 780 * 100cqw);
      font-weight: 900;
      letter-spacing: 0.05em;
    }
  }

  /* period */
  .period {
    .period-title {
      width: calc(360 / 780 * 100cqw);
      height: calc(60 / 780 * 100cqw);
      margin-inline: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--red);
      border-radius: calc(30 / 780 * 100cqw);
      color: #ffffff;
      font-size: calc(34 / 780 * 100cqw);
      font-weight: 900;
    }
    .period-date {
      width: calc(650 / 780 * 100cqw);
      margin: calc(32 / 780 * 100cqw) auto 0;
      padding-bottom: calc(32 / 780 * 100cqw);
      position: relative;
      &::before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: calc(2 / 780 * 100cqw);
        background-color: var(--brown);
        left: 0;
        bottom: 0;
      }
    }
    .period-text {
      margin-top: calc(37 / 780 * 100cqw);
      text-align: center;
      color: var(--brown);
      font-size: calc(40 / 780 * 100cqw);
      font-weight: 900;
      letter-spacing: 0.05em;
      line-height: 1.25;
      & strong {
        display: block;
        font-size: calc(70 / 780 * 100cqw);
        letter-spacing: initial;
        line-height: 1.14;
        margin-top: calc(17 / 780 * 100cqw);
      }
    }
    .period-item-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: calc(19 / 780 * 100cqw);
    }
  }

  /* chance */
  .chance {
    margin: calc(180 / 780 * 100cqw) auto 0;
    width: calc(600 / 780 * 100cqw);
    background-color: var(--red);
    border: calc(10 / 780 * 100cqw) solid #ffffff;
    border-radius: calc(23 / 780 * 100cqw);
    box-shadow: 0 calc(6 / 780 * 100cqw) calc(6 / 780 * 100cqw) 0 rgba(34, 22, 19, 0.15);
    padding-top: calc(105 / 780 * 100cqw);
    position: relative;
    .chance-title {
      position: absolute;
      width: calc(621 / 780 * 100cqw);
      height: calc(177 / 780 * 100cqw);
      top: calc(-88.5 / 780 * 100cqw);
      left: calc(-10 / 780 * 100cqw);
      z-index: 1;
    }
    .chance-text {
      color: #ffffff;
      font-size: calc(33 / 780 * 100cqw);
      font-weight: 900;
      line-height: 1.52;
      text-align: center;
    }
    .chance-sub-title {
      width: calc(469 / 780 * 100cqw);
      height: calc(152 / 780 * 100cqw);
      margin: calc(20 / 780 * 100cqw) auto 0;
    }
    .chance-sub-text {
      margin: calc(28 / 780 * 100cqw);
      color: #ffffff;
      font-size: calc(40 / 780 * 100cqw);
      font-weight: 900;
      text-align: center;
    }
    .chance-link-button {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: calc(10 / 780 * 100cqw);
      width: calc(360 / 780 * 100cqw);
      height: calc(80 / 780 * 100cqw);
      margin: 0 auto calc(-8 / 780 * 100cqw);
      background-color: #ffffff;
      border-radius: calc(23 / 780 * 100cqw) calc(23 / 780 * 100cqw) 0 0;
      color: var(--red);
      font-size: calc(30 / 780 * 100cqw);
      font-weight: 900;
      text-decoration: none;
      &::after {
        content: "";
        display: block;
        position: relative;
        width: calc(20 / 780 * 100cqw);
        height: calc(30 / 780 * 100cqw);
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
        background-color: var(--red);
      }
    }
  }

  /* products */
  .products {
    margin-inline: auto;
    padding-block: calc(98 / 780 * 100cqw) calc(135 / 780 * 100cqw);
    .products-title {
      width: calc(524 / 780 * 100cqw);
      height: calc(186 / 780 * 100cqw);
      background: url(../img/bg-products-title.svg) no-repeat;
      background-size: contain;
    }
    .products-text {
      margin: calc(36 / 780 * 100cqw) auto 0;
      width: calc(592 / 780 * 100cqw);
      color: var(--brown);
      font-size: calc(34 / 780 * 100cqw);
      font-weight: 700;
      line-height: 1.47;
      text-align: center;
    }
    .products-item-box {
      margin: calc(38 / 780 * 100cqw) auto 0;
      padding-bottom: calc(40 / 780 * 100cqw);
      width: calc(600 / 780 * 100cqw);
      background-color: #ffffff;
      box-shadow: 0 calc(10 / 780 * 100cqw) calc(10 / 780 * 100cqw) 0 rgba(34, 22, 19, 0.15);
      .products-item-box-title {
        height: calc(80 / 780 * 100cqw);
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ff8c00;
        color: #ffffff;
        font-size: calc(40 / 780 * 100cqw);
        font-weight: 900;
        letter-spacing: 0.05em;
      }
      .products-item-list {
        display: flex;
        flex-wrap: wrap;
        gap: calc(30 / 780 * 100cqw) calc(40 / 780 * 100cqw);
        width: calc(530 / 780 * 100cqw);
        margin: calc(50 / 780 * 100cqw) auto 0;
      }
      .products-item {
        width: calc((100% - (40 / 780 * 100cqw)) / 2);
        & figure {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: calc(12 / 780 * 100cqw);
          .products-img {
            display: block;
            width: 100%;
            height: 100%;
            aspect-ratio: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            & img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
        .products-caption {
          color: var(--brown);
          font-size: calc(24 / 780 * 100cqw);
          font-weight: 900;
          line-height: 1.25;
          text-align: center;
        }
      }
      .products-note {
        margin-top: calc(45 / 780 * 100cqw);
        color: var(--brown);
        font-size: calc(22 / 780 * 100cqw);
        font-weight: 400;
        text-align: center;
      }
      & + .products-item-box {
        margin-top: calc(80 / 780 * 100cqw);
      }
    }
    .entry-button {
      margin-top: calc(105 / 780 * 100cqw);
    }
  }

  /* apply */
  .apply {
    margin-inline: auto;
    padding-block: calc(100 / 780 * 100cqw) calc(200 / 780 * 100cqw);
    background-color: #ffffff;
    .apply-title {
      width: calc(524 / 780 * 100cqw);
      height: calc(263 / 780 * 100cqw);
      background: url(../img/bg-apply-title.svg) no-repeat;
      background-size: contain;
    }
    .apply-lead {
      margin-top: calc(106 / 780 * 100cqw);
      color: var(--brown);
      font-size: calc(38 / 780 * 100cqw);
      font-weight: 900;
      line-height: 1.47;
      text-align: center;
    }
    .apply-text, .apply-img-box {
      width: calc(600 / 780 * 100cqw);
      margin-inline: auto;
    }
    .apply-text {
      margin-top: calc(30 / 780 * 100cqw);
    }
    .apply-img-box {
      margin-block: calc(62 / 780 * 100cqw);
      padding: calc(25 / 780 * 100cqw);
      background-color: #ffffff;
      border: calc(6 / 780 * 100cqw) solid var(--orange);
      border-radius: calc(20 / 780 * 100cqw);
      position: relative;
      .apply-img-box-title {
        width: 100%;
        height: calc(58 / 780 * 100cqw);
        background-color: var(--orange);
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: calc(35 / 780 * 100cqw);
        font-weight: 900;
      }
      .apply-img-box-text {
        position: absolute;
        z-index: 1;
        top: calc(108 / 780 * 100cqw);
        left: calc(25 / 780 * 100cqw);
        width: calc(270 / 780 * 100cqw);
        color: var(--red);
        font-size: calc(27 / 780 * 100cqw);
        font-weight: 900;
        line-height: 1.66;
      }
      .apply-img {
        width: calc(400 / 780 * 100cqw);
        height: calc(461 / 780 * 100cqw);
        margin: calc(35 / 780 * 100cqw) 0 0 auto;
      }
    }
    .entry-button {
      margin-top: calc(178 / 780 * 100cqw);
    }
  }

  /* attention */
  .attention {
    margin-inline: auto;
    padding-block: calc(100 / 780 * 100cqw) calc(174 / 780 * 100cqw);
    .attention-title {
      width: calc(524 / 780 * 100cqw);
      height: calc(210 / 780 * 100cqw);
      background: url(../img/bg-attention-title.svg) no-repeat;
      background-size: contain;
    }
    .attention-text {
      width: calc(600 / 780 * 100cqw);
      margin: calc(40 / 780 * 100cqw) auto 0;
    }
  }

  /* turms */
  .turms {
    margin-inline: auto;
    padding-block: calc(100 / 780 * 100cqw) calc(174 / 780 * 100cqw);
    background-color: #ffffff;
    .turms-title {
      width: calc(527 / 780 * 100cqw);
      height: calc(187 / 780 * 100cqw);
      background: url(../img/bg-turms-title.svg) no-repeat;
      background-size: contain;
    }
    .scroll-box {
      margin: calc(60 / 780 * 100cqw) auto 0;
      padding: calc(50 / 780 * 100cqw);
      width: calc(600 / 780 * 100cqw);
      height: calc(650 / 780 * 100cqw);
      overflow-y: scroll;
      border: calc(2.26 / 780 * 100cqw) solid var(--darkgray);
    }
    .entry-button {
      margin-top: calc(178 / 780 * 100cqw);
    }
  }

  /* aburasoba */
  .aburasoba {
    padding-block: calc(290 / 780 * 100cqw) calc(90 / 780 * 100cqw);
    width: 100%;
    position: relative;
    overflow: hidden;
    .aburasoba-inner {
      background-color: var(--red);
      border-block: calc(11.77 / 780 * 100cqw) solid #ffffff;
      box-shadow: 0 calc(10 / 780 * 100cqw) calc(10 / 780 * 100cqw) 0 rgba(34, 22, 19, 0.15);
      width: 100%;
      position: relative;
      padding-block: calc(568 / 780 * 100cqw) calc(106 / 780 * 100cqw);
      .aburasoba-title {
        width: 100%;
        aspect-ratio: 780 / 746;
        position: absolute;
        top: calc(-223 / 780 * 100cqw);
        left: 0;
      }
      .aburasoba-text {
        color: #ffffff;
        font-size: calc(37 / 780 * 100cqw);
        font-weight: 900;
        letter-spacing: 0.1em;
        line-height: 1.54;
        text-align: center;
      }
      .chance {
        margin-top: calc(132 / 780 * 100cqw);
        background-color: #ffffff;
        .chance-text {
          color: var(--brown);
        }
        .chance-note {
          width: calc(534 / 780 * 100cqw);
          margin: calc(40 / 780 * 100cqw) auto calc(38 / 780 * 100cqw);
          color: var(--darkgray);
        }
      }
    }
  }
  
  /* yt-box */
  .yt-box {
    width: calc(600 / 780 * 100cqw);
    margin: calc(32 / 780 * 100cqw) auto 0;
    & iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 458 / 815;
    }
  }

  /* nugget */
  .nugget {
    padding-top: calc(98 / 780 * 100cqw);
    width: 100%;
    position: relative;
    overflow: hidden;
    .nugget-catch {
      color: var(--red);
      font-size: calc(54 / 780 * 100cqw);
      font-weight: 700;
      line-height: 1.11;
      text-align: center;
    }
    .nugget-main-img {
      width: calc(487 / 780 * 100cqw);
      aspect-ratio: 487 / 295;
      margin: calc(32 / 780 * 100cqw) auto 0;
      position: relative;
      left: calc(-71 / 780 * 100cqw);
      z-index: 2;
    }
    .nugget-inner {
      margin-top: calc(85 / 780 * 100cqw);
      background-color: #c6000b;
      position: relative;
      &::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        left: 0;
        top: calc(-140 / 780 * 100cqw);
        width: 100%;
        aspect-ratio: 780 / 259.22;
        background: url(../img/bg-sand-top.svg) no-repeat;
        background-position: center top;
        background-size: cover;
      }
      &::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        left: 0;
        bottom: calc(-82 / 780 * 100cqw);
        width: 100%;
        aspect-ratio: 780 / 119.05;
        background: url(../img/bg-sand-bottom.svg) no-repeat;
        background-position: center bottom;
        background-size: cover;
      }
      .nugget-title {
        position: relative;
        z-index: 1;
        width: calc(746 / 780 * 100cqw);
        aspect-ratio: 746 / 371;
        margin: 0 auto;
        top: calc(-45 / 780 * 100cqw);
      }
      .nugget-text {
        width: calc(600 / 780 * 100cqw);
        margin: calc(40 / 780 * 100cqw) auto 0;
        color: #ffffff;
      }
      .nugget-inner-img {
        position: relative;
        z-index: 2;
        width: calc(697 / 780 * 100cqw);
        aspect-ratio: 697 / 355;
        margin: 0 auto;
        bottom: calc(-18 / 780 * 100cqw);
      }
    }
    .nugget-sub-img {
      width: calc(635 / 780 * 100cqw);
      aspect-ratio: 635 / 364;
      margin: calc(130 / 780 * 100cqw) auto 0;
    }
  }

  /* contact */
  .contact {
    padding-block: calc(60 / 780 * 100cqw) calc(110 / 780 * 100cqw);
    background-color: var(--orange);
    .contact-title {
      width: calc(556 / 780 * 100cqw);
      height: calc(169 / 780 * 100cqw);
      background: url(../img/bg-contact-title.svg) no-repeat;
      background-size: contain;
    }
    .contact-sub-title {
      margin-top: calc(98 / 780 * 100cqw);
      color: #ffffff;
      font-size: calc(47 / 780 * 100cqw);
      font-weight: 700;
      text-align: center;
    }
    .contact-mail-box {
      width: calc(650 / 780 * 100cqw);
      height: calc(150 / 780 * 100cqw);
      margin: calc(45 / 780 * 100cqw) auto 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: var(--darkbrown);
      gap: calc(20 / 780 * 100cqw);
    }
    .contact-mail-title,
    .contact-mail-link {
      color: #ffffff;
      font-size: calc(37 / 780 * 100cqw);
      font-weight: 900;
      letter-spacing: 0.08em;
      text-align: center;
      text-decoration: none;
    }
    .contact-period-box {
      margin-top: calc(45 / 780 * 100cqw);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: calc(14 / 780 * 100cqw);
    }
    .contact-period-title,
    .contact-period-text {
      color: var(--darkbrown);
      font-weight: 900;
      text-align: center;
    }
    .contact-period-title {
      font-size: calc(32 / 780 * 100cqw);
      letter-spacing: 0.05em;
    }
    .contact-period-text {
      font-size: calc(36 / 780 * 100cqw);
    }
    .contact-note {
      margin: calc(30 / 780 * 100cqw) auto 0;
      width: calc(600 / 780 * 100cqw);
      color: var(--brown);
    }
  }
}

/* footer */
footer {
  background-color: #ffffff;
  padding: calc(36 / 780 * 100cqw);
  .footer-link-list {
    width: calc(590 / 780 * 100cqw);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(18 / 780 * 100cqw) calc(53 / 780 * 100cqw);
  }
  .footer-link {
    color: var(--footer-black);
    font-size: calc(23 / 780 * 100cqw);
    font-weight: 400;
    line-height: 1.74;
    position: relative;
    & a {
      color: inherit;
      text-decoration: none;
    }
    &:not(:nth-child(1),:nth-child(4))::before {
      content: "";
      display: block;
      position: absolute;
      width: 1px;
      height: calc(22 / 780 * 100cqw);
      top: calc(50% - (11 / 780 * 100cqw));
      left: calc(-27 / 780 * 100cqw);
      background-color: var(--footer-black);
    } 
  }
  .footer-logo {
    width: calc(386 / 780 * 100cqw);
    aspect-ratio: 386 / 110;
    margin: calc(80 / 780 * 100cqw) auto 0;
  }
  small {
    display: block;
    margin-top: calc(30 / 780 * 100cqw);
    color: var(--footer-black);
    font-size: calc(23 / 780 * 100cqw);
    font-style: normal;
    font-weight: 400;
    text-align: center;
  }
}