@charset "UTF-8";
/*! modern-css-reset */
/* Box sizing rules */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Remove default margin */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  line-height: 1;
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  line-height: 1;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/*===================================
	共通レイアウト
=====================================*/
html,
body {
  width: 100%;
  height: 100%;
}

#mainContents {
  font-family: "Zen Maru Gothic", serif;
  font-style: normal;
  color: #fff;
  margin: 0;
}

/* Inherit fonts for inputs and buttons */
#mainContents input,
#mainContents button,
#mainContents textarea,
#mainContents select {
  font: inherit;
}


main {
  display: block;
}

/*===================================
	TOP
=====================================*/
/* common
-------------------------------------*/
.nagano-share {
  /*----------共通----------*/
  /*----------カラム----------*/
  /*----------背景アニメーション----------*/
  /*----------ハンバーガー／左カラム----------*/
  /*----------ヘッダー----------*/
  /*----------キャンペーン期間----------*/
  /*----------応募方法----------*/
  /*----------賞品----------*/
  /*----------応募条件----------*/
  /*---------コピーライト----------*/
}
.nagano-share h2,
.nagano-share h3,
.nagano-share h4,
.nagano-share h5 {
  text-align: center;
}
.nagano-share h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 52px auto 22px;
}
.nagano-share h4 {
  font-size: 14px;
  font-weight: 700;
}
.nagano-share .-btn {
  text-align: center;
  margin-bottom: 46px;
}
.nagano-share .-btn a {
  display: inline-block;
  padding: 0.8em 4em;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 30px;
  color: #74C678;
  background: #fff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-decoration: none;
}
.nagano-share .-btn a:hover {
  color: #fff;
  background: #C1EDB2;
}
.nagano-share .-fadein {
  opacity: 0;
  -webkit-transform: translate(0, 30px);
          transform: translate(0, 30px);
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
}
.nagano-share .-fadein.-scrollin {
  opacity: 1 !important;
  -webkit-transform: translate(0, 0) !important;
          transform: translate(0, 0) !important;
}
.nagano-share .-wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100vw;
  padding-right: calc((100vw - 375px) / 2);
  line-height: 1.6;
}
@media screen and (max-width: 999px) {
  .nagano-share .-wrapper {
    padding: 0 calc((100vw - 375px) / 2);
  }
}
@media screen and (max-width: 850px) {
  .nagano-share .-wrapper {
    padding: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.nagano-share .-left {
  position: sticky;
  top: 0;
  width: calc((100% - 375px) / 2);
  height: 100vh;
  min-height: 500px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 999px) {
  .nagano-share .-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #69C16D;
    display: block;
    padding: 50px 0 10px;
    margin: 0 auto;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  }
  .nagano-share .-left.-active {
    left: 0;
    opacity: 1;
    visibility: visible;
    z-index: 10000;
  }
}
.nagano-share .-center {
  display: block;
  position: relative;
  max-width: 375px;
  width: 100%;
  color: #fff;
  background: #69C16D;
  margin: 0 auto;
  z-index: 3;
  padding: 23px;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(88, 137, 88, 0.75);
          box-shadow: 0px 0px 20px 0px rgba(88, 137, 88, 0.75);
}
@media screen and (max-width: 850px) {
  .nagano-share .-center {
    max-width: 100%;
    padding: 8% 5% 5%;
    -webkit-box-shadow: 0;
            box-shadow: 0;
  }
}
.nagano-share .-center .-box {
  text-align: center;
  padding: 23px 23px 34px;
  background: #fff;
  border-radius: 10px;
  color: #000;
}
@media screen and (max-width: 850px) {
  .nagano-share .-center .-box {
    padding: 5% 5% 8%;
  }
}
.nagano-share .-center .-nobox {
  padding: 23px 0 34px;
}
@media screen and (max-width: 850px) {
  .nagano-share .-center .-nobox {
    padding: 5% 0 8%;
  }
}
.nagano-share .-center .-nobox ul li {
  text-indent: -1em;
  padding-left: 1em;
  font-size: 14px;
  line-height: 26px;
}
.nagano-share .-center .-nobox ul li::before {
  content: "・";
}
.nagano-share .-bg {
  position: fixed;
  width: 100vw;
  height: calc(100vh + 90px);
  top: -90px;
  left: 0;
  background: #C1EDB2 url("../img/bg.png") repeat-y;
  background-position: 0 0;
  background-size: cover;
  -webkit-animation: bg 300s infinite linear;
  animation: bgroop 300s infinite linear;
}
@-webkit-keyframes bgroop {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -2114px;
  }
}
@keyframes bgroop {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -2114px;
  }
}
@media screen and (max-width: 750px) {
  .nagano-share .-bg {
    display: none; }
}
.nagano-share .-toggle {
  display: none;
}
@media screen and (max-width: 999px) {
  .nagano-share .-toggle {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 56px;
    height: 56px;
    background: #233B9A;
    border-radius: 56px;
    cursor: pointer;
    z-index: 10001;
  }
  .nagano-share .-toggle:before, .nagano-share .-toggle:after {
    position: absolute;
    content: "";
    width: 24px;
    height: 4px;
    border-radius: 4px;
    background: #fff;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }
  .nagano-share .-toggle:before {
    top: 20px;
    left: 16px;
  }
  .nagano-share .-toggle:after {
    bottom: 20px;
    left: 16px;
  }
  .nagano-share .-toggle.-active {
    background: #fff;
  }
  .nagano-share .-toggle.-active:before, .nagano-share .-toggle.-active:after {
    background: #233B9A;
  }
  .nagano-share .-toggle.-active:before {
    -webkit-transform: rotate(333deg);
            transform: rotate(333deg);
    top: 26px;
  }
  .nagano-share .-toggle.-active:after {
    -webkit-transform: rotate(-333deg);
            transform: rotate(-333deg);
    bottom: 26px;
  }
  .nagano-share .-toggle.-fixed {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1001;
  }
  .nagano-share .-toggle.-active {
    position: fixed;
    top: 10px;
  }
}
.nagano-share .-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0;
  background: #69C16D;
  border-radius: 10px;
  padding: 45px;
  margin: 0 20px;
}
@media screen and (max-width: 999px) {
  .nagano-share .-nav {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0 auto;
  }
}
.nagano-share .-nav h2 {
  display: none;
}
@media screen and (max-width: 999px) {
  .nagano-share .-nav h2 {
    display: block;
    width: 100%;
  }
  .nagano-share .-nav h2 img {
    display: block;
    width: 74%;
    margin: 0 auto 24px;
  }
}
.nagano-share .-nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}
@media screen and (max-width: 999px) {
  .nagano-share .-nav ul {
    width: 70%;
    margin-bottom: 37px;
  }
}
.nagano-share .-nav ul:first-of-type {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.nagano-share .-nav ul:first-of-type li {
  margin-bottom: 20px;
  border-bottom: 1px solid #fff;
}
.nagano-share .-nav ul:first-of-type li a {
  position: relative;
  display: block;
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  padding: 10px 1em 10px 0;
}
.nagano-share .-nav ul:first-of-type li a:before, .nagano-share .-nav ul:first-of-type li a:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 50%;
  right: 10px;
  width: 1px;
  height: 7px;
  border-radius: 9999px;
  background-color: #fff;
  -webkit-transform-origin: 50% calc(100% - 0.5px);
          transform-origin: 50% calc(100% - 0.5px);
}
.nagano-share .-nav ul:first-of-type li a:before {
  -webkit-transform: rotate(41.5deg);
          transform: rotate(41.5deg);
}
.nagano-share .-nav ul:first-of-type li a:after {
  -webkit-transform: rotate(-41.5deg);
          transform: rotate(-41.5deg);
}
.nagano-share .-nav ul:first-of-type li a span {
  font-size: 14px;
}
.nagano-share .-nav ul:last-of-type {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0 21px;
}
@media screen and (max-width: 999px) {
  .nagano-share .-nav ul:last-of-type {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0 38px;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
}
.nagano-share .-nav ul:last-of-type li a {
  display: inline-block;
}
.nagano-share .-nav ul:last-of-type li a img {
  width: 32px;
}
@media screen and (max-width: 999px) {
  .nagano-share .-nav ul:last-of-type li a img {
    width: 60px;
  }
}
.nagano-share .-nav p {
  display: none;
}
@media screen and (max-width: 999px) {
  .nagano-share .-nav p {
    display: block;
    text-align: center;
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0.06em;
    margin-top: auto;
    margin-bottom: 0;
    padding: 0;
  }
}
.nagano-share .-head {
  margin: 0;
  padding: 0;
}
.nagano-share .-head h2 {
  width: 796px;
  margin-left: -230px;
}
@media screen and (max-width: 850px) {
  .nagano-share .-head h2 {
    width: 92vw;
    margin: 0 auto;
  }
}
@media screen and (max-width: 540px) {
  .nagano-share .-head h2 {
    margin-top:40px;
  }
}
@media screen and (max-width: 435px) {
  .nagano-share .-head h2 {
    margin-top:50px;
  }
}
.nagano-share .-head h2 picture {
  width: 100%;
  margin-bottom: 25px;
}
.nagano-share .-head p {
  text-align: center;
  font-size: 19px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.nagano-share .-head .-point2000 {
  width: 560px;
  max-width: 560px;
  margin-top: 1em;
  margin-left: -115px;
}
@media screen and (max-width: 850px) {
  .nagano-share .-head .-point2000 {
    width: 100vw;
    max-width: 100vw;
    margin: 1em calc(50% - 50vw) 0;
  }
}
.nagano-share .-head .-point2000 img {
  width: 100vw;
}
@media screen and (max-width: 850px) {
  .nagano-share .-head .-point2000 img {
    width: 100vw;
  }
}
.nagano-share .-period h3 {
  margin-top: 0;
}
.nagano-share .-period img:not(:last-of-type) {
  margin-bottom: 35px;
}
.nagano-share .-apply .-img {
  display: block;
  width: 88%;
  margin: 30px auto 37px;
}
.nagano-share .-apply p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 0.004em;
}
.nagano-share .-apply .-part1 h4 img {
  display: block;
  width: 197px;
  margin: 0 auto;
}
.nagano-share .-apply .-part1 p {
  margin-bottom: 50px;
}
.nagano-share .-apply .-part2 h4 img {
  display: block;
  width: 275px;
  margin: 0 auto;
}
.nagano-share .-apply .-part2 p {
  margin-bottom: 35px;
}
.nagano-share .-apply .-hashtag {
  padding: 24px 0;
  border-top: 1px dotted #69C16D;
  border-bottom: 1px dotted #69C16D;
  margin-bottom: 20px;
}
.nagano-share .-apply .-hashtag ul {
  color: #69C16D;
  font-size: 18px;
  line-height: 33.25px;
  font-weight: 500;
}
.nagano-share .-apply .-asterisk {
  text-align: left;
  font-size: 14px;
  line-height: 26px;
  font-weight: 300;
}
.nagano-share .-prize p {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
}
.nagano-share .-prize picture {
  width: 500px;
  max-width: 500px;
  margin-left: -107px;
  margin-top: 23px;
}
@media screen and (max-width: 850px) {
  .nagano-share .-prize picture {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}
.nagano-share .-prize picture img {
  width: 100%;
}
.nagano-share .-condition h4 {
  text-align: left;
}
.nagano-share .-copyright {
  text-align: center;
  font-size: 17px;
  line-height: 56px;
  letter-spacing: 0.06em;
  margin-bottom: 1em;
}
.nagano-share .-copyright span {
  font-size: 14px;
}


.hashtag-list {
  list-style: none;
  padding: 0;
}

.hashtag-list li {
  position: relative;
  padding: 0px;
  margin: 10px 0;
  background: #fff; /* 元の背景がある場合 */
}

/* 終了しましたの帯 */
.hashtag-list li.finished::before {
  content: "終了しました";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 192, 203, 0.3); /* ピンク背景 半透明 */
  color: red;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 下の要素クリック可能に */
    /* 白い縁取り（2px相当） */
  text-shadow:
    -2px -2px 0 #fff,
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     2px  2px 0 #fff;
}



.prize-box p {
  position: relative;
  padding: 2px;
  margin: 6px 0;
  background: #fff; /* 必要なら元の背景 */
}

/* 終了した項目に適用 */
.prize-box p.finished::before {
  content: "終了しました";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 192, 203, 0.3); /* ピンク 半透明 */
  color: red;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 下の要素操作を妨げない */
    /* 白い縁取り（2px相当） */
  text-shadow:
    -2px -2px 0 #fff,
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     2px  2px 0 #fff;
}
