@charset "UTF-8";
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-weight: normal;
  font-style: normal;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  padding: 0;
  font-size: 16px;
  background: url(../images/bg.jpg) repeat top;
  font-family: "M PLUS 2", sans-serif;
  color: #303030;
  position: relative;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 3.7vw;
  }
}

@media screen and (min-width: 1300px) {
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}
.in {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

img {
  width: 100%;
}

.in {
  max-width: 1300px;
  margin: 0 auto;
}

main {
  position: relative;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 769px) and (max-width: 1299px) {
  section {
    width: 90%;
    margin: 0 auto;
  }
}

header h1 {
  max-width: 728px;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  header h1 {
    width: 50vw;
  }
}
@media screen and (max-width: 768px) {
  header h1 {
    max-width: 100%;
    margin-bottom: 3vw;
  }
}
header .in {
  position: relative;
}
header .logo {
  width: 334px;
  position: absolute;
  top: 24px;
  right: 100px;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  header .logo {
    width: 20vw;
    right: 4vw;
  }
}
header .illust {
  width: 406px;
  right: 150px;
  bottom: 0;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  header .illust {
    width: 36vw;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  header .illust {
    width: 70%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  header .logo {
    width: 32vw;
    right: 6vw;
  }
}
header .box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  max-width: 1200px;
}
@media screen and (max-width: 768px) {
  header .box {
    flex-direction: column;
  }
}

.present h2 {
  max-width: 1100px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .present h2 {
    width: 90%;
    margin-bottom: 2vw;
  }
}
.present .box {
  max-width: 786px;
  margin: 0 auto 30px auto;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .present .box {
    width: 60%;
  }
}
@media screen and (max-width: 768px) {
  .present .box {
    width: 80%;
    margin: 0 auto 3vw auto;
    padding-left: 2vw;
  }
}
.present .box:nth-of-type(1) {
  margin-top: -60px;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .present .box:nth-of-type(1) {
    margin-top: -6vw;
  }
}
@media screen and (max-width: 768px) {
  .present .box:nth-of-type(1) {
    margin-top: 5vw;
  }
}

.detail {
  max-width: 990px;
  margin: 16px auto 50px auto;
}
@media screen and (max-width: 768px) {
  .detail {
    margin: 5vw auto 8vw auto;
    width: 90%;
  }
}
.detail .in {
  margin: 0 auto 30px auto;
  background: url(../images/bg_craft.png) repeat top;
  border-radius: 50px;
  border: 6px solid #FFFFFF;
  padding: 20px;
}
@media screen and (max-width: 768px) {
  .detail .in {
    margin: 0 auto 5vw auto;
  }
}
.detail h2 {
  background-color: #5DC1CF;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 4px 0 8px 0;
  border-radius: 34px;
  position: relative;
  line-height: 1em;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .detail h2 {
    font-size: 4vw;
  }
}
.detail h2:before {
  content: "●";
  color: #F6EDDC;
  position: absolute;
  left: 8px;
  top: 5px;
}
.detail h2:after {
  content: "●";
  color: #F6EDDC;
  position: absolute;
  right: 8px;
  top: 5px;
}
.detail h3 {
  font-size: 30px;
  color: #604C3F;
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .detail h3 {
    font-size: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .detail h3 {
    font-size: 4.5vw;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 2vw;
  }
}
.detail h3 span {
  display: inline-block;
  background-color: #FFFFFF;
  border: 1px solid #604C3F;
  font-size: 16px;
  padding: 8px 30px;
  line-height: 1em;
  font-weight: bold;
  margin-right: 27px;
}
@media screen and (max-width: 768px) {
  .detail h3 span {
    font-size: 3.5vw;
    padding: 1.5vw 1vw 2vw;
    width: 30%;
    margin-right: 3vw;
  }
}
.detail dl {
  margin: 0 10px 20px 10px;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  align-items: flex-start;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .detail dl {
    gap: 2vw;
  }
}
@media screen and (max-width: 768px) {
  .detail dl {
    margin: 0 0 3vw 0;
    gap: 2vw;
  }
}
.detail dl dt {
  border-radius: 10px;
  background-color: #8ed4dd;
  font-size: 22px;
  font-weight: bold;
  width: 168px;
  color: #FFFFFF;
  text-align: center;
  align-items: flex-start;
  padding-bottom: 4px;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .detail dl dt {
    width: 24%;
    font-size: 2.2vw;
  }
}
@media screen and (max-width: 768px) {
  .detail dl dt {
    width: 25%;
    font-size: 3.5vw;
  }
}
.detail dl dd {
  font-size: 20px;
  max-width: 720px;
  font-weight: bold;
  color: #604C3F;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .detail dl dd {
    font-size: 2vw;
    width: 74%;
  }
}
@media screen and (max-width: 768px) {
  .detail dl dd {
    font-size: 3.5vw;
    width: 70%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .detail dl dd .pc {
    display: none;
  }
}
.detail span.caution {
  font-size: 15px;
  display: block;
  margin: 0 10px;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .detail span.caution {
    font-size: 1.5vw;
  }
}
@media screen and (max-width: 768px) {
  .detail span.caution {
    font-size: 3vw;
  }
}
.detail .cta a {
  display: block;
  background-color: #5DC1CF;
  border-radius: 96px;
  text-align: center;
  height: 96px;
  line-height: 96px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .detail .cta a {
    height: 16vw;
    line-height: 16vw;
  }
}
.detail .cta a:hover {
  transform: scale(1.01, 1.01);
  opacity: 0.8;
}
.detail .cta a img {
  width: 427px;
  margin-top: 26px;
}
@media screen and (max-width: 768px) {
  .detail .cta a img {
    width: 60%;
    margin-top: 5vw;
  }
}
.detail .cta a:before {
  content: "";
  position: absolute;
  display: block;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2.5px solid #FFFFFF;
  border-radius: 96px;
}
@media screen and (max-width: 768px) {
  .detail .cta a:before {
    top: 2vw;
    left: 2vw;
  }
}
.detail .cta a:after {
  content: "";
  background-image: url(../images/btn_arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 25px;
  height: 36px;
  position: absolute;
  right: 40px;
  top: 30px;
}
@media screen and (max-width: 768px) {
  .detail .cta a:after {
    width: 3.571vw;
    height: 5.143vw;
    right: 8vw;
    top: 5vw;
  }
}

.campaign {
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  gap: 36px;
  align-items: flex-start;
  border-top: 6px solid #34A4DD;
  border-bottom: 6px solid #34A4DD;
  background: url(../images/bg_stripe.png) repeat;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .campaign {
    width: 100%;
    align-items: flex-end;
  }
}
@media screen and (max-width: 768px) {
  .campaign {
    flex-direction: column;
    gap: 0;
    padding: 5vw 0 8vw 0;
    margin-bottom: 8vw;
  }
}
.campaign .imgbx {
  max-width: 584px;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .campaign .imgbx {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .campaign .imgbx {
    width: 70%;
    margin: 0 auto;
  }
}
.campaign .imgbx img {
  vertical-align: bottom;
}
.campaign .bx {
  background-color: #FFFFFF;
  width: 330px;
  padding: 24px 24px 16px 24px;
  border-radius: 30px;
  border: 5px solid #34A4DD;
  margin-top: 26px;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  .campaign .bx {
    width: 32%;
    padding: 3vw 5vw 2.5vw 5vw;
    margin-bottom: 3vw;
  }
}
@media screen and (max-width: 768px) {
  .campaign .bx {
    width: 74%;
    border-radius: 30px;
    margin: -2vw auto 0 auto;
    padding: 6vw 14vw 4vw 14vw;
  }
}
.campaign a {
  display: block;
  margin: 16px auto 0 auto;
  max-width: 330px;
}
@media screen and (max-width: 768px) {
  .campaign a {
    margin: 3vw auto 0 auto;
  }
}
.campaign a:hover {
  transform: scale(1.02, 1.02);
  opacity: 0.8;
}

footer {
  padding: 50px 0;
  background-color: #007564;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  footer {
    padding: 3vw 0;
  }
}
@media screen and (max-width: 768px) {
  footer {
    padding: 8vw 0;
    text-align: center;
  }
}
footer .in {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  footer .in {
    flex-direction: column;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  footer .in {
    flex-direction: column;
  }
}
footer .link a {
  font-size: 16px;
  color: #FFFFFF;
  display: inline-block;
  margin-right: 33px;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  footer .link a {
    font-size: 1.5vw;
  }
}
@media screen and (max-width: 768px) {
  footer .link a {
    font-size: 3.2vw;
    margin: 0 2vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  footer .link {
    margin-bottom: 2vw;
  }
}
@media screen and (max-width: 768px) {
  footer .link {
    margin-bottom: 5vw;
  }
}
footer p.copy {
  font-size: 16px;
  color: #FFFFFF;
}
@media screen and (min-width: 769px) and (max-width: 1299px) {
  footer p.copy {
    font-size: 1.5vw;
  }
}
@media screen and (max-width: 768px) {
  footer p.copy {
    font-size: 2.5vw;
  }
}

#gotop {
  position: fixed;
  bottom: 20px;
  right: 40px;
  background: url("../images/btn_pagetop.png") no-repeat top;
  background-size: contain;
  z-index: 100;
  width: 94px;
  height: 94px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  #gotop {
    bottom: 4vw;
    right: 4vw;
    background-size: contain;
    width: 16vw;
    height: 16vw;
  }
}/*# sourceMappingURL=style.css.map */