@charset "UTF-8";
.kandatsu-togari {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", "メイリオ", "Meiryo", sans-serif;
  position: relative;
  font-weight: 500;

  & *, *::before, *::after {
    box-sizing: border-box;
  }
  p, h2, h3, h4, dl, ul, li, p {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    list-style-type: none;
  }
  figure, dd {
    margin: 0;
  }
  a {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;
  }
  a:hover img {
    opacity: 1;
    cursor: pointer;
  }
  img {
    display: block;
    width: 100%;
    height: auto;
  }
  .pc_none {
    display: none !important;
  }
  .auto {
    margin: 0 auto;
    position: relative;
  }
}
@media screen and (min-width: 641px) {
  .kandatsu-togari {
    min-width: 1080px;
    overflow: hidden;
    font-size: 20px;
    line-height: 1.5;

    .pc_none {
      display: none !important;
    }
    .auto {
      width: 1080px;
    }
    section {
      padding: 120px 0;
      position: relative;
    }
    /* 青背景 */
    .bg_blue {
      background-color: #19a1ec;
    }
    .bg_blue::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-image: url(../img/bg_snowdrop_01.png), url(../img/bg_mountain_01.png);
      background-repeat: no-repeat, no-repeat;
      background-position: center top, center bottom;
      background-size: 100%;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    .bg_blue::after {
      content: "";
      display: block;
      width: 100%;
      height: calc(100% - 470px);
      background-image: url(../img/bg_snowflake_01.png);
      background-repeat: repeat-y;
      background-position: center top;
      background-size: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      pointer-events: none;
      z-index: -1;
    }
    /* 赤背景 */
    .bg_red {
      background-color: #d32f40;
    }
    .bg_red::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: url(../img/bg_paper.png) repeat center/750px;
      mix-blend-mode: multiply;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    .bg_red::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-image: url(../img/bg_snowdrop_02_l.png), url(../img/bg_snowdrop_02_r.png);
      background-repeat: repeat-y;
      background-position: left top, right top;
      background-size: 147px;
      position: absolute;
      top: 0;
      left: 0;
      opacity: .3;
      pointer-events: none;
    }
    /* 黄色背景 */
    .bg_yellow {
      background-color: #d49826;
    }
    .bg_yellow::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: url(../img/bg_paper.png) repeat center/750px;
      mix-blend-mode: multiply;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    .bg_yellow::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-image: url(../img/bg_snowdrop_02_l.png), url(../img/bg_snowdrop_02_r.png);
      background-repeat: repeat-y;
      background-position: left top, right top;
      background-size: 147px;
      mix-blend-mode: multiply;
      position: absolute;
      top: 0;
      left: 0;
      opacity: .3;
      pointer-events: none;
    }
    /* 積雪 */
    .bg_snow_box {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .bg_snow_box::before {
      content: "";
      display: block;
      width: 429px;
      height: 162px;
      background: url(../img/illust_snow_01_l.png) no-repeat center/contain;
      position: absolute;
      top: -31px;
      left: 0;
      pointer-events: none;
    }
    .bg_snow_box::after {
      content: "";
      display: block;
      width: 429px;
      height: 162px;
      background: url(../img/illust_snow_01_r.png) no-repeat center/contain;
      position: absolute;
      top: -31px;
      right: 0;
      pointer-events: none;
    }
    /* ボタン */
    .btn {
      width: 760px;
      margin: 0 auto;
    }
    .btn a {
      display: flex;
      min-height: 100px;
      text-align: center;
      font-size: 35px;
      line-height: 1.3;
      font-weight: 900;
      color: #000;
      border: 5px solid #000;
      border-radius: 10px;
      background: linear-gradient(342deg, rgba(253, 255, 188, 1) 0%, rgba(255, 237, 34, 1) 100%);
      justify-content: center;
      align-items: center;
      position: relative;
      transition-duration: .3s;
      box-shadow: 6px 5px 0px 1px rgba(0, 0, 0, 0.2);
      flex-direction: column;
    }
    .btn a:hover {
      color: #ffed22;
      background: #000;
      transform: scale(1.03);
    }
    .btn a::after {
      content: "";
      display: block;
      width: 22px;
      height: 36px;
      background: url(../img/arrow_01.png) no-repeat center/contain;
      position: absolute;
      top: 50%;
      right: 40px;
      transform: translateY(-50%);
      transition-duration: .3s;
    }
    .btn a:hover::after {
      background: url(../img/arrow_01_hover.png) no-repeat center/contain;
    }
    .btn .inline {
      display: block;
      font-size: 18px;
      line-height: 1.5;
    }
  }
}
@media screen and (max-width: 640px) {
  .kandatsu-togari {
    font-size: 4vw;
    line-height: 1.8;

    .auto {
      width: 92%;
    }
    .sp_none {
      display: none !important;
    }
    section {
      padding: 18vw 0;
      position: relative;
    }
    /* 青背景 */
    .bg_blue {
      background-color: #19a1ec;
    }
    .bg_blue::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-image: url(../img/bg_snowdrop_01.png), url(../img/bg_mountain_01.png);
      background-repeat: no-repeat, no-repeat;
      background-position: center top, center bottom;
      background-size: 100%;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    .bg_blue::after {
      content: "";
      display: block;
      width: 100%;
      height: calc(100% - 30vw);
      background-image: url(../img/bg_snowflake_01.png);
      background-repeat: repeat-y;
      background-position: center top;
      background-size: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      pointer-events: none;
      z-index: -1;
    }
    /* 赤背景 */
    .bg_red {
      background-color: #d32f40;
    }
    .bg_red::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: url(../img/bg_paper.png) repeat center/750px;
      mix-blend-mode: multiply;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    .bg_red::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-image: url(../img/bg_snowdrop_02_l.png), url(../img/bg_snowdrop_02_r.png);
      background-repeat: repeat-y;
      background-position: left top, right top;
      background-size: 22%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: .3;
      pointer-events: none;
    }
    /* 黄色背景 */
    .bg_yellow {
      background-color: #d49826;
    }
    .bg_yellow::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: url(../img/bg_paper.png) repeat center/750px;
      mix-blend-mode: multiply;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    .bg_yellow::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-image: url(../img/bg_snowdrop_02_l.png), url(../img/bg_snowdrop_02_r.png);
      background-repeat: repeat-y;
      background-position: left top, right top;
      background-size: 20%;
      mix-blend-mode: multiply;
      position: absolute;
      top: 0;
      left: 0;
      opacity: .3;
      pointer-events: none;
    }
    /* 積雪 */
    .bg_snow_box {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .bg_snow_box::before {
      content: "";
      display: block;
      width: 40%;
      height: 15vw;
      background: url(../img/illust_snow_01_l.png) no-repeat center/contain;
      position: absolute;
      top: -3vw;
      left: 0;
      pointer-events: none;
    }
    .bg_snow_box::after {
      content: "";
      display: block;
      width: 40%;
      height: 15vw;
      background: url(../img/illust_snow_01_r.png) no-repeat center/contain;
      position: absolute;
      top: -3vw;
      right: 0;
      pointer-events: none;
    }
    /* ボタン */
    .btn {
      width: 96%;
      margin: 0 auto;
    }
    .btn a {
      display: flex;
      min-height: 16vw;
      text-align: center;
      font-size: 5vw;
      line-height: 1.3;
      font-weight: 900;
      color: #000;
      border: 3px solid #000;
      border-radius: 6px;
      background: linear-gradient(342deg, rgba(253, 255, 188, 1) 0%, rgba(255, 237, 34, 1) 100%);
      justify-content: center;
      align-items: center;
      position: relative;
      box-shadow: 2px 2px 0px 1px rgba(0, 0, 0, 0.2);
      flex-direction: column;
    }
    .btn a::after {
      content: "";
      display: block;
      width: 3vw;
      height: 5vw;
      background: url(../img/arrow_01.png) no-repeat center/contain;
      position: absolute;
      top: 50%;
      right: 4%;
      transform: translateY(-50%);
    }
    .btn .inline {
      display: block;
      font-size: 3.4vw;
      line-height: 1.5;
    }
  }
}