@charset "UTF-8";
@use './base/base' as *;
html {
  font-size: 0.66666666667vw;
  scroll-behavior: smooth;
}

@media screen and (max-width: 768px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (min-width: 1400px) {
  html {
    font-size: 10px;
  }
}
html {
  overflow-x: hidden;
}
@media screen and (max-width: 768px) {
  html {
    overflow-x: hidden;
  }
}

body {
  min-width: auto;
  font-family: "Noto Sans JP", sans-serif;
  color: #805022;
  background: url("../images/pc/bg_1500.png") no-repeat left top fixed;
  background-size: cover;
}
@media screen and (min-width: 1500px) {
  body {
    background: url("../images/pc/bg_2000.png") no-repeat left top fixed;
    background-size: cover;
  }
}
@media screen and (max-width: 768px) {
  body {
    background: url("../images/sp/bg_sp.png") no-repeat left top fixed;
    background-size: cover;
    background: none;
  }
}

.background {
  background: url("../images/sp/bg_sp.png") no-repeat;
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.forPC {
  display: block;
}
@media screen and (max-width: 768px) {
  .forPC {
    display: none;
  }
}

.forSP {
  display: none;
}
@media screen and (max-width: 768px) {
  .forSP {
    display: block;
  }
}

a {
  transition: all 0.4s ease;
}

a:hover {
  opacity: 0.7;
}

section {
  padding: 0 0 0 0;
}

main {
  font-size: 0.6666666667vw;
  width: 100%;
  overflow: clip;
}
@media screen and (max-width: 768px) {
  main {
    font-size: 1.3333333333vw;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 1500px) {
  main {
    font-size: 10px;
  }
}

/* アニメ */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeSquish {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(1);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  70% {
    transform: translateY(0) scale(0.9, 1.1);
    /* 横に収縮・縦に伸びる */
  }
  85% {
    transform: translateY(0) scale(1.05, 0.95);
    /* 縦に潰れ、横に少し広がる */
  }
  100% {
    transform: translateY(0) scale(1, 1);
    opacity: 1;
  }
}
.mv {
  width: 100%;
  position: relative;
  margin: auto auto auto;
  padding: 6.8em 0;
}
@media screen and (max-width: 768px) {
  .mv {
    padding: 6.8em 0 10.6vw;
  }
}
.mv h1 {
  width: 111.009em;
  margin: auto;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease-out forwards;
  animation-delay: 0.3s;
}
@media screen and (max-width: 768px) {
  .mv h1 {
    width: 100%;
  }
}
.mv p.start {
  width: 77.4650em;
  margin: auto auto 3.8em;
  opacity: 0;
  transform: translateY(20px) scale(1);
  animation: fadeSquish 1.2s ease-out forwards;
  animation-delay: 0.9s;
}
@media screen and (max-width: 768px) {
  .mv p.start {
    width: 90.6vw;
    margin: auto auto 0;
  }
}

.innerLink {
  width: 100%;
  height: 10.5em;
  background: #1D2087;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .innerLink {
    height: 28.5918666667vw;
  }
}
.innerLink ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.8em;
}
@media screen and (max-width: 768px) {
  .innerLink ul {
    gap: 1.7333333333vw;
  }
}
.innerLink ul li {
  width: 20em;
}
@media screen and (max-width: 768px) {
  .innerLink ul li {
    width: 21.1110666667vw;
  }
}
.innerLink.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}

section.kikan {
  width: 100%;
  padding: 11.6em 0 0;
}
@media screen and (max-width: 768px) {
  section.kikan {
    padding: 10vw 0 21vw;
  }
}
@media screen and (max-width: 768px) {
  section.kikan.pt20 {
    padding: 35vw 0 21vw;
  }
}
section.kikan h2 {
  width: 45em;
  margin: auto auto 3.5em;
}
@media screen and (max-width: 768px) {
  section.kikan h2 {
    width: 80vw;
    margin: auto auto 5.3vw;
  }
}
section.kikan h3 {
  width: 104.8em;
  margin: auto auto 3.3em;
}
@media screen and (max-width: 768px) {
  section.kikan h3 {
    width: 85.7vw;
  }
}
section.kikan p.attention {
  width: 100.902em;
  margin: auto auto 5em;
}
@media screen and (max-width: 768px) {
  section.kikan p.attention {
    width: 89vw;
  }
}
section.kikan .ouboBox {
  width: 110em;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  section.kikan .ouboBox {
    width: 90.6vw;
    flex-direction: column;
    row-gap: 5.6vw;
  }
}
section.kikan .ouboBox .oubo {
  width: 53em;
  height: 57.6em;
  background: url("../images/pc/bg_oubo.png") no-repeat;
  background-size: contain;
  overflow: hidden;
  padding-top: 4em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  section.kikan .ouboBox .oubo {
    width: 100%;
    height: 100.2666666667vw;
    border-radius: 0;
    padding-top: 7.4vw;
    padding-bottom: 7.4vw;
    background: url("../images/sp/bg_oubo_sp.png") no-repeat;
    background-size: contain;
  }
}
@media screen and (max-width: 768px) {
  section.kikan .ouboBox .oubo.viaPost {
    width: 100%;
    height: 97.8666666667vw;
    border-radius: 0;
    padding-top: 7.4vw;
    padding-bottom: 7.4vw;
    background: url("../images/sp/bg_oubo_viaPost_sp.png") no-repeat;
    background-size: contain;
  }
}
section.kikan .ouboBox .viaLine h4 {
  width: 22.030em;
  margin: auto auto 2.8em;
}
@media screen and (max-width: 768px) {
  section.kikan .ouboBox .viaLine h4 {
    width: 38.9970666667vw;
    margin: auto auto 5.3vw;
  }
}
section.kikan .ouboBox .viaLine p.span01 {
  width: 42.296em;
  margin: auto auto 3.6em;
}
@media screen and (max-width: 768px) {
  section.kikan .ouboBox .viaLine p.span01 {
    width: 74.9293333333vw;
    margin: auto auto 6.4vw;
  }
}
section.kikan .ouboBox .viaLine p.receipt01 {
  width: 38.1em;
  margin: auto auto 4em;
}
@media screen and (max-width: 768px) {
  section.kikan .ouboBox .viaLine p.receipt01 {
    width: 67.4vw;
  }
}
section.kikan .ouboBox .viaLine p.lead01 {
  width: 43em;
  margin: auto 0 3.4em 3.3em;
}
@media screen and (max-width: 768px) {
  section.kikan .ouboBox .viaLine p.lead01 {
    width: 76.2vw;
    margin: auto auto 5.3vw;
  }
}
section.kikan .ouboBox .viaLine p.btn {
  width: 45em;
  margin: auto;
}
@media screen and (max-width: 768px) {
  section.kikan .ouboBox .viaLine p.btn {
    width: 80vw;
  }
}
section.kikan .ouboBox .viaPost h4 {
  width: 24.3388em;
  margin: auto auto 2.8em;
}
@media screen and (max-width: 768px) {
  section.kikan .ouboBox .viaPost h4 {
    width: 43.5453333333vw;
    margin: auto auto 5.6vw;
  }
}
section.kikan .ouboBox .viaPost p.span02 {
  width: 33.4em;
  margin: auto auto 5.8em;
}
@media screen and (max-width: 768px) {
  section.kikan .ouboBox .viaPost p.span02 {
    width: 59.436vw;
    margin: auto auto 4.8vw;
  }
}
section.kikan .ouboBox .viaPost p.receipt02 {
  width: 29.9em;
  margin: auto auto 13.5em;
}
@media screen and (max-width: 768px) {
  section.kikan .ouboBox .viaPost p.receipt02 {
    width: 52.9vw;
    margin: auto auto 5vw;
  }
}
section.kikan .ouboBox .viaPost p.btn {
  width: 45em;
  margin: auto;
}
@media screen and (max-width: 768px) {
  section.kikan .ouboBox .viaPost p.btn {
    width: 80vw;
  }
}

section.prize {
  margin-bottom: 13em;
  padding: 3em 0 0;
}
section.prize h2 {
  width: 53.721em;
  margin: auto;
  margin-top: -12em;
  padding-top: 12em;
}
@media screen and (max-width: 768px) {
  section.prize h2 {
    width: 80.6vw;
    margin-top: -29vw;
    padding-top: 29vw;
  }
}
section.prize ul.prizes {
  width: 110em;
  margin: 2.7em auto auto;
  display: flex;
  flex-direction: column;
  row-gap: 3.8em;
}
@media screen and (max-width: 768px) {
  section.prize ul.prizes {
    width: 90.6vw;
    margin: 9vw auto auto;
    row-gap: 7.7vw;
  }
}
section.prize ul.prizes::before, section.prize ul.prizes::after {
  display: none;
}
section.prize ul.prizes li {
  width: 100%;
  position: relative;
}
section.prize ul.prizes li::before {
  width: 18.78em;
  height: 12.05em;
  background: url("../images/pc/ribon01.webp") no-repeat;
  background-size: 100%;
  position: absolute;
  top: -1.3em;
  left: -2.2em;
}
@media screen and (max-width: 768px) {
  section.prize ul.prizes li::before {
    width: 33.3vw;
    height: 21.4vw;
    top: -2.5vw;
    left: -4vw;
  }
}
section.prize ul.prizes li:nth-of-type(2)::before {
  width: 20.17em;
  height: 12.05em;
  background: url("../images/pc/ribon02.webp") no-repeat;
  background-size: 100%;
  top: -1.2em;
}
@media screen and (max-width: 768px) {
  section.prize ul.prizes li:nth-of-type(2)::before {
    width: 35.8vw;
    height: 21.3vw;
    top: -2vw;
    left: -4vw;
  }
}
section.prize ul.prizes li:nth-of-type(3)::before {
  width: 20.17em;
  height: 12.05em;
  background: url("../images/pc/ribon03.webp") no-repeat;
  background-size: 100%;
  top: -1.9em;
}
@media screen and (max-width: 768px) {
  section.prize ul.prizes li:nth-of-type(3)::before {
    width: 35.8vw;
    height: 23vw;
    top: -3.6vw;
    left: -4vw;
  }
}

section.outline {
  margin-bottom: 18em;
  padding: 3em 0 0;
}
section.outline h2 {
  width: 45em;
  margin: auto auto 3.7em;
  margin-top: -12em;
  padding-top: 12em;
}
@media screen and (max-width: 768px) {
  section.outline h2 {
    width: 80vw;
    margin: auto auto 4.2vw;
    margin-top: -29vw;
    padding-top: 29vw;
  }
}
section.outline h3 {
  width: 101.7em;
  margin: auto;
}
@media screen and (max-width: 768px) {
  section.outline h3 {
    width: 71.6vw;
  }
}
section.outline p.p_attention {
  width: 80em;
  margin: 5.5em auto 3.5em;
}
@media screen and (max-width: 768px) {
  section.outline p.p_attention {
    width: 90.6vw;
    margin: 4.8vw auto 8vw;
  }
}
section.outline .byLine {
  width: 110em;
  margin: auto;
  border-radius: 2em;
  border: 0.1em solid #FFAC5A;
  background: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 5.7em;
  box-shadow: 0 3.4px 10px 0 rgba(181, 101, 31, 0.5);
}
@media screen and (max-width: 768px) {
  section.outline .byLine {
    width: 90.6vw;
    padding-bottom: 10.9vw;
  }
}
section.outline .byLine h3 {
  width: 100%;
  background: #e7ee5b;
  margin: auto auto 6em;
  margin-top: -12em;
  padding-top: 12em;
}
@media screen and (max-width: 768px) {
  section.outline .byLine h3 {
    margin-top: -29vw;
    padding-top: 29vw;
  }
}
section.outline .byLine ul.gaiyou {
  width: 88em;
  margin: auto auto 5.4em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8em;
  row-gap: 5.8em;
}
@media screen and (max-width: 768px) {
  section.outline .byLine ul.gaiyou {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
}
section.outline .byLine ul.gaiyou::before, section.outline .byLine ul.gaiyou::after {
  display: none;
}
section.outline .byLine ul.gaiyou li {
  width: 76.783em;
}
@media screen and (max-width: 768px) {
  section.outline .byLine ul.gaiyou li {
    width: 67.6vw;
  }
}
@media screen and (max-width: 768px) {
  section.outline .byLine ul.gaiyou li:nth-of-type(2) {
    width: 39vw;
  }
}
section.outline .byLine ul.gaiyou li:nth-of-type(3) {
  width: 52.3em;
}
@media screen and (max-width: 768px) {
  section.outline .byLine ul.gaiyou li:nth-of-type(3) {
    width: 78.6vw;
  }
}
section.outline .byLine ul.step {
  width: 96em;
  margin: auto auto 5.4em;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  section.outline .byLine ul.step {
    width: 74.6666666667vw;
    margin: auto auto 8.8vw;
    flex-direction: column;
    row-gap: 9vw;
  }
}
section.outline .byLine ul.step::before, section.outline .byLine ul.step::after {
  display: none;
}
section.outline .byLine ul.step li {
  width: 36.9em;
}
@media screen and (max-width: 768px) {
  section.outline .byLine ul.step li {
    width: 100%;
  }
}
section.outline .byLine ul.step li:nth-of-type(2) {
  width: 36.6em;
}
@media screen and (max-width: 768px) {
  section.outline .byLine ul.step li:nth-of-type(2) {
    width: 100%;
  }
}
section.outline .byLine ul.step li:nth-of-type(3) {
  width: 36.6em;
}
@media screen and (max-width: 768px) {
  section.outline .byLine ul.step li:nth-of-type(3) {
    width: 62vw;
    margin: auto;
    margin-left: 6.5vw;
  }
}
section.outline .byLine figure {
  width: 100em;
  margin: auto auto 5.4em;
}
@media screen and (max-width: 768px) {
  section.outline .byLine figure {
    width: 80vw;
  }
}
section.outline .byLine p.btn {
  width: 45em;
  margin: auto;
}
@media screen and (max-width: 768px) {
  section.outline .byLine p.btn {
    width: 80vw;
  }
}
section.outline .byPost {
  width: 110em;
  margin: 5.4em auto auto;
  border-radius: 2em;
  border: 0.1em solid #C1B598;
  background: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 5.7em;
  box-shadow: 0 3.4px 10px 0 rgba(181, 101, 31, 0.5);
}
@media screen and (max-width: 768px) {
  section.outline .byPost {
    width: 90.6vw;
    padding-bottom: 10.9vw;
  }
}
section.outline .byPost h3 {
  width: 100%;
  background: #7db4e1;
  margin: auto auto 6em;
  margin-top: -12em;
  padding-top: 12em;
}
@media screen and (max-width: 768px) {
  section.outline .byPost h3 {
    margin-top: -29vw;
    padding-top: 29vw;
  }
}
section.outline .byPost ul.gaiyou {
  width: 88em;
  margin: auto auto 5.4em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8em;
  row-gap: 5.8em;
}
@media screen and (max-width: 768px) {
  section.outline .byPost ul.gaiyou {
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin: auto auto 2vw;
  }
}
section.outline .byPost ul.gaiyou::before, section.outline .byPost ul.gaiyou::after {
  display: none;
}
section.outline .byPost ul.gaiyou li {
  width: 40em;
}
@media screen and (max-width: 768px) {
  section.outline .byPost ul.gaiyou li {
    width: 67.6vw;
  }
}
@media screen and (max-width: 768px) {
  section.outline .byPost ul.gaiyou li:nth-of-type(2) {
    width: 65vw;
  }
}
section.outline .byPost ul.gaiyou li:nth-of-type(3) {
  width: 56em;
}
@media screen and (max-width: 768px) {
  section.outline .byPost ul.gaiyou li:nth-of-type(3) {
    width: 52.7vw;
  }
}
section.outline .byPost ul.step {
  width: 100%;
  margin: auto auto 5.4em;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  section.outline .byPost ul.step {
    width: 81vw;
    margin: auto auto 10vw;
    flex-direction: column;
    row-gap: 7vw;
  }
}
section.outline .byPost ul.step::before, section.outline .byPost ul.step::after {
  display: none;
}
section.outline .byPost ul.step li {
  width: 38.5em;
}
@media screen and (max-width: 768px) {
  section.outline .byPost ul.step li {
    width: 100%;
  }
}
section.outline .byPost ul.step li:nth-of-type(2) {
  width: 71.5em;
}
@media screen and (max-width: 768px) {
  section.outline .byPost ul.step li:nth-of-type(2) {
    width: 75vw;
    margin-left: 5vw;
  }
}
section.outline .byPost figure {
  width: 92.8em;
  margin: auto auto auto;
}
@media screen and (max-width: 768px) {
  section.outline .byPost figure {
    width: 64.6vw;
  }
}
section.outline .byPost figure.btn_dl01 {
  width: 64.3em;
  margin: auto auto 1.4em;
}
@media screen and (max-width: 768px) {
  section.outline .byPost figure.btn_dl01 {
    width: 80vw;
    margin: auto auto 2.4vw;
  }
}
section.outline .byPost figure.btn_dl02 {
  width: 64.3em;
  margin: auto auto auto;
}
@media screen and (max-width: 768px) {
  section.outline .byPost figure.btn_dl02 {
    width: 80vw;
  }
}
section.outline .products {
  width: 110em;
  margin: 5.4em auto auto;
  border-radius: 2em;
  border: 0.2em solid #1D2087;
  background: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 9em;
  box-shadow: 0 3.4px 10px 0 rgba(181, 101, 31, 0.5);
}
@media screen and (max-width: 768px) {
  section.outline .products {
    width: 90.6vw;
    padding-bottom: 10.9vw;
  }
}
section.outline .products h3 {
  width: 100%;
  background: #1D2087;
  margin: auto auto 6em;
}
@media screen and (max-width: 768px) {
  section.outline .products h3 {
    margin: auto auto auto;
  }
}
section.outline .products .intro {
  width: 95.6em;
  margin: 8em auto 7.4em;
  padding-bottom: 5.6em;
  background: url("../images/pc/bg_pro_int.png") no-repeat center bottom;
  background-size: 100%;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  section.outline .products .intro {
    width: 80vw;
    flex-direction: column;
    margin: 7.7vw auto auto;
    background: none;
  }
}
@media screen and (max-width: 768px) {
  section.outline .products .intro > h4 {
    width: 59vw;
    margin: auto auto 2vw;
  }
}
section.outline .products .intro figure {
  width: 43em;
}
@media screen and (max-width: 768px) {
  section.outline .products .intro figure {
    order: 1;
    width: 76.4vw;
    margin-bottom: 7vw;
  }
}
section.outline .products .intro .txts {
  width: 45em;
  padding-top: 0;
}
@media screen and (max-width: 768px) {
  section.outline .products .intro .txts {
    width: 76.4vw;
    order: 2;
  }
}
section.outline .products .intro .txts h4 {
  width: 44.44em;
  margin: auto auto 5em;
}
section.outline .products .intro .txts p.btn3 {
  width: 100%;
}
@media screen and (max-width: 768px) {
  section.outline .products .intro .txts p.btn3 {
    width: 80vw;
  }
}
section.outline .products ul.example {
  width: 87em;
  margin: auto auto 0;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  section.outline .products ul.example {
    width: 100%;
    flex-direction: column;
    margin: 3vw auto 0;
    row-gap: 13.3vw;
  }
}
section.outline .products ul.example::before, section.outline .products ul.example::after {
  display: none;
}
section.outline .products ul.example li {
  width: 36.6em;
  padding-top: 10em;
}
@media screen and (max-width: 768px) {
  section.outline .products ul.example li {
    padding-top: 0;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  section.outline .products ul.example li:nth-of-type(1) img {
    width: 65vw;
    margin-left: 11.7vw;
  }
}
section.outline .products ul.example li:nth-of-type(2) {
  width: 38.28em;
  padding-top: 0;
}
@media screen and (max-width: 768px) {
  section.outline .products ul.example li:nth-of-type(2) {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  section.outline .products ul.example li:nth-of-type(2) img {
    width: 68vw;
    margin-left: 12.8vw;
  }
}
section.outline .products p.attproducts {
  width: 104em;
  margin: auto;
}
@media screen and (max-width: 768px) {
  section.outline .products p.attproducts {
    width: 74.1vw;
  }
}
section.outline .products p.attproducts img {
  width: 56.67em;
}
@media screen and (max-width: 768px) {
  section.outline .products p.attproducts img {
    width: 100%;
  }
}
section.outline .precautions {
  width: 110em;
  margin: 5.4em auto auto;
  border-radius: 5.3em;
  border: 1px solid #846B32;
  background: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 0;
  box-shadow: 0 3.4px 10px 0 rgba(181, 101, 31, 0.5);
}
@media screen and (max-width: 768px) {
  section.outline .precautions {
    width: 90.6vw;
    padding-bottom: 0;
    border-radius: 7.7333333333vw;
  }
}
section.outline .precautions.open {
  border-radius: 2em;
}
@media screen and (max-width: 768px) {
  section.outline .precautions.open {
    padding-bottom: 4vw;
    border-radius: 2.6666666667vw;
  }
}
section.outline .precautions h3 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  height: 10.6em;
  background-color: #846B32;
  background-image: url("../images/pc/h3_precautions.png");
  background-repeat: no-repeat;
  background-size: 111em;
  background-position: center;
  margin: auto auto auto;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  section.outline .precautions h3 {
    margin: auto auto auto;
    background-image: url("../images/sp/h3_precautions_sp.png");
    background-repeat: no-repeat;
    background-size: 90.6666666667vw;
  }
}
section.outline .precautions h3.open {
  background-image: url("../images/pc/h3_precautions_open.png");
  background-repeat: no-repeat;
  background-size: 111em;
  background-position: center;
}
@media screen and (max-width: 768px) {
  section.outline .precautions h3.open {
    background-image: url("../images/sp/h3_precautions_sp_open.png");
    background-repeat: no-repeat;
    background-size: 90.6666666667vw;
  }
}
section.outline .precautions .precautions_body {
  color: #464646;
  padding: 0 8em;
  font-feature-settings: "palt";
}
@media screen and (max-width: 768px) {
  section.outline .precautions .precautions_body {
    padding: 0 7.7333333333vw;
  }
}
section.outline .precautions .precautions_body.open {
  padding: 6.4em 8em;
}
@media screen and (max-width: 768px) {
  section.outline .precautions .precautions_body.open {
    padding: 6.4em 7.7333333333vw;
  }
}
section.outline .precautions .precautions_body p.diamond {
  background-image: url('data:image/svg+xml;utf8,<svg id="layout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"><rect fill="%23464646" x="1.9" y="1.9" width="9.19" height="9.19" transform="translate(-2.69 6.5) rotate(-45)"/></svg>');
  background-repeat: no-repeat;
  background-position: top 1.2rem left;
  background-size: 1.3rem;
  padding-left: 2.2rem;
}
@media screen and (max-width: 768px) {
  section.outline .precautions .precautions_body p.diamond {
    background-position: top 1.6rem left;
  }
}
section.outline .precautions .precautions_body p.diamond.small {
  background-position: top 0.9rem left;
}
@media screen and (max-width: 768px) {
  section.outline .precautions .precautions_body p.diamond.small {
    background-position: top 0.6em left;
  }
}
section.outline .precautions .precautions_body p.large {
  font-size: 2.3em;
  font-weight: 900;
  line-height: 1.56;
  letter-spacing: -0.005rem;
}
@media screen and (max-width: 768px) {
  section.outline .precautions .precautions_body p.large {
    font-size: 3.7333333333vw;
    line-height: 6vw;
    text-align: justify;
  }
}
section.outline .precautions .precautions_body p.large + p.large {
  margin-top: 0.9em;
}
section.outline .precautions .precautions_body p.small {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.875;
}
@media screen and (max-width: 768px) {
  section.outline .precautions .precautions_body p.small {
    font-size: 3.2vw;
    line-height: 5.3333333333vw;
    text-align: justify;
  }
}
section.outline .precautions .precautions_body p.small + p.small {
  margin-top: 1.8em;
}
section.outline .precautions .precautions_body p.small span.pink {
  color: #D4347E;
}
section.outline .precautions .precautions_body p.small span.hosoku {
  font-size: 0.8125em;
  display: block;
}
@media screen and (max-width: 768px) {
  section.outline .precautions .precautions_body p.small span.hosoku {
    margin-top: 0.5em;
  }
}
section.outline .precautions .precautions_body p.attention {
  font-size: 1.6em;
  font-weight: 500;
  line-height: 1.875;
  margin-top: 1em;
  margin-left: 0.375em;
  margin-bottom: 1.8em;
}
@media screen and (max-width: 768px) {
  section.outline .precautions .precautions_body p.attention {
    font-size: 2.9333333333vw;
    line-height: 5.0666666667vw;
    margin-bottom: 2.6666666667vw;
    text-align: justify;
  }
}
section.outline .precautions .precautions_body p.attention + * {
  margin-top: 2.6rem;
}
@media screen and (max-width: 768px) {
  section.outline .precautions .precautions_body p.attention + * {
    margin-top: 0;
  }
}
section.outline .precautions .precautions_body ul.ast {
  font-size: 1.6em;
  font-weight: 500;
  line-height: 1.875;
  list-style-type: none;
}
section.outline .precautions .precautions_body ul.ast strong {
  font-weight: 900;
}
section.outline .precautions .precautions_body ul.ast li {
  margin-left: 0.375em;
  padding-left: 1.8rem;
  position: relative;
}
section.outline .precautions .precautions_body ul.ast li::before {
  content: '※';
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  section.outline .precautions .precautions_body ul.ast li {
    font-size: 2.9333333333vw;
    line-height: 5.0666666667vw;
    padding-left: 3.2vw;
    text-align: justify;
  }
}

.hiddencont {
  height: 0;
  min-height: 0;
  transition: all 0.4s ease;
}
.hiddencont.open {
  height: auto;
  min-height: 100%;
}

section.recipe {
  width: 100%;
  background-color: #EFF7A3;
  padding-top: 0;
  padding-bottom: 21em;
  background-image: url("../images/pc/bg_recipe_top.png"), url("../images/pc/bg_recipe_left.png"), url("../images/pc/bg_recipe_right.png"), url("../images/pc/bg_recipe_bottom.png");
  background-position: top center , left top 38.2rem , right top, bottom right;
  background-repeat: repeat-x, no-repeat, no-repeat,  no-repeat;
  background-size: 150rem, 28rem, 67.9rem,  119.8rem;
}
@media screen and (max-width: 768px) {
  section.recipe {
    margin-top: 20vw;
    padding-top: 15vw;
    padding-bottom: 33.8666666667vw;
    background-image: url("../images/sp/bg_recipe_top_sp.png"), url("../images/sp/bg_recipe_left_sp.png"), url("../images/sp/bg_recipe_right_sp.png"), url("../images/sp/bg_recipe_bottom_sp.png");
    background-position: top center, left top 150.9333333333vw, right top, bottom right;
    background-repeat: repeat-x, no-repeat, no-repeat,  no-repeat;
    background-size: 100vw, 30.1333333333vw, 57.3333333333vw, 89.4666666667vw;
  }
}
section.recipe h2 {
  width: 150rem;
  margin: auto auto 7.2rem;
}
@media screen and (max-width: 768px) {
  section.recipe h2 {
    width: 100%;
    margin: auto auto 10.4vw;
    margin-top: -29vw;
    padding-top: 29vw;
  }
}
section.recipe .enjoy {
  width: 110rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  row-gap: 6em;
}
@media screen and (max-width: 768px) {
  section.recipe .enjoy {
    width: 90.6666666667vw;
    row-gap: 6.5vw;
  }
}
section.recipe .enjoy ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 7.2rem;
}
section.recipe .enjoy ul::before, section.recipe .enjoy ul::after {
  display: none;
}
section.recipe .enjoy ul li {
  width: 53rem;
}
@media screen and (max-width: 768px) {
  section.recipe .enjoy ul li {
    width: 100%;
  }
}
section.recipe .enjoy ul li a {
  text-align: center;
  display: block;
}
section.recipe .enjoy ul li a span {
  display: block;
  font-size: 2.56em;
  font-weight: 700;
  line-height: 1.43;
  color: #3C3C3C;
  margin-top: 2.2rem;
}
@media screen and (max-width: 768px) {
  section.recipe .enjoy ul li a span {
    font-size: 4.2666666667vw;
    line-height: 6.1333333333vw;
  }
}
section.recipe .enjoy dl {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
section.recipe .enjoy dl::before, section.recipe .enjoy dl::after {
  display: none;
}
@media screen and (max-width: 768px) {
  section.recipe .enjoy dl {
    flex-wrap: wrap;
    justify-content: center;
  }
}
section.recipe .enjoy dl dt {
  width: 42.6em;
  padding-top: 5.6em;
}
@media screen and (max-width: 768px) {
  section.recipe .enjoy dl dt {
    width: 100%;
    margin-bottom: 4vw;
    padding-top: 0;
  }
}
section.recipe .enjoy dl dt img.enjoy01 {
  width: 37em;
  margin: auto;
}
@media screen and (max-width: 768px) {
  section.recipe .enjoy dl dt img.enjoy01 {
    width: 74.9vw;
  }
}
section.recipe .enjoy dl dt img.enjoy02 {
  width: 34.27em;
  margin: auto;
}
@media screen and (max-width: 768px) {
  section.recipe .enjoy dl dt img.enjoy02 {
    width: 69.3vw;
  }
}
section.recipe .enjoy dl dt img.enjoy03 {
  width: 36.1em;
  margin: auto;
}
@media screen and (max-width: 768px) {
  section.recipe .enjoy dl dt img.enjoy03 {
    width: 72.9vw;
  }
}
section.recipe .enjoy dl dd {
  width: 66.4em;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  section.recipe .enjoy dl dd {
    width: 100%;
  }
}
section.recipe .enjoy dl dd figure {
  width: 31.3em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  section.recipe .enjoy dl dd figure {
    width: 44vw;
  }
}
@media screen and (max-width: 768px) {
  section.recipe .enjoy dl dd figure img {
    border: 0.26vw solid #cbcbcb;
  }
}
section.recipe .enjoy dl dd figure figcaption {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4em;
  font-weight: 700;
  color: #5f4d28;
  margin-top: 0.4em;
}
@media screen and (max-width: 768px) {
  section.recipe .enjoy dl dd figure figcaption {
    font-size: 4.2vw;
    line-height: 1.4;
    margin-top: 3.4vw;
    letter-spacing: -0.01em;
  }
}

section.faq {
  width: 110em;
  margin: auto auto auto;
}
@media screen and (max-width: 768px) {
  section.faq {
    width: 90.6666666667vw;
  }
}
section.faq h2.h2_faq {
  width: 27.6em;
  margin: auto auto 6.3em;
  margin-top: -12em;
  padding-top: 12em;
}
@media screen and (max-width: 768px) {
  section.faq h2.h2_faq {
    width: 48.8vw;
    margin-top: -29em;
    padding-top: 29em;
  }
}

.faqBox {
  width: 110em;
  border-radius: 5.3em;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .faqBox {
    width: 100%;
    border-radius: 10.864vw;
  }
}
.faqBox + .faqBox {
  margin-top: 2.4rem;
}
.faqBox.open {
  border-radius: 2em;
}
@media screen and (max-width: 768px) {
  .faqBox.open {
    border-radius: 5.44vw;
  }
}
.faqBox h3 {
  width: 100%;
  height: 3.75em;
  background-color: #1D2087;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.7 18.7'%3E%3Cline x1='2' y1='9.35' x2='16.7' y2='9.35' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='9.35' y1='16.7' x2='9.35' y2='2' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 0.525em;
  background-repeat: no-repeat;
  background-position: center right 2em;
  color: #fff;
  font-size: 2.8em;
  font-weight: 900;
  padding: 0 3.14em;
  display: flex;
  align-items: center;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .faqBox h3 {
    height: 22.1333333333vw;
    font-size: 5.0666666667vw;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 8vw;
    background-position: center right 8vw;
  }
}
.faqBox h3 span {
  font-size: 57%;
  margin-left: 0.5em;
}
@media screen and (max-width: 768px) {
  .faqBox h3 span {
    font-size: 3.2vw;
    display: block;
    margin-left: 0;
  }
}
.faqBox h3.open {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.7 4'%3E%3Cline x1='2' y1='2' x2='16.7' y2='2' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 0.525em;
  background-repeat: no-repeat;
  background-position: center right 2em;
}
@media screen and (max-width: 768px) {
  .faqBox h3.open {
    background-position: center right 8vw;
  }
}
.faqBox .hiddencont {
  padding: 0 8.8em;
}
@media screen and (max-width: 768px) {
  .faqBox .hiddencont {
    padding: 0 8vw;
  }
}
.faqBox .hiddencont.open {
  padding: 5.8em 8.8em;
}
@media screen and (max-width: 768px) {
  .faqBox .hiddencont.open {
    padding: 5.8em 8vw;
  }
}
.faqBox dl.qanda {
  width: 100%;
  padding: 0 0 5.8em;
  background: url("../images/pc/bg_qanda.png") no-repeat;
  background-size: 92em;
  background-position: bottom center;
}
.faqBox dl.qanda:last-of-type {
  background: none;
  padding-bottom: 0;
}
.faqBox dl.qanda + dl.qanda {
  margin-top: 5.8em;
}
.faqBox dl.qanda dt {
  font-size: 2.3em;
  font-weight: 900;
  color: #1D2087;
  padding-left: 5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.4 36.4'%3E%3Ccircle cx='18.2' cy='18.2' r='18.2' fill='%231d2087'/%3E%3Cpath d='M24.39 23.95l2.5 2.13-1.92 2.29-2.42-2.05c-1.14.86-2.57 1.27-4.24 1.27-4.03 0-6.86-2.44-6.86-7.93v-2.55c0-5.54 2.83-7.93 6.86-7.93s6.89 2.39 6.89 7.93v2.55c0 1.74-.29 3.15-.81 4.29ZM15.08 19.66c0 3.43 1.12 4.86 3.22 4.86.62 0 1.2-.13 1.64-.42l-2.03-1.74 1.98-2.31 1.53 1.35c.08-.52.13-1.09.13-1.74v-2.55c0-3.43-1.14-4.86-3.25-4.86s-3.22 1.43-3.22 4.86v2.55Z' fill='white'/%3E%3C/svg%3E");
  background-size: 3.64rem;
  background-repeat: no-repeat;
  background-position: center left;
}
@media screen and (max-width: 768px) {
  .faqBox dl.qanda dt {
    background-size: 6.9333333333vw;
    padding-left: 9.0666666667vw;
    min-height: 6.9333333333vw;
    font-size: 4.2666666667vw;
  }
}
.faqBox dl.qanda dd {
  padding-left: 5rem;
  font-size: 1.8em;
  line-height: 1.77;
  font-weight: 500;
  color: #464646;
  margin-top: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.4 36.4'%3E%3Ccircle cx='18.2' cy='18.2' r='18.2' fill='%239bcb00'/%3E%3Cpath d='M10.42 27.36l6.24-17.94h3.48l6.24 17.94h-3.87l-1.09-3.41h-6.01l-1.09 3.41h-3.9ZM16.37 20.88h4.06l-2.03-6.32-2.03 6.32Z' fill='white'/%3E%3C/svg%3E");
  background-size: 3.64rem;
  background-repeat: no-repeat;
  background-position: top left;
  min-height: 3.64rem;
}
@media screen and (max-width: 768px) {
  .faqBox dl.qanda dd {
    background-size: 6.9333333333vw;
    padding-left: 9.0666666667vw;
    font-size: 3.2vw;
    line-height: 5.3333333333vw;
    min-height: 6.9333333333vw;
  }
}
.faqBox dl.qanda dd p {
  word-break: break-all;
}
.faqBox dl.qanda dd p + p {
  margin-top: 1.8em;
}
.faqBox dl.qanda dd p strong {
  font-weight: 900;
}

section.kiyaku {
  width: 100%;
  margin: 13rem auto;
  color: #464646;
}
section.kiyaku .inner {
  width: 110em;
  margin: auto;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 3.32em;
  padding: 5.7rem 0.9rem 6.5rem 7.5rem;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  section.kiyaku .inner {
    width: 90.6666666667vw;
    padding-bottom: 11.4666666667vw;
  }
}
section.kiyaku .inner h2 {
  font-size: 3.45em;
  font-weight: 900;
  color: #1D2087;
  text-align: center;
  padding-right: 6.6rem;
}
@media screen and (max-width: 768px) {
  section.kiyaku .inner h2 {
    font-size: 6.1333333333vw;
  }
}
section.kiyaku .inner .kiyakuBody {
  margin-top: 3rem;
  height: 67.5rem;
  overflow-y: auto;
  padding-right: 4rem;
}
@media screen and (max-width: 768px) {
  section.kiyaku .inner .kiyakuBody {
    height: 99.4666666667vw;
  }
}
section.kiyaku .inner .kiyakuBody p {
  font-size: 1.6em;
  font-weight: 500;
  line-height: 1.875;
}
@media screen and (max-width: 768px) {
  section.kiyaku .inner .kiyakuBody p {
    font-size: 2.9333333333vw;
    line-height: 5.0666666667vw;
    font-feature-settings: "palt";
    text-align: justify;
  }
}
section.kiyaku .inner .kiyakuBody p strong {
  font-weight: 700;
}
section.kiyaku .inner .kiyakuBody p + p {
  margin-top: 3.3rem;
}

footer {
  background: #fff;
}

/**********************************
 *
 * pankuzu
 *
**********************************/
#pankuzu {
  width: 100%;
  height: auto;
  background-color: #f7f4ee;
  font-size: 11px;
  letter-spacing: 2.2px;
  color: #6c5b52;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 0 0 0;
}

#pankuzu ul {
  margin: auto;
}

#pankuzu ul li {
  float: left;
  margin: 5px 30px 6px 0;
  border-radius: 2px;
  background-color: #669219;
  position: relative;
  vertical-align: middle;
}

#pankuzu ul li a {
  color: #fff;
  padding: 5px 10px;
}

#pankuzu ul li:last-child {
  background-color: #fff;
  padding: 5px 10px;
  margin: 0 0 6px 0;
}

#pankuzu ul li:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -15px;
  margin: auto;
  width: 8px;
  height: 8px;
  border-top: 1px solid #669219;
  border-right: 1px solid #669219;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#pankuzu ul li:last-child::after {
  display: none;
}

#backTop {
  position: fixed;
  bottom: min(40px, 2.6vw);
  right: min(77px, 5.1vw);
  width: min(106px, 7vw);
  height: min(90px, 6vw);
  transition: all 0.6s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 4;
}
@media screen and (max-width: 768px) {
  #backTop {
    width: 20.4vw;
    height: 17.3vw;
    right: 2.6vw;
    bottom: 9.5vw;
  }
}
#backTop.fixed {
  opacity: 1;
  visibility: visible;
}
#backTop a {
  width: 100%;
  height: 100%;
  display: block;
}
@media screen and (max-width: 1500px) {
  #backTop a {
    width: 8.1vw;
    height: 8.3vw;
  }
}
@media screen and (max-width: 768px) {
  #backTop a {
    width: 100%;
    height: 100%;
  }
}
#backTop a img {
  height: auto;
  width: 100%;
}

.fadeIn {
  opacity: 0;
}