@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;700&display=swap');
/* =================================================
 * reset
 * ================================================*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, form, label, table, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  outline: none;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}
ul, ol {
  list-style: none;
}
table {
  border-spacing: 0px;
  empty-cells: show;
}
/* =================================================
 * common
 * ================================================*/
html {
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: 0.05em;
  color: #000000;
  background-color: #FFFFFF;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-feature-settings: "palt";
  width: 100%;
  overflow-x: hidden;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
*::selection {
  background: #F6AB00 none repeat scroll 0 0;
  color: #000000;
}
*::-moz-selection {
  background: #F6AB00 none repeat scroll 0 0;
  color: #000000;
}
.spOnly {
  display: none;
}
.scrollInUp, .scrollInDown {
  opacity: 0;
}
.fadeInUp {
  animation: fadeInUp 0.8s ease forwards;
}
.fadeInDown {
  animation: fadeInDown 1.5s ease forwards;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* =================================================
 * all display
 * ================================================*/
header .inner {
  max-width: 1200px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 23px 2.5% 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #717070;
}
#logo {
  max-width: 198px;
  width: 28%;
}
header nav {
  width: 72%;
}
header ul {
  display: flex;
  justify-content: flex-end;
  margin-top: -5px;
}
header li {
  padding-left: 3.5%;
  position: relative;
  transition: 0.2s all;
}
header li:first-child {
  padding-left: 0;
}
header li::after {
  content: "";
  width: 12px;
  height: 7px;
  display: inline-block;
  background: url("../img/arrow_red.png") center center no-repeat;
  background-size: 100% 100%;
  transition: 0.2s all;
  position: absolute;
  right: 0;
  top: 15px;
}
header ul a {
  background-size: 12px auto;
  padding-right: 1.3em;
  font-weight: bold;
  letter-spacing: 0;
}
header li:hover {
  color: #D70D19;
}
header li:hover::after {
  transform: translateY(0.2em);
}
#mainvisual {
  background: url("../img/bg_mainvisual_pc.jpg") center center no-repeat #73CADE;
  background-size: auto 100%;
}
#mainvisual .inner {
  width: 90%;
  max-width: 1040px;
  height: 60vw;
  max-height: 698px;
  margin: 0 auto;
  position: relative;
}
h1 {
  width: 42.69%;
  position: absolute;
  top: 5.8%;
  left: 0;
}
#mainvisual .lead01 {
  width: 30%;
  position: absolute;
  top: 53.5%;
  left: 6.2%;
}
#mainvisual .lead02 {
  width: 30%;
  position: absolute;
  top: 75.8%;
  left: 6.2%;
}
#mainvisual .package {
  width: 36.82%;
  position: absolute;
  top: 10%;
  right: 7.8%;
}
#mainvisual .winners {
  width: 11.53%;
  position: absolute;
  top: 55%;
  right: 0.5%;
}
#mainvisual .date {
  width: 50%;
  position: absolute;
  top: 75.5%;
  right: 0;
}
nav.local {
  width: 100%;
  background-color: #D70D19;
  position: relative;
  z-index: 2;
}
nav.local ul {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  border-left: 1px solid #EA858B;
}
nav.local li {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #EA858B;
  position: relative;
  transition: 0.2s all;
}
nav.local a {
  display: block;
  width: 100%;
  padding: 10.5% 34%;
  box-sizing: border-box;
}
nav.local li::after {
  content: "";
  width: 6.5%;
  height: 12%;
  display: inline-block;
  background: url("../img/arrow_white.png") center center no-repeat;
  background-size: 100% 100%;
  transition: 0.2s all;
  position: absolute;
  right: 12%;
  top: 46%;
}
nav.local li:hover {
  background-color: #E51823;
}
nav.local li:hover::after {
  transform: translateY(0.2em);
}
#prize {
  background-color: #F6AB00;
}
#prize .inner {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  background: url("../img/bg_prize_pc.png") center top no-repeat;
  background-size: 66.44% auto;
  position: relative;
  padding-bottom: 30px;
}
#prize p {
  width: 55%;
  margin: 0 auto;
  padding: 7.5% 0 3.5%;
  position: relative;
  z-index: 2;
}
#prize h2 {
  width: 37.77%;
  margin: 0 auto 5%;
  position: relative;
  z-index: 2;
}
#prize ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
#prize li {
  width: 44.44%;
  margin: 0 2.22%;
}
#prize li:last-child {
  width: 60.44%;
  margin: 4% 0 0;
}
#prize .fruit01 {
  width: 13%;
  position: absolute;
  top: 4%;
  left: 0;
}
#prize .fruit02 {
  width: 16.22%;
  position: absolute;
  top: 7%;
  right: 0;
  animation-delay: 0.2s;
}
#prize .fruit03 {
  width: 14%;
  position: absolute;
  top: 19.5%;
  left: 9.5%;
  animation-delay: 0.4s;
}
#prize .fruit04 {
  width: 11%;
  position: absolute;
  top: 20%;
  right: 15%;
  animation-delay: 0.6s;
}
#product {
  background: url("../img/bg_product_pc.png") center top no-repeat;
  margin-top: -1px;
}
#product .inner {
  width: 95%;
  max-width: 980px;
  margin: 0 auto;
  position: relative;
}
#product .applicable {
  width: 71.42%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 240px 0 1%;
}
#product .applicable .text {
  width: 51.14%;
}
#product .applicable h2 {
  width: 94.97%;
  margin-bottom: 10%;
}
#product .applicable .package {
  width: 42.85%;
}
#product .fruit01 {
  width: 11.32%;
  position: absolute;
  top: 5%;
  left: 0;
  animation-delay: 0.2s;
}
#product .fruit02 {
  width: 13.36%;
  position: absolute;
  top: 16%;
  left: 27%;
  animation-delay: 0.4s;
}
#product .fruit03 {
  width: 8.57%;
  position: absolute;
  top: 1%;
  left: 61.8%;
}
#product .fruit04 {
  width: 13.26%;
  position: absolute;
  top: -5%;
  right: 0;
  animation-delay: 0.4s;
}
#apply {
  background: url("../img/bg_apply_pc.png") center top no-repeat #DBF1F7;
}
#apply .inner {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
}
#apply h2 {
  width: 37.77%;
  margin: 0 auto 2em;
  padding-top: 250px;
}
#apply .attention {
  font-size: 70%;
  margin-top: 2em;
}
#apply .date {
  font-size: 90%;
  margin-top: 2em;
  border: 1px solid #000000;
  display: inline-block;
  padding: 1em 2.5em;
}
.txtBold {
  font-weight: bold;
}
#apply .step {
  background-color: #FFFFFF;
  border-radius: 20px;
  margin-top: 60px;
  padding: 3% 12% 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}
#apply .step .text {
  width: 58.92%;
}
#apply .step .photo {
  width: 34.94%;
}
#apply .step li {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  margin-top: 0.8em;
}
#apply .step li img {
  width: 17.36%;
  margin-right: 0.8em;
}
#apply .point {
  padding-bottom: 50px;
}
#apply .point h4 {
  font-weight: bold;
  font-size: 20px;
  background: url("../img/icon_plus.png") right 5% center no-repeat #1093D4;
  background-size: auto 35%;
  cursor: pointer;
  color: #FFFFFF;
  padding: 0.8em 0;
  margin-top: 60px;
  transition: all .2s;
}
#apply .point h4:hover {
  opacity: 0.9;
}
#apply .point h4.open {
  background-image: url("../img/icon_minus.png");
  background-size: auto 35%;
}
#apply .howto {
  text-align: left;
  font-size: 16px;
  background-color: #FFFFFF;
  font-weight: bold;
  padding: 0 4.44% 5%;
  display: none;
}
#apply .howto > p {
  padding-top: 4%;
}
.txtRed {
  color: #E50012;
}
#apply .required {
  display: flex;
  justify-content: space-between;
  margin-top: 4%;
}
#apply .receipt {
  width: 48.78%;
  margin-right: 1%;
}
#apply .case {
  width: 22.92%;
  font-weight: normal;
  font-size: 90%;
}
#apply .case .image {
  background-color: #F3F3F3;
  padding: 9% 16%;
  margin-bottom: 0.8em;
}
#apply .fruit01 {
  width: 13.66%;
  position: absolute;
  top: 75px;
  right: -50px;
}
#apply .fruit02 {
  width: 14.77%;
  position: absolute;
  top: 245px;
  left: -80px;
}
#apply .fruit03 {
  width: 16.44%;
  position: absolute;
  top: 620px;
  right: -90px;
}
#apply .fruit04 {
  width: 11.11%;
  position: absolute;
  top: 810px;
  left: -85px;
}
#terms {
  background: url("../img/bg_terms_pc.png") center top no-repeat;
}
#terms .inner {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: left;
}
#terms h2 {
  width: 37.77%;
  margin: 0 auto 3.5em;
  padding-top: 330px;
}
#terms .scrollArea {
  border: 1px solid #CCCCCC;
  padding: 4% 2% 4% 5%;
}
#terms .scrollArea .scroll {
  height: 310px;
  overflow-y: scroll;
  padding-right: 3%;
}
#terms .scrollArea h3 {
  margin-top: 1em;
  font-weight: bold;
}
#terms .scrollArea h4, .paragraph {
  margin-top: 1em;
}
#terms .scrollArea li {
  text-indent: -1em;
  padding-left: 1em;
}
#terms .scrollArea a {
  text-decoration: underline;
}
#cta {
  width: 48.88%;
  margin: 0 auto;
  padding-top: 60px;
}
#cta li:last-child {
  margin-top: 20px;
}
#cta a {
  transition: all .2s;
}
#cta a:hover {
  opacity: 0.8;
}
#terms .fruit01 {
  width: 15.11%;
  position: absolute;
  top: 110px;
  left: -80px;
  animation-delay: 0.4s;
}
#terms .fruit02 {
  width: 15%;
  position: absolute;
  top: 30px;
  left: 215px;
}
#terms .fruit03 {
  width: 14.44%;
  position: absolute;
  top: 75px;
  right: 100px;
  animation-delay: 0.2s;
}
#terms .fruit04 {
  width: 11.11%;
  position: absolute;
  top: 200px;
  right: -70px;
  animation-delay: 0.6s;
}
#contact .inner {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
  letter-spacing: 0.1em;
}
#contact h2 {
  width: 37.77%;
  margin: 0 auto 3em;
  padding-top: 120px;
}
#contact h3 {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}
#contact p {
  width: 600px;
  margin: 0 auto;
  font-size: 18px;
  margin-top: 2em;
}
#contact p.attention {
  font-size: 14px;
}
footer {
  background-color: #000063;
  text-align: center;
  color: #FFFFFF;
  padding: 0.8em;
  margin-top: 140px;
}
#fixNavi {
  position: fixed;
  right: 3%;
  bottom: 80px;
  z-index: 50;
}
#fixNavi a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 140px;
  border-radius: 100%;
  background-color: #331776;
  transition: 0.2s background;
}
#fixNavi img {
  width: 90px;
}
#fixNavi::after {
  content: "";
  width: 16px;
  height: 9px;
  display: inline-block;
  background: url("../img/arrow_white.png") center center no-repeat;
  background-size: 100% 100%;
  transition: 0.2s all;
  position: absolute;
  left: 0; right: 0;
  margin: 0 auto;
  bottom: 22px;
}
#fixNavi a:hover {
  background-color: #3C1B87;
}
#fixNavi:hover::after {
  transform: translateY(0.2em);
}

/* =================================================
 * smartphone
 * ================================================*/
@media (max-width: 767px) {
body {
  font-size: 3.6vw;
  text-align: left;
  line-height: 2;
}
.pcOnly {
  display: none;
}
.spOnly {
  display: inherit;
}
#menu {
  position: relative;
  width: 28px;
  height: 23px;
  cursor: pointer;
  margin-top: -4px;
}
#menu span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #717070;
}
#menu, #menu span {
  display: inline-block;
  transition: all .2s;
  box-sizing: border-box;
}
#menu span:nth-of-type(1) {
  top: 0;
}
#menu span:nth-of-type(2) {
  top: 10px;
}
#menu span:nth-of-type(3) {
  bottom: 0;
}
header.open span:nth-of-type(1) {
  transform: translateY(10px) rotate(45deg);
}
header.open span:nth-of-type(2) {
  opacity: 0;
}
header.open span:nth-of-type(3) {
  transform: translateY(-10px) rotate(-45deg);
}
header .inner {
  padding: 18px 22px 13px 15px;
}
#logo {
  width: 160px;
}
header nav {
  position: absolute;
  top: 63px;
  left: 0;
  width: 100%;
  font-size: 3.8vw;
  display: grid; 
  grid-template-rows: 0fr;
  transition: 0.3s grid-template-rows ease-in-out;
  z-index: 100;
}
header ul {
  display: block;
  margin-top: 0;
  overflow: hidden;
}
header li {
  padding: 0;
  border-top: 1px solid #717070;
}
header li:last-child {
  border-bottom: 1px solid #717070;
}
header ul a {
  display: block;
  padding: 0 20px;
  background: url("../img/arrow_red.png") right 28px center no-repeat rgba(255,255,255,0.95);
  background-size: 15px auto;
  line-height: 3.5;
}
header li::after {
  content: none;
}
header.open nav {
  grid-template-rows: 1fr;
}
header li:hover {
  color: inherit;
}
#mainvisual {
  background: url("../img/bg_mainvisual_sp.jpg") top center no-repeat #73CADE;
  background-size: 100%;
}
#mainvisual .inner {
  width: 100%;
  height: 222vw;
  max-height: none;
}
h1 {
  width: 79.48%;
  top: 1.8%;
  left: 0; right: 0;
  margin: 0 auto;
}
#mainvisual .lead01 {
  width: 71.15%;
  position: absolute;
  top: 68.1%;
  left: 0; right: 0;
  margin: 0 auto;
}
#mainvisual .lead02 {
  width: 71.15%;
  position: absolute;
  top: 84%;
  left: 0; right: 0;
  margin: 0 auto;
}
#mainvisual .package {
  width: 58.97%;
  position: absolute;
  top: 28%;
  left: 0; right: 0;
  margin: 0 auto;
}
#mainvisual .winners {
  width: 20.51%;
  position: absolute;
  top: 24.7%;
  right: 1.7%;
}
#mainvisual .date {
  width: 89.74%;
  position: absolute;
  top: 57.75%;
  left: 0; right: 0;
  margin: 0 auto;
}
nav.local ul {
  width: 100%;
  border-left: none;
  flex-wrap: wrap;
}
nav.local li {
  width: 50%;
  border-right: none;
  box-sizing: border-box;
}
nav.local li:nth-child(odd) {
  border-right: 1px solid #EA858B;
}
nav.local li:nth-child(even) {
  border-left: 1px solid #EA858B;
}
nav.local li:nth-child(n+3) {
  border-top: 2px solid #EA858B;
}
nav.local a {
  padding: 10% 30%;
}
nav.local li::after {
  width: 7.5%;
  height: 14%;
  right: 10%;
  top: 44%;
}
nav.local li:hover {
  background-color: inherit;
}
nav.local li:hover::after {
  transform: none;
}
#prize .inner {
  width: 100%;
  background: url("../img/bg_prize_sp.png") center top no-repeat;
  background-size: 100% auto;
  padding-bottom: 20vw;
}
#prize p {
  width: 81.79%;
  padding: 17% 0 3.5%;
}
#prize h2 {
  width: 69.23%;
  margin: 0 auto 8%;
}
#prize ul {
  display: block;
}
#prize li {
  width: 92.3%;
  margin: 0 auto 7%;
}
#prize li:last-child {
  width: 92.3%;
  margin: 0 auto;
}
#prize .fruit01 {
  width: 22.3vw;
  top: 2vw;
  left: -3vw;
}
#prize .fruit02 {
  width: 23.97vw;
  top: 9vw;
  right: -10vw;
}
#prize .fruit03 {
  width: 27.05vw;
  top: 38vw;
  left: 5vw;
}
#prize .fruit04 {
  width: 17.17vw;
  top: 39.5vw;
  right: 6vw;
}
#product {
  background: url("../img/bg_product_sp.png") center top no-repeat;
  background-size: 100% auto;
}
#product .inner {
  width: 100%;
}
#product .applicable {
  width: 89.74%;
  margin: 0 auto;
  flex-direction: row-reverse;
  padding: 8% 0 13%;
}
#product .applicable .text {
  width: 44.14%;
}
#product h2 {
  width: 69.23%;
  margin: 0 auto;
  padding-top: 35vw;
}
#product .applicable .package {
  width: 51.42%;
}
#product .fruit01 {
  width: 22.69%;
  top: -7vw;
  left: -4vw;
}
#product .fruit02 {
  width: 26.79%;
  top: 3vw;
  left: 22vw;
}
#product .fruit03 {
  width: 17.17%;
  top: -6vw;
  left: 56vw;
}
#product .fruit04 {
  width: 26.41%;
  top: -12vw;
  right: -4vw;
}
#apply {
  background: url("../img/bg_apply_sp.png") center top no-repeat #DBF1F7;
  background-size: 100% auto;
}
#apply .inner {
  font-size: 120%;
}
#apply h2 {
  width: 77.14%;
  margin: 0 auto 1.5em;
  padding-top: 22vw;
}
#apply .attention {
  font-size: 65%;
}
#apply .date {
  box-sizing: border-box;
  width: 100%;
  padding: 0.8em 1em;
  letter-spacing: 0;
  line-height: 1.5;
}
#apply .step {
  border-radius: 10px;
  margin-top: 10vw;
  padding: 10% 5.5%;
  display: block;
}
#apply .step .text {
  width: 100%;
}
#apply .step .photo {
  width: 67.25%;
  margin: 1.5em auto;
}
#apply .step li {
  font-size: 110%;
  margin-top: 0.6em;
}
#apply .step li img {
  width: 15%;
  margin-right: 0.5em;
}
#apply .point {
  padding-bottom: 15vw;
}
#apply .point h4 {
  font-size: 110%;
  background-size: auto 32%;
  padding: 0.6em 0;
  margin-top: 10vw;
}
#apply .point h4:hover {
  opacity: inherit;
}
#apply .point h4.open {
  background-size: auto 32%;
}
#apply .howto {
  font-size: 90%;
  padding: 0 5.5% 8%;
}
#apply .howto > p {
  padding-top: 5.5%;
}
#apply .required {
  flex-wrap: wrap;
  margin-top: 1.5em;
}
#apply .receipt {
  width: 86.77%;
  margin: 0 auto;
}
#apply .case {
  width: 47.5%;
  font-size: 85%;
  margin-top: 8%;
}
#apply .case .image {
  padding: 10% 23%;
}
#apply .fruit01 {
  width: 13.66%;
  position: absolute;
  top: 75px;
  right: -50px;
}
#apply .fruit02 {
  width: 14.77%;
  position: absolute;
  top: 245px;
  left: -80px;
}
#apply .fruit03 {
  width: 16.44%;
  position: absolute;
  top: 620px;
  right: -90px;
}
#apply .fruit04 {
  width: 11.11%;
  position: absolute;
  top: 810px;
  left: -85px;
}
#terms {
  background: url("../img/bg_terms_sp.png") center top no-repeat;
  background-size: 100% auto;
}
#terms .inner {
  font-size: 100%;
}
#terms h2 {
  width: 77.14%;
  margin: 0 auto 2.2em;
  padding-top: 26vw;
}
#terms .scrollArea {
  padding: 5% 1% 5% 6%;
}
#terms .scrollArea .scroll {
  height: 61vw;
  padding-right: 5%;
}
#cta {
  width: 100%;
  margin: 0 auto;
  padding-top: 10%;
}
#cta li:last-child {
  margin-top: 4%;
}
#cta a:hover {
  opacity: inherit;
}
#contact h2 {
  width: 77.14%;
  margin: 0 auto 2.2em;
  padding-top: 20vw;
}
#contact h3 {
  text-align: left;
  font-size: 140%;
  letter-spacing: 0;
}
#contact p {
  width: 100%;
  font-size: 104%;
  margin-top: 1.5em;
  letter-spacing: 0;
}
#contact p.attention {
  font-size: 80%;
}
footer {
  margin-top: 22vw;
  margin-bottom: calc(16vw - 2px);
  padding-bottom: calc(0.8em + 2px);
}
#fixNavi {
  left: 0;
  right: 0;
  bottom: 0;
}
#fixNavi a {
  width: 100%;
  height: 16vw;
  border-radius: 0;
}
#fixNavi img {
  width: 28%;
}
#fixNavi::after {
  content: "";
  width: 3.75%;
  height: 12%;
  left: auto;
  right: 5%;
  margin: 0;
  bottom: 43%;
}
#fixNavi a:hover {
  background-color: #331776;
}
#fixNavi:hover::after {
  transform: none;
}

}

@media (max-width: 767px) and (min-width: 500px) {
header nav {
  font-size: 18px;
}
}