@charset "UTF-8";
.content {
  margin-top: min(19.696969697vw, 260px);
}
@media screen and (max-width: 768px) {
  .content {
    margin-top: min(32vw, 120px);
  }
}

.area_mainvisual {
  position: relative;
  z-index: 10;
  padding-top: min(6.0606060606vw, 80px);
}
.area_mainvisual .tit_sitetop,
.area_mainvisual .tit_sub {
  line-height: 1;
  font-family: "Quicksand", sans-serif;
  text-align: center;
}
.area_mainvisual .tit_sitetop {
  font-size: min(6.0606060606vw, 80px);
}
.area_mainvisual .tit_sitetop span {
  display: inline-block;
}
.area_mainvisual .tit_sub {
  margin-top: 0.5em;
  font-size: min(1.8181818182vw, 24px);
}
.area_mainvisual .ul_nav {
  margin-top: 2em;
  padding-top: 3em;
}
.area_mainvisual .ul_nav::before {
  content: "";
  display: block;
  width: min(21.2878787879vw, 281px);
  height: min(1.2121212121vw, 16px);
  background: url(../img/top/title_deco.png) no-repeat center top;
  background-size: 100%;
  position: absolute;
  inset: 0;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .area_mainvisual {
    padding-top: 3rem;
  }
  .area_mainvisual .tit_sitetop {
    font-size: min(13.8666666667vw, 52px);
  }
  .area_mainvisual .tit_sub {
    margin-top: 0.5rem;
    font-size: min(5.3333333333vw, 20px);
  }
  .area_mainvisual .ul_nav {
    margin-top: 1.5rem;
    padding-top: 2rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0 2em;
  }
  .area_mainvisual .ul_nav::before {
    width: min(48vw, 180px);
    height: min(4.2666666667vw, 16px);
  }
  .area_mainvisual .ul_nav li::before {
    content: "";
    display: block;
    position: absolute;
    background: #694E3A;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABVJREFUGFdjzPSz+j990zFGRgYoAAA17QQD9J7kAwAAAABJRU5ErkJggg==) repeat;
    width: 1px;
    height: 13px;
    top: 0.15em;
    right: -1em;
    z-index: -1;
  }
  .area_mainvisual .ul_nav li:last-child::before {
    content: none;
  }
  .area_mainvisual .ul_nav li a {
    font-size: min(4.8vw, 18px);
    color: #694E3A;
  }
  .area_mainvisual .ul_nav li a span.pc {
    display: none;
  }
}
.area_mainvisual .img_mainvisual {
  width: min(65.1515151515vw, 860px);
  margin: 5em auto 0;
  aspect-ratio: 860/330;
  position: relative;
}
.area_mainvisual .img_mainvisual .img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
}
.area_mainvisual .txt_lead {
  margin-top: 2.5em;
  font-size: min(1.5151515152vw, 20px);
  text-align: center;
}
@media screen and (max-width: 768px) {
  .area_mainvisual .img_mainvisual {
    width: 100%;
    margin: 4rem auto 0;
    aspect-ratio: 750/471;
  }
  .area_mainvisual .txt_lead {
    margin-top: 2rem;
    font-size: min(4.2666666667vw, 16px);
  }
}

.txt_lead {
  margin-top: min(1.8181818182vw, 24px);
}
@media screen and (max-width: 768px) {
  .txt_lead {
    margin-top: 1.3rem;
    font-size: min(4vw, 15px);
  }
}

#topics {
  width: min(65.1515151515vw, 860px);
  margin: 5em auto 0;
  background: rgba(105, 78, 58, 0.2);
  text-align: center;
  position: relative;
}
#topics::before, #topics::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAXNSR0IArs4c6QAAABpJREFUGFdjzPSz+j990zFGBgYGBjABAygcAIo1BASzYmifAAAAAElFTkSuQmCC) repeat;
  position: absolute;
  left: 0;
}
#topics::before {
  top: -4px;
}
#topics::after {
  bottom: -4px;
}
#topics .ul_topics li {
  padding: 1.4em 0;
}
#topics .ul_topics li .title::after {
  content: "・";
}
#topics .ul_topics li a {
  margin-left: 0.6em;
  padding: 0.4em 1em;
  display: inline-block;
  background: #694E3A;
  color: #fff;
  font-size: min(1.0606060606vw, 14px);
  line-height: 1;
  border-radius: 20px;
  border: 1px solid #694E3A;
}
@media (hover: hover) {
  #topics .ul_topics li a:hover {
    color: #694E3A;
    background: #ebe9e5;
  }
}
#topics .ul_topics.double li + li::before {
  content: "●　　　　●　　　　●";
  display: block;
  position: relative;
  top: -3em;
  font-size: min(0.4545454545vw, 6px);
}
@media screen and (max-width: 768px) {
  #topics {
    width: 92%;
    margin: 4em auto 0;
  }
  #topics .ul_topics li {
    padding: 1em 0;
  }
  #topics .ul_topics li .title::after {
    content: none;
  }
  #topics .ul_topics li a {
    width: 9em;
    margin: 0.6em auto 0;
    padding: 0.4em 1em;
    display: block;
    font-size: min(3.2vw, 12px);
  }
}

@media screen and (max-width: 768px) {
  #hervcanon {
    margin-top: min(48vw, 180px);
  }
}
#hervcanon .inner {
  position: relative;
}
#hervcanon .box_intro {
  position: relative;
}
#hervcanon .box_intro .deco_book {
  width: min(25.2272727273vw, 333px);
  aspect-ratio: 333/242;
  position: absolute;
  bottom: 0;
  right: 0;
}
#hervcanon .box_intro .box_title {
  width: calc(100% - min(32.1212121212vw, 424px));
  position: relative;
}
#hervcanon .box_intro .txt_lead {
  width: min(41.6666666667vw, 550px);
  margin-top: min(1.8181818182vw, 24px);
  padding: 0 0 1em;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  #hervcanon .box_intro::after {
    width: min(45.3333333333vw, 170px);
    height: min(33.0666666667vw, 124px);
    bottom: auto;
    top: -6.6em;
    right: -1%;
  }
  #hervcanon .box_intro .deco_book {
    width: min(53.3333333333vw, 200px);
    bottom: min(40vw, 150px);
    right: 0;
  }
  #hervcanon .box_intro .box_title {
    width: 100%;
  }
  #hervcanon .box_intro .txt_lead {
    width: 100%;
    margin-top: min(4.2666666667vw, 16px);
    padding: 0;
  }
}
#hervcanon .area_comic {
  width: 100%;
  margin-top: min(3.4090909091vw, 45px);
  position: relative;
}
#hervcanon .area_comic .tit_comic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#hervcanon .area_comic .tit_comic .chapter {
  height: min(4.5454545455vw, 60px);
  padding: 0.3em 0 0;
  font-size: min(2.7272727273vw, 36px);
  line-height: 1;
  position: relative;
  z-index: 5;
}
#hervcanon .area_comic .tit_comic .chapter::after {
  content: "\f4d8";
  font: var(--fa-font-solid);
  margin-left: 0.3em;
  font-size: min(1.3636363636vw, 18px);
  position: relative;
  top: -0.05em;
}
#hervcanon .area_comic .tit_comic .title {
  margin-left: 1em;
  font-size: min(2.2727272727vw, 30px);
}
@media screen and (max-width: 768px) {
  #hervcanon .area_comic {
    width: 100%;
    margin-top: min(6.4vw, 24px);
  }
  #hervcanon .area_comic .tit_comic {
    display: block;
  }
  #hervcanon .area_comic .tit_comic .chapter {
    padding: 0;
    font-size: min(6.4vw, 24px);
  }
  #hervcanon .area_comic .tit_comic .chapter::after {
    font-size: min(3.7333333333vw, 14px);
  }
  #hervcanon .area_comic .tit_comic .title {
    margin: min(4.2666666667vw, 16px) 0 0;
    font-size: min(4.8vw, 18px);
    line-height: 1.4;
  }
  #hervcanon .area_comic .go_continue a {
    padding-left: 2.5em;
  }
}
#hervcanon .area_comic .comingsoon {
  margin: 2em 0 4em;
  font-size: min(3.0303030303vw, 40px);
  text-align: center;
}
#hervcanon .area_comic .comingsoon span {
  display: block;
  opacity: 0.8;
  font-size: min(1.5151515152vw, 20px);
}
@media screen and (max-width: 768px) {
  #hervcanon .area_comic .comingsoon {
    margin: 1em 0 3em;
    font-size: min(8.5333333333vw, 32px);
  }
  #hervcanon .area_comic .comingsoon span {
    font-size: min(4.2666666667vw, 16px);
  }
}
#hervcanon .box_comic {
  width: 100%;
  margin-inline: auto;
  margin-top: min(0.7575757576vw, 10px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  gap: 1.4em;
}
#hervcanon .box_comic .box {
  width: 33.3333333333%;
  position: relative;
}
#hervcanon .box_comic .box a {
  width: 100%;
  height: 100%;
  position: relative;
}
@media (hover: hover) {
  #hervcanon .box_comic .box a:hover img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  #hervcanon .box_comic .box a:hover .box_text .tit em,
  #hervcanon .box_comic .box a:hover .box_text .txt {
    opacity: 0.7;
  }
}
#hervcanon .box_comic .box .box_img {
  width: 100%;
  position: relative;
  aspect-ratio: 1/1;
  padding: min(1.9550342131vw, 20px);
  position: relative;
  border: 2px solid rgba(105, 78, 58, 0.7);
  border-radius: 0px;
}
#hervcanon .box_comic .box .box_img::before, #hervcanon .box_comic .box .box_img::after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAAFElEQVR4AWJ6/fLpf2TMgAZgcgAAAAD//8R3KSAAAAAGSURBVAMABNkWU1WiRx8AAAAASUVORK5CYII=) repeat;
}
#hervcanon .box_comic .box .box_img::before {
  width: 11px;
  right: 44px;
  top: -2px;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}
#hervcanon .box_comic .box .box_img::after {
  width: 10px;
  left: 50px;
  bottom: -2px;
}
@media screen and (max-width: 768px) {
  #hervcanon .box_comic .box .box_img {
    padding: min(2.6666666667vw, 10px) 4% min(2.6666666667vw, 10px);
  }
}
#hervcanon .box_comic .box .box_img {
  padding: 3px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
#hervcanon .box_comic .box .box_img .img {
  position: relative;
  overflow: hidden;
}
#hervcanon .box_comic .box .box_img .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
#hervcanon .box_comic .box .box_img .img {
  aspect-ratio: 1/1;
  border-radius: 50%;
}
#hervcanon .box_comic .box .box_img .img img {
  border-radius: 12px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#hervcanon .box_comic .box .box_text {
  padding: min(1.5151515152vw, 20px) min(0.7575757576vw, 10px) 0;
  position: relative;
  text-align: center;
}
#hervcanon .box_comic .box .box_text .tit em,
#hervcanon .box_comic .box .box_text .txt {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#hervcanon .box_comic .box .box_text .tit {
  font-size: min(1.5151515152vw, 20px);
  font-family: "ZenMaruBold", serif;
  position: relative;
  line-height: 1.6;
}
#hervcanon .box_comic .box .box_text .tit span {
  width: 4.5em;
  margin-bottom: 0.3em;
  padding: 0.2em 0.8em 0.4em 0.2em;
  display: block;
  color: #fff;
  padding-right: 0.3em;
  background: rgba(105, 78, 58, 0.5);
  border-radius: 1% 81% 2% 85%/47% 1% 63% 2%;
  line-height: 1;
  text-align: center;
  margin-inline: auto;
}
#hervcanon .box_comic .box .box_text .txt {
  margin-top: 0.2em;
  line-height: 1.8;
  font-size: min(1.2878787879vw, 17px);
}
@media screen and (max-width: 768px) {
  #hervcanon .box_comic {
    margin-top: min(4vw, 15px);
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0 0.6em;
  }
  #hervcanon .box_comic .box {
    width: calc((100% - 0.6em) / 2);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  #hervcanon .box_comic .box:nth-of-type(3) {
    display: none;
  }
  #hervcanon .box_comic .box .box_text {
    padding: min(3.2vw, 12px) 2%;
  }
  #hervcanon .box_comic .box .box_text .tit {
    font-size: min(4.2666666667vw, 16px);
  }
  #hervcanon .box_comic .box .box_text .txt {
    font-size: min(3.4666666667vw, 13px);
  }
}

.area_character {
  margin: min(7.5757575758vw, 100px) auto 0;
  position: relative;
}
.area_character .inner {
  padding: 2.5em 0;
  background: rgba(105, 78, 58, 0.2);
  position: relative;
}
.area_character .inner::before, .area_character .inner::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAXNSR0IArs4c6QAAABpJREFUGFdjzPSz+j990zFGBgYGBjABAygcAIo1BASzYmifAAAAAElFTkSuQmCC) repeat;
  position: absolute;
  left: 0;
}
.area_character .inner::before {
  top: -4px;
}
.area_character .inner::after {
  bottom: -4px;
}
.area_character .tit_chara {
  text-align: center;
  font-size: min(4.2424242424vw, 56px);
  line-height: 1;
}
.area_character .tit_chara span {
  margin-top: 0.6em;
  font-size: min(1.6666666667vw, 22px);
  display: block;
}
.area_character .flex_wrap {
  margin-top: min(1.8181818182vw, 24px);
  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;
  gap: min(1.9696969697vw, 26px);
}
.area_character .box {
  width: min(21.8181818182vw, 288px);
  position: relative;
}
.area_character .box .img {
  height: min(16.6666666667vw, 220px);
  position: relative;
  z-index: 5;
  text-align: center;
}
.area_character .box .img img {
  width: auto;
  height: 100%;
}
.area_character .box .img.geneC {
  text-align: left;
  padding-left: 1.6em;
}
.area_character .box .img.kelpT {
  padding-top: min(2.4242424242vw, 32px);
}
.area_character .box dl {
  margin-top: calc(min(3.7878787879vw, 50px) * -1);
  padding: min(2.7272727273vw, 36px) min(1.2121212121vw, 16px) min(1.5151515152vw, 20px);
  border: 5px solid rgba(105, 78, 58, 0.8);
  border-radius: 16px;
  text-align: center;
  position: relative;
  background: url(../img/common/bg_white.png);
  background-size: 800px;
}
.area_character .box dl::before {
  content: "";
  display: block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 2px solid rgba(105, 78, 58, 0.7);
  margin: auto;
  position: absolute;
  inset: 0;
  border-radius: 10px;
}
.area_character .box dl dt {
  font-family: "ZenMaruBold", serif;
  font-size: min(1.8181818182vw, 24px);
}
.area_character .box dl dd {
  line-height: 1.6;
}
.area_character .andmore {
  margin-top: 1em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .area_character {
    margin-top: min(21.3333333333vw, 80px);
  }
  .area_character .inner {
    width: 100%;
    padding: 2em 4%;
    border-radius: 0;
    background: rgba(105, 78, 58, 0.1);
  }
  .area_character .tit_chara {
    font-size: min(10.6666666667vw, 40px);
    line-height: 1;
  }
  .area_character .tit_chara span {
    margin: 1em 0 0;
    font-size: min(3.7333333333vw, 14px);
    display: block;
  }
  .area_character .flex_wrap {
    margin-top: 1.2em;
    gap: 0 0.6em;
  }
  .area_character .box {
    width: 48%;
  }
  .area_character .box .img {
    height: min(37.3333333333vw, 140px);
  }
  .area_character .box .img.geneC {
    text-align: center;
    padding: 0 5% 0 0;
  }
  .area_character .box .img.kelpT {
    padding-top: min(5.3333333333vw, 20px);
  }
  .area_character .box dl {
    margin-top: calc(min(9.0666666667vw, 34px) * -1);
    padding: min(7.4666666667vw, 28px) 4% min(3.7333333333vw, 14px);
    border: 4px solid rgba(105, 78, 58, 0.8);
  }
  .area_character .box dl::before {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
  }
  .area_character .box dl dt {
    font-size: min(4.8vw, 18px);
  }
  .area_character .andmore {
    margin-top: 0.8em;
  }
}

#gallery {
  position: relative;
  z-index: 10;
  text-align: center;
}
#gallery .tit_content .main::after {
  right: -0.1em;
}
#gallery .go_continue {
  margin-top: calc(min(4.5454545455vw, 60px) - 20px);
}
@media screen and (max-width: 768px) {
  #gallery .tit_content .main::after {
    bottom: -0.25em;
  }
  #gallery .go_continue {
    margin-top: calc(min(10.6666666667vw, 40px) - 10px);
  }
  #gallery .go_continue a {
    padding-left: 1.8em;
  }
}

.ul_gallery {
  margin-top: min(2.2727272727vw, 30px);
}
.ul_gallery li {
  position: relative;
}
.ul_gallery li .gallerybox {
  position: relative;
  padding: min(1.9550342131vw, 20px);
  position: relative;
  border: 2px solid rgba(105, 78, 58, 0.7);
  border-radius: 0px;
}
.ul_gallery li .gallerybox::before, .ul_gallery li .gallerybox::after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAAFElEQVR4AWJ6/fLpf2TMgAZgcgAAAAD//8R3KSAAAAAGSURBVAMABNkWU1WiRx8AAAAASUVORK5CYII=) repeat;
}
.ul_gallery li .gallerybox::before {
  width: 11px;
  right: 44px;
  top: -2px;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}
.ul_gallery li .gallerybox::after {
  width: 10px;
  left: 50px;
  bottom: -2px;
}
@media screen and (max-width: 768px) {
  .ul_gallery li .gallerybox {
    padding: min(2.6666666667vw, 10px) 4% min(2.6666666667vw, 10px);
  }
}
.ul_gallery li .gallerybox {
  background: rgba(255, 255, 255, 0.9);
  padding: 3px;
  -webkit-box-shadow: 3px 3px 0px 0px rgba(105, 78, 58, 0.2);
          box-shadow: 3px 3px 0px 0px rgba(105, 78, 58, 0.2);
}
.ul_gallery li .gallerybox a {
  position: relative;
  display: block;
  border-radius: 0;
  overflow: hidden;
  z-index: 2;
}
.ul_gallery li .gallerybox a .img {
  overflow: hidden;
}
.ul_gallery li .gallerybox a .img span {
  display: block;
}
.ul_gallery li .gallerybox a .img img {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media (hover: hover) {
  .ul_gallery li .gallerybox a:hover .img img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
@media screen and (max-width: 768px) {
  .ul_gallery {
    margin-top: 1.5rem;
  }
  .ul_gallery li {
    position: relative;
  }
  .ul_gallery li .gallerybox {
    padding: 3px;
  }
}

#product {
  position: relative;
  z-index: 5;
}
#product .tit_content,
#product .txt_lead {
  text-align: center;
}
#product .box_product {
  max-width: 1000px;
  margin: min(2.5757575758vw, 34px) auto 0;
  padding: min(1.9550342131vw, 20px);
  position: relative;
  border: 2px solid rgba(105, 78, 58, 0.7);
  border-radius: 0px;
}
#product .box_product::before, #product .box_product::after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9+AAAAFElEQVR4AWJ6/fLpf2TMgAZgcgAAAAD//8R3KSAAAAAGSURBVAMABNkWU1WiRx8AAAAASUVORK5CYII=) repeat;
}
#product .box_product::before {
  width: 11px;
  right: 44px;
  top: -2px;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}
#product .box_product::after {
  width: 10px;
  left: 50px;
  bottom: -2px;
}
@media screen and (max-width: 768px) {
  #product .box_product {
    padding: min(2.6666666667vw, 10px) 4% min(2.6666666667vw, 10px);
  }
}
#product .box_product {
  padding: 0;
  background: rgba(255, 255, 255, 0.9);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-shadow: 3px 3px 0px 0px rgba(105, 78, 58, 0.2);
          box-shadow: 3px 3px 0px 0px rgba(105, 78, 58, 0.2);
}
#product .box_product .box {
  width: 50%;
  padding: min(2.2727272727vw, 30px) min(1.5151515152vw, 20px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
}
#product .box_product .box + .box::before {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 100%;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAACNJREFUGFdjzPSz+s/AwMAwfdMxRhANAoxYBWGyyDRcC0FBAMDCCAaKMVslAAAAAElFTkSuQmCC) repeat;
  top: 0;
  left: 0;
  opacity: 0.7;
}
#product .box_product .box .box_img {
  width: calc(50% - min(1.5151515152vw, 20px));
  padding: 0.6em;
  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;
  background: rgba(105, 78, 58, 0.2);
  border-radius: 10px;
}
#product .box_product .box .box_text {
  width: 50%;
  padding-top: 0.6em;
}
#product .box_product .box .box_text dl dt {
  border-top: 2px solid rgba(105, 78, 58, 0.5);
  border-bottom: 2px solid rgba(105, 78, 58, 0.5);
  font-family: "ZenMaruBold", serif;
  font-size: min(1.6666666667vw, 22px);
  text-align: center;
}
#product .box_product .box .box_text dl dd {
  margin-top: 0.6em;
  font-size: min(1.2878787879vw, 17px);
}
#product .box_product .box .box_text dl dd .link {
  margin-top: 1em;
}
#product .box_product .box.stampA .img {
  width: 50%;
}
#product .box_product .box.emojiA .img {
  width: 33%;
}
@media screen and (max-width: 768px) {
  #product .box_product {
    margin: min(2.6666666667vw, 10px) auto 0;
    padding: 0;
    display: block;
  }
  #product .box_product .box {
    width: 100%;
    padding: min(4.2666666667vw, 16px);
  }
  #product .box_product .box + .box::before {
    width: 100%;
    height: 2px;
  }
  #product .box_product .box .box_img {
    width: 46%;
  }
  #product .box_product .box .box_text {
    width: 50%;
    margin-left: 4%;
    padding-top: 0;
  }
  #product .box_product .box .box_text dl {
    height: 100%;
  }
  #product .box_product .box .box_text dl dt {
    font-size: min(4.2666666667vw, 16px);
    line-height: 1.6;
  }
  #product .box_product .box .box_text dl dd {
    margin-top: 0.4em;
    font-size: min(3.7333333333vw, 14px);
  }
  #product .box_product .box .box_text dl dd p {
    line-height: 1.6;
  }
  #product .box_product .box .box_text dl dd .link {
    text-align: right;
  }
  #product .box_product .box.stampA .img {
    width: 50%;
  }
  #product .box_product .box.emojiA .img {
    width: 33%;
  }
}

#contact .box_title {
  text-align: center;
}
#contact .box_btn {
  margin: min(2.2727272727vw, 30px) auto 0;
}
#contact .box_btn a span::after {
  content: "\f4ba";
  font: var(--fa-font-solid);
  margin-left: 0.6em;
}
@media screen and (max-width: 768px) {
  #contact .box_btn {
    margin: min(5.3333333333vw, 20px) auto 0;
  }
}

.area_message {
  width: min(51.5151515152vw, 680px);
  margin: min(22.7272727273vw, 300px) auto 0;
  padding-top: min(22.7272727273vw, 300px);
  position: relative;
  z-index: 5;
}
.area_message .chara {
  width: min(30.303030303vw, 400px);
  height: min(25.9090909091vw, 342px);
  position: absolute;
  opacity: 0;
}
@media screen and (min-width: 769px) {
  .area_message .chara {
    top: -2em;
    left: 4em;
  }
}
.area_message .box_text {
  height: min(31.0606060606vw, 410px);
  padding: min(9.0909090909vw, 120px) 0 0;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .area_message .box_text {
    background: url(../img/top/message_line_pc.png) no-repeat center top;
    background-size: 100%;
    border-radius: 50% 50% 56% 49%/50% 50% 54% 43%;
  }
}
.area_message .box_text .text {
  font-size: min(1.2121212121vw, 16px);
  text-shadow: 0px 0px 30px #fff, 0px 0px 30px #fff, 0px 0px 30px #fff, 0px 0px 30px #fff;
}
.area_message .box_text .text + .text {
  margin-top: 1em;
}
@media screen and (max-width: 1023px) {
  .area_message {
    width: min(66.4711632454vw, 680px);
    margin: min(29.3255131965vw, 300px) auto 0;
    padding-top: min(29.3255131965vw, 300px);
  }
  .area_message .chara {
    width: min(39.100684262vw, 400px);
    height: min(33.431085044vw, 342px);
  }
  .area_message .box_text {
    height: min(40.0782013685vw, 410px);
    padding: min(11.7302052786vw, 120px) 0 0;
  }
  .area_message .box_text .text {
    font-size: min(1.5640273705vw, 16px);
  }
}
@media screen and (max-width: 768px) {
  .area_message {
    width: min(100vw, 375px);
    padding-top: min(80vw, 300px);
    background-size: 100%;
  }
  .area_message .chara {
    width: min(90.6666666667vw, 340px);
    height: min(77.3333333333vw, 290px);
    top: 0;
    right: 10%;
  }
  .area_message .box_text {
    max-width: min(100vw, 375px);
    width: 96%;
    height: auto;
    margin-left: 4%;
    padding-top: min(17.3333333333vw, 65px);
    background: url(../img/top/message_line_sp.png) no-repeat center top;
    background-size: 100%;
    aspect-ratio: 714/576;
  }
  .area_message .box_text .text {
    font-size: min(3.4666666667vw, 13px);
  }
}

footer {
  margin-top: min(19.696969697vw, 260px);
}
@media screen and (max-width: 768px) {
  footer {
    margin-top: 5rem;
  }
}

.lamp-wrap {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  pointer-events: none;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .lamp-wrap {
    display: none;
  }
}

.lamp01,
.lamp02 {
  position: absolute;
  top: 0;
  display: block;
}
.lamp01::before,
.lamp02::before {
  content: "";
  display: block;
  opacity: 0.4;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  z-index: -1;
}
.lamp01 img,
.lamp02 img {
  position: relative;
  z-index: 5;
}
.lamp01 .l1,
.lamp02 .l1 {
  width: min(7.5757575758vw, 100px);
  height: min(7.5757575758vw, 100px);
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  top: 4.3em;
  left: -1em;
}
.lamp01 .l2,
.lamp02 .l2 {
  width: min(9.0909090909vw, 120px);
  height: min(9.0909090909vw, 120px);
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  top: 7.5em;
  right: 3.8em;
}
.lamp01 .l3,
.lamp02 .l3 {
  width: min(6.8181818182vw, 90px);
  height: min(6.8181818182vw, 90px);
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  top: 6.5em;
  right: -0.4em;
}
.lamp01 .l4,
.lamp02 .l4 {
  width: min(6.0606060606vw, 80px);
  height: min(6.0606060606vw, 80px);
  -webkit-animation-duration: 3.5s;
          animation-duration: 3.5s;
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
  top: 3.6em;
  right: 2.6em;
  z-index: 2;
}

.light {
  width: min(6.0606060606vw, 80px);
  height: min(6.0606060606vw, 80px);
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(ellipse at center, #694e3a 0%, rgba(105, 78, 58, 0) 100%);
  -webkit-animation: twink 2s infinite ease-in-out;
          animation: twink 2s infinite ease-in-out;
  z-index: -1;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}

@-webkit-keyframes twink {
  0%, 100% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.2;
  }
  60% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.15;
  }
}

@keyframes twink {
  0%, 100% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.2;
  }
  60% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.15;
  }
}
.lamp01 {
  width: min(15.9090909091vw, 210px);
  height: min(19.0909090909vw, 252px);
  left: 4%;
}
.lamp01::before {
  width: 223px;
  height: 182px;
  background: url(../img/top/lamp_back01.png) no-repeat center top;
  background-size: 100%;
}
.lamp01 .l1 {
  top: 6.7em;
  left: -1.2em;
}
.lamp01 .l2 {
  top: 7.5em;
  right: 1.8em;
}
.lamp01 .l3 {
  top: 4.8em;
  right: -0.8em;
}

.lamp02 {
  width: min(15.1515151515vw, 200px);
  height: min(20.1515151515vw, 266px);
  right: 4%;
}
.lamp02::before {
  width: 215px;
  height: 190px;
  background: url(../img/top/lamp_back02.png) no-repeat center top;
  background-size: 100%;
}

.clouds .cloud {
  position: absolute;
  pointer-events: none;
  opacity: 0.3;
}
.clouds .cloud.cloud-01 {
  width: min(30.303030303vw, 400px);
  right: calc(50% + min(23.4848484848vw, 310px));
  top: 27%;
}
.clouds .cloud.cloud-02 {
  width: min(30.303030303vw, 400px);
  top: 32%;
  left: calc(50% + min(30.303030303vw, 400px));
}
.clouds .cloud.cloud-03 {
  width: min(16.6666666667vw, 220px);
  left: calc(50% + min(27.2727272727vw, 360px));
  top: 34%;
}
.clouds .cloud.cloud-04 {
  width: min(37.8787878788vw, 500px);
  right: calc(50% + min(34.0909090909vw, 450px));
  top: 50%;
}
.clouds .cloud.cloud-05 {
  width: min(19.696969697vw, 260px);
  right: calc(50% + min(31.8181818182vw, 420px));
  top: 52%;
}
.clouds .cloud.cloud-06 {
  width: min(34.0909090909vw, 450px);
  left: calc(50% + min(28.7878787879vw, 380px));
  top: 56%;
}
.clouds .cloud.cloud-07 {
  width: min(21.2121212121vw, 280px);
  right: calc(50% + min(37.8787878788vw, 500px));
  top: 60%;
}
.clouds .cloud.cloud-08 {
  width: min(41.6666666667vw, 550px);
  left: calc(50% + min(30.303030303vw, 400px));
  top: 63%;
}
.clouds .cloud.cloud-09 {
  width: min(30.303030303vw, 400px);
  right: calc(50% + min(22.7272727273vw, 300px));
  top: 71%;
}
.clouds .cloud.cloud-10 {
  width: min(37.8787878788vw, 500px);
  left: calc(50% + min(31.0606060606vw, 410px));
  top: 79%;
}
.clouds .cloud.cloud-11 {
  width: min(19.696969697vw, 260px);
  left: calc(50% + min(28.7878787879vw, 380px));
  top: 82%;
}
.clouds .cloud.cloud-12 {
  width: min(37.8787878788vw, 500px);
  right: calc(50% + min(28.7878787879vw, 380px));
  top: 86%;
}
@media screen and (max-width: 768px) {
  .clouds .cloud.cloud-01 {
    width: min(106.6666666667vw, 400px);
    right: calc(50% + min(-5.3333333333vw, -20px));
    top: 26%;
    display: none;
  }
  .clouds .cloud.cloud-02 {
    width: min(133.3333333333vw, 500px);
    top: 32%;
    left: calc(50% + min(5.3333333333vw, 20px));
    display: none;
  }
  .clouds .cloud.cloud-03 {
    width: min(53.3333333333vw, 200px);
    left: calc(50% + min(16vw, 60px));
    top: 34%;
    display: none;
  }
  .clouds .cloud.cloud-04 {
    width: min(93.3333333333vw, 350px);
    right: calc(50% - min(8vw, 30px));
    top: 50%;
  }
  .clouds .cloud.cloud-05 {
    width: min(53.3333333333vw, 200px);
    right: calc(50% + min(13.3333333333vw, 50px));
    top: 52%;
  }
  .clouds .cloud.cloud-06 {
    width: min(80vw, 300px);
    left: calc(50% - min(2.6666666667vw, 10px));
    top: 56%;
  }
  .clouds .cloud.cloud-07 {
    width: min(53.3333333333vw, 200px);
    right: calc(50% + min(16vw, 60px));
    top: 60%;
  }
  .clouds .cloud.cloud-08 {
    width: min(120vw, 450px);
    left: calc(50% + min(5.3333333333vw, 20px));
    top: 63%;
  }
  .clouds .cloud.cloud-09 {
    width: min(80vw, 300px);
    right: calc(50% - min(10.6666666667vw, 40px));
    top: 71%;
  }
  .clouds .cloud.cloud-10 {
    width: min(80vw, 300px);
    left: calc(50% - min(10.6666666667vw, 40px));
    top: 79%;
  }
  .clouds .cloud.cloud-11 {
    width: min(53.3333333333vw, 200px);
    left: calc(50% + min(10.6666666667vw, 40px));
    top: 82%;
  }
  .clouds .cloud.cloud-12 {
    width: min(133.3333333333vw, 500px);
    right: calc(50% + min(5.3333333333vw, 20px));
    top: 86%;
    display: none;
  }
}