/*
 * =====================================================
 *
 * variable
 *
 * =====================================================
 */
:root {
  /* 色 */
  --textColor: #251e1c;
  --borderColor: #251e1c;
  --baseColor: #ffff3c;

  /* フォント */
  --fontSize: 1rem;
  --fontWeight: 500;
  --defaultFont: 'Noto Sans JP', sans-serif;
  --letterSpace: 0.06em;
  --lineHeight: 1.6;

  /* アニメーション */
  --transition: 0.3s;

  /* 角丸 */
  --radius: 15px;
}
/*
 * =====================================================
 *
 * keyframes
 *
 * =====================================================
 */
@keyframes gNavInSP {
  0% {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  1% {
    display: flex;
    opacity: 0;
    visibility: hidden;
  }
  100% {
    display: flex;
    opacity: 1;
    visibility: visible;
  }
}
@keyframes gNavOutSP {
  0% {
    display: flex;
    opacity: 1;
    visibility: visible;
  }
  99% {
    display: flex;
    opacity: 0;
    visibility: hidden;
  }
  100% {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
}
/*
 * =====================================================
 *
 * style
 *
 * =====================================================
 */
/**
 * ---------------------------------------------------
 * reset
 * ---------------------------------------------------
 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dl,
dt,
dd,
pre,
form,
blockquote,
fieldset,
input,
select,
textarea,
address,
figure,
figcaption,
main,
small {
  margin: 0;
  padding: 0;
}
main,
article,
aside,
details,
figure,
figcaption,
picture,
footer,
header,
hgroup,
nav,
section,
summary,
small {
  display: block;
}
img {
  vertical-align: middle;
  border: none;
  max-width: 100%;
  width: initial;
  height: initial;
}
img[src$='.svg'] {
  width: 100%;
  height: auto;
}
/**
 * default
 **/
h1,
h2,
h3,
h4,
h5,
h6,
caption,
address,
label,
button,
input,
textarea,
select,
small {
  font-size: inherit;
  font-weight: var(--fontWeight);
  font-family: var(--defaultFont);
  font-style: normal;
  letter-spacing: var(--letterSpace);
  line-height: var(--lineHeight);
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption {
  text-align: left;
}
figcaption {
  font-size: 1.2rem;
}
fieldset {
  border: none;
}
legend {
  display: none;
}
input[type='radio'],
input[type='checkbox'],
select {
  vertical-align: middle;
}
label,
button,
input,
textarea,
select {
  box-sizing: border-box;
}
input,
textarea,
select {
  background-color: #fff;
}
label,
input[type='submit'],
input[type='button'],
input[type='checkbox'],
input[type='radio'],
button,
select {
  cursor: pointer;
  padding: 0;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: var(--textColor);
  text-decoration: none;
  @media (hover: hover) {
    transition: color var(--transition);
    &:hover,
    &:active {
      color: var(--linkColor);
      text-decoration: underline;
    }
  }
}
::selection,
::-moz-selection {
  color: #fff;
  background: var(--linkColor);
}
/**
 * ---------------------------------------------------
 * html
 * ---------------------------------------------------
 */
html {
  font-size: 62.5%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
/**
 * ---------------------------------------------------
 * body
 * ---------------------------------------------------
 */
body {
  color: var(--textColor);
  font-size: var(--fontSize);
  font-family: var(--defaultFont);
  font-weight: var(--fontWeight);
  letter-spacing: var(--letterSpace);
  line-height: var(--lineHeight);
  width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'palt';
}
#wrapper {
  display: flex;
  justify-content: center;
}
/**
 * ---------------------------------------------------
 * common
 * ---------------------------------------------------
 */
.cRed {
  color: #da0000;
}
.fwB {
  font-weight: bold;
}
.alignCenter {
  text-align: center;
}
.alignRight {
  text-align: right;
}
.tim1em {
  text-indent: -1em;
}
.mL1em {
  margin-left: 1em;
}
.btnStyle01 {
  text-align: center;
  a {
    display: inline-block;
    color: var(--textColor);
    font-size: 1rem;
    padding: 0.5rem 2rem;
    text-decoration: none;
    min-width: 14rem;
    background-color: #fff;
    border: 1px solid var(--borderColor);
    border-radius: 10em;
    transition: color var(--transition), background-color var(--transition);
    &:hover {
      color: #fff;
      background-color: var(--textColor);
    }
  }
}
.mB0 {
  margin-bottom: 0 !important;
}
/**
 * ---------------------------------------------------
 * left / right
 * ---------------------------------------------------
 */
#siteHeader,
#js-gNav {
  width: calc((100% - 39rem) / 2);
  height: 100vh;
  background: url('../images/bg.jpg') no-repeat center center / cover;
  position: fixed;
  top: 0;
  z-index: 100;
  a {
    transition: opacity var(--transition);
    &:hover {
      opacity: 0.7;
    }
  }
}
#siteHeader {
  left: 0;
  .dariyaLogo {
    width: 13rem;
    position: absolute;
    top: 2rem;
    left: 3rem;
  }
  .logo {
    width: 22.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
#gNavOpener {
  display: none;
}
#js-gNav {
  right: 0;
}
#gNavWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  height: 100%;
  .gNav {
    > ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      > li {
        width: 22.2rem;
        &:not(:last-child) {
          margin-bottom: 1.8rem;
        }
      }
    }
  }
  .closeBtn {
    display: none;
  }
}
@media (min-width: 1201px) and (max-height: 560px) {
  #gNavWrapper {
    .gNav {
      max-height: 100svh;
      overflow-y: auto;
      padding: 2rem 0;
    }
  }
}
/**
 * ---------------------------------------------------
 * content
 * ---------------------------------------------------
 */
body.is-navOpen {
  #container {
    .mv {
      .badge {
        z-index: 90;
      }
    }
  }
}
#container {
  width: 39rem;
  background-color: var(--baseColor);
  .head {
    text-align: center;
    padding: 0.6rem 1rem;
    background-color: #fff000;
    margin: 0 auto;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    .logo {
      width: 5rem;
      padding-top: 0.4rem;
      margin: 0 auto;
    }
    .btns {
      display: none;
    }
  }
  /* MV */
  .mv {
    color: #fff;
    font-size: 1.2rem;
    line-height: 2.5;
    padding: 2.5rem 0 5rem 0;
    background-color: #ff006e;
    position: relative;
    .badge {
      width: 9rem;
      position: absolute;
      top: -2.5rem;
      right: 1rem;
      z-index: 101;
    }
    .img {
      padding: 0 2.5rem;
      margin-bottom: 5rem;
    }
    .txt {
      padding: 0 2.5rem;
      .ttl {
        font-size: 1.8rem;
        margin-bottom: 0.5em;
      }
      p {
        span {
          color: #fcee21;
        }
      }
    }
    .example {
      padding: 0 2.1rem;
      &:not(:first-child) {
        margin-top: 3rem;
      }
    }
  }
  /* post */
  .postArea {
    padding: 3rem 0 0 0;
    border-top: 0.8rem solid var(--baseColor);
    border-bottom: 0.8rem solid var(--baseColor);
    background: url('../images/bg2.png') repeat right bottom / 22px auto;
    .ttl {
      width: 29.6rem;
      margin: 0 auto 2rem auto;
    }
    .inner {
      margin-top: -3rem;
    }
  }
  /* application */
  .applicationArea {
    padding: 3.5rem 0;
    background: url('../images/bg3.png') repeat left top / 80px auto;
    .ttl {
      font-size: 1.4rem;
      font-weight: 800;
      line-height: 1.1;
      text-align: center;
      padding: 0.6rem 2rem;
      margin-bottom: 5rem;
      background-color: #fff;
      border-top: 1px solid var(--borderColor);
      border-bottom: 1px solid var(--borderColor);
    }
    .inner {
      padding: 0 3rem;
    }
    .applicationVox {
      padding: 3rem 1.65rem;
      background-color: #fff;
      border: 1px solid var(--borderColor);
      border-radius: var(--radius);
      position: relative;
      &:not(:last-child) {
        margin-bottom: 3rem;
      }
      &.caution {
        padding-bottom: 2rem;
        &::before {
          display: block;
          content: '';
          width: 3.8rem;
          height: 3.3rem;
          background: url('../images/ico_caution.svg') no-repeat center center / contain;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      &.inner-slim {
        padding-left: 4.5rem;
        padding-right: 4.5rem;
      }
      .title {
        font-size: 1.4rem;
        font-weight: bold;
        line-height: 1.1;
        text-align: center;
        min-width: 8.5rem;
        padding: 0.55rem 1rem;
        background-color: var(--baseColor);
        border: 1px solid var(--borderColor);
        border-radius: 5rem;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        > li {
          padding-left: 1em;
          position: relative;
          &::before {
            content: '・';
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
      a {
        color: #d2005f;
        font-weight: bold;
      }
      .tag {
        color: #00a0ff;
        font-weight: bold;
      }
      .btn {
        width: 10.4rem;
        margin: 1rem auto 0 auto;
        button {
          cursor: pointer;
          padding: 0;
          background-color: transparent;
          border: none;
          transition: opacity var(--transition);
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }
  .prizeArea {
    padding-top: 4rem;
    .prizeList {
      list-style-type: none;
      max-width: 39rem;
      padding: 0 1rem;
      margin: 0 auto;
      > li {
        &:not(:last-child) {
          margin-bottom: 0.2rem;
        }
      }
    }
    footer {
      font-size: 0.8rem;
      text-align: right;
      padding: 0 3rem;
      margin-top: 0.5rem;
    }
  }
  .subprizeArea {
    padding-bottom: 6.5rem;
    .inner {
      margin-top: -2rem;
    }
    .event {
      max-width: 39rem;
      padding: 0 1.6rem;
      margin: 0 auto 4rem auto;
    }
    .presentVox {
      max-width: 33rem;
      padding-top: 2.8rem;
      margin: 0 auto;
      position: relative;
      &::before {
        display: block;
        content: '';
        width: 10.6rem;
        height: 2.8rem;
        background: url('../images/present_ribbon.png') no-repeat center center / contain;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      .presentTtl {
        color: #fff;
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
        padding: 0.5rem 1rem;
        margin-top: -1px;
        background-color: #ff006e;
        border-radius: 14px 14px 0 0;
        border: 1px solid #000;
      }
      .txt {
        padding: 2.3rem 3.5rem;
        background-color: #fff;
        border: 1px solid #000;
        border-top: none;
        border-radius: 0 0 14px 14px;
        position: relative;
        &::before,
        &::after {
          display: block;
          content: '';
          background: no-repeat center center / contain;
          position: absolute;
        }
        &::before {
          width: 4.6rem;
          height: 6.6rem;
          background-image: url('../images/present_img01.png');
          top: -2.2rem;
          left: -1.8rem;
        }
        &::after {
          width: 2.8rem;
          height: 3rem;
          background-image: url('../images/present_img02.png');
          bottom: 1.8rem;
          right: -0.8rem;
        }
      }
    }
  }
  .judgeArea {
    padding: 6rem 3rem 4rem 3rem;
    background: #ff006e url('../images/bg4.png') repeat-x center top / 3.9rem auto;
    .ttl {
      width: 13rem;
      margin: 0 auto 2rem auto;
    }
    .inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8rem;
      padding: 2rem;
      background-color: #fff;
      border: 1px solid var(--borderColor);
      border-radius: var(--radius);
      position: relative;
      .img {
        width: 9rem;
      }
      .txt {
        width: calc(100% - 10rem);
        .name {
          font-size: 1.2rem;
          margin-bottom: 0.3rem;
        }
        .instagram {
          width: 8.4rem;
          position: absolute;
          top: 1.5rem;
          right: 1.5rem;
        }
      }
    }
  }
  .aboutPalty {
    font-size: 1.2rem;
    text-align: center;
    padding: 5rem 4rem 5rem 4rem;
    background-color: #ffd5df;
    .ttl {
      font-size: 1.15rem;
      vertical-align: bottom;
      margin-bottom: 2rem;
      img {
        vertical-align: bottom;
        width: 8.5rem;
      }
    }
    p {
      line-height: 2.3;
    }
    .img {
      margin-top: 2rem;
      margin-bottom: 1.5rem;
      img {
        max-width: 30.8rem;
      }
    }
    .cautionVox {
      font-size: 0.8rem;
      line-height: 1.75;
      text-align: left;
      margin-bottom: 3rem;
      .cautionTt {
        display: inline-block;
        color: #fff;
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
        margin-bottom: 0.5rem;
        background-color: #000;
      }
    }
  }
  .pageTopVox {
    display: block;
    color: #fff;
    width: 100%;
    background-color: #fff;
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 10;
    a {
      display: block;
      text-indent: -9999px;
      height: 4rem;
      margin: 0 auto;
      background: #ff006e url('../images/pagetop.svg') no-repeat center center / 5.4rem auto;
    }
  }
}
.policyVox {
  display: none;
  width: 39rem;
  height: 100%;
  background-color: #ffd5df;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 120;
  transform: translateX(-50%);
  .inner {
    max-height: 100dvh;
    padding: 3rem 4rem;
    overflow-y: auto;
    h2 {
      font-weight: bold;
      &:not(:first-child) {
        margin-top: 2em;
      }
      &::before {
        content: '■';
      }
    }
    h4 {
      &::before {
        content: '●';
      }
    }
    ul:not([class]) {
      list-style-type: disc;
      padding: 0 0 0 1.75em;
      margin: 0;
    }
    a {
      text-decoration: underline;
      &:hover {
        text-decoration: none;
      }
    }
    .numList {
      counter-reset: cnt;
      list-style-type: none;
      padding: 0;
      margin: 0;
      > li {
        padding-left: 2.5em;
        position: relative;
        &:not(:last-child) {
          margin-bottom: 1em;
        }
        &::before {
          counter-increment: cnt;
          content: '(' counter(cnt) ')';
          text-align: center;
          width: 2em;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
    .stepList {
      list-style-type: none;
      padding: 0;
      margin: 0;
      > li {
        text-indent: -5.5em;
        margin-left: 5.5em;
      }
    }
    ul,
    ol,
    p {
      &:not(:last-child) {
        margin-bottom: 1.2em;
      }
    }
  }
  .closeBtn {
    cursor: pointer;
    display: block;
    width: 3.8rem;
    margin-top: 2rem;
    background: transparent;
    border: none;
  }
}
body.is-policyOpen {
  overflow: hidden;
  .policyVox {
    display: block;
  }
  #wrapper {
    &::before,
    &::after {
      display: block;
      content: '';
      width: calc((100% - 39rem) / 2);
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 0;
      z-index: 200;
    }
    &::before {
      left: 0;
    }
    &::after {
      right: 0;
    }
  }
}

/**
 ****************************************************
 *
 * screens smaller than 1200
 *
 ****************************************************
 */
@media only screen and (max-width: 1200px) {
  /**
   * ---------------------------------------------------
   * left / right
   * ---------------------------------------------------
   */
  #siteHeader {
    .dariyaLogo {
      display: none;
    }
    .logo {
      display: none;
    }
  }
  #gNavOpener {
    display: none;
  }
  #gNavWrapper {
    pointer-events: none;
    display: none;
    width: 39rem;
    background-color: #ffd5df;
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 120;
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    animation: gNavOutSP 0.4s forwards;
    .inner {
      width: 100%;
      max-height: 100svh;
      padding: 3rem;
      overflow-y: auto;
    }
    .gNav {
      width: fit-content;
      margin: 0 auto;
    }
    .closeBtn {
      cursor: pointer;
      display: block;
      width: 3.8rem;
      margin-top: 2rem;
      background: transparent;
      border: none;
    }
    .hpLink {
      display: none;
    }
  }
  body.is-navOpen {
    overflow: hidden;
    #gNavWrapper {
      display: flex;
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      animation: gNavInSP 0.4s forwards;
      animation-fill-mode: forwards;
    }
  }
  /**
   * ---------------------------------------------------
   * content
   * ---------------------------------------------------
   */
  #container {
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo {
        margin-left: 0;
      }
      .btns {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        .btn01,
        .btn02 {
          display: block;
          color: #fff;
          font-weight: bold;
          line-height: 1.3;
          text-decoration: none;
          padding: 0.2rem 0.7rem;
          border: none;
          border-radius: 10em;
        }
        .btn01 {
          background-color: #355efa;
        }
        .btn02 {
          background-color: #ff006e;
        }
      }
    }
    /* MV */
    .mv {
      .badge {
        top: -0.2rem;
      }
    }
  }
} /* END @media smaller than $bp */
/**
 ****************************************************
 *
 * screens smaller than 1200
 *
 ****************************************************
 */
@media only screen and (max-width: 767px) {
  html {
    font-size: calc(100vw / 39);
  }
  img {
    width: 100%;
  }
  /**
   * ---------------------------------------------------
   * left / right
   * ---------------------------------------------------
   */
  #siteHeader {
    display: none;
  }
  #js-gNav {
    background: transparent;
  }
  #gNavWrapper {
    width: 100%;
    left: 0;
    transform: none;
  }

  /**
   * ---------------------------------------------------
   * content
   * ---------------------------------------------------
   */
  #container {
    width: auto;
  }
} /* END @media smaller than $bp */