@charset "utf-8";

/*   common   */
html {
  scroll-behavior: smooth;
}

body {
  position: relative;
}

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

.inner {
  display: block;
  max-width: 570px;
  width: 91%;
  margin: 0 auto;
  color: #532800;
  font-family: "Noto Sans JP";
  font-weight: 600;
}

@media screen and (min-width: 768px) {
  .pc-w {
    max-width: 480px;
    padding: 0 10px;
    margin: 0 auto;
  }
}

a {
  text-decoration:none;
  color: inherit;
}

p {
  line-height: 1;
}

.notes {
  font-size: 12px;
}

picture img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {}

/*   #mv   */
#mv {
  position: relative;
}

@media screen and (min-width: 768px) {
  #mv {
    background-image: url("../img/mv_bg.png");
    background-size: 30px;
    background-repeat: repeat;
    background-position: center 0;
    text-align: center;
    padding-top: 23px;
    overflow: hidden;
  }
}

@media screen and (min-width: 768px) {
  #mv h1 {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 1362px;
    padding-bottom: 15px;
  }
}

#mv h1 picture img {
  width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  #mv h1 picture img {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 auto 100px;

  }
}

#mv .area_cp {
  width: 100%;
  background-color: #006936;
  text-align: center;
  padding: 3.5% 0 3%;
}

@media screen and (min-width: 768px) {
  #mv .area_cp {
    padding: 11px;
  }
}

#mv .area_cp picture img {
  width: 85.6%;
}

@media screen and (min-width: 768px) {
  #mv .area_cp picture img {
    max-width: 460px;
    width: 100%;
  }
}

.mv_anchor {
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 80.5%;
  max-width: 590px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .mv_anchor {
    bottom: 64px;
    max-width: 602px;
    padding: 0 10px 17px;
  }
}

@media screen and (min-width: 768px) {
  .mv_anchor li {
    width: calc(100% / 3);
  }
}

@media screen and (min-width: 768px) {
  .mv_anchor picture img {
    max-width: 180px;
    width: 100%;
  }
}

/*   #goods   */
#goods {
  background-image: url("../img/goods_bg.png");
  background-size: 30px;
  background-repeat: repeat;
  background-position: center 0;
  padding: 38px 0 15px;
}

@media screen and (min-width: 768px) {
  #goods {
    background-size: 30px;
    padding: 30px 0 5px;
    overflow: hidden;
  }
}

#goods h2 {
  width: 93%;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  #goods h2 {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
}

#goods .goods_content {
  position: relative;
}

#goods .goods_content > p {
  width: 78%;
  margin: -10px auto 16px;
}

@media screen and (min-width: 768px) {
  #goods .goods_content > p {
    max-width: 265px;
    margin: 14px auto 42px;
  }
}

#goods .goods_content ul {
  position: relative;
}

#goods .goods_content ul li {
  margin-bottom: 24px;
}

@media screen and (min-width: 768px) {
  #goods .goods_content ul li {
    margin-bottom: 52px;
  }
}

#goods .goods_content ul li > div {
  background-color: #fff;
  border: 2px solid #006936;
  border-radius: 20px;
  margin-bottom: 10px;
}

#goods .goods_content ul .goods_content_prizeTtl {
  position: relative;
  background-color: #006936;
  border-radius: 17px 17px 0 0;
  height: 13vw;
}

@media screen and (min-width: 768px) {
  #goods .goods_content ul .goods_content_prizeTtl {
    bottom: 26px;
    width: 100%;
    max-width: 325px;
    height: 50px;
    border-radius: 30px;
    padding-top: 50px;
    margin: 0 auto;
  }
}

#goods .goods_content ul .goods_content_prizeTtl picture img {
  position: relative;
}

#goods .goods_content ul .goods_content_prize_A .goods_content_prizeTtl picture img {
  top: -10px;
  left: -3px;
  width: 91%;
}

@media screen and (min-width: 768px) {
  #goods .goods_content ul .goods_content_prize_A .goods_content_prizeTtl picture img {
    top: -60px;
    left: -0.3%;
    width: 84.8%;
  }
}

#goods .goods_content ul .goods_content_prize_B .goods_content_prizeTtl picture img {
  top: -10px;
  left: 0%;
  width: 90.4%;
}

@media screen and (min-width: 768px) {
  #goods .goods_content ul .goods_content_prize_B .goods_content_prizeTtl picture img {
    top: -60px;
    width: 84%;
  }
}

#goods .goods_content ul .goods_content_prize_C .goods_content_prizeTtl picture img {
  top: -10px;
  left: 0.4%;
  width: 93.6%;
}

@media screen and (min-width: 768px) {
  #goods .goods_content ul .goods_content_prize_C .goods_content_prizeTtl picture img {
    top: -60px;
    left: 2%;
    width: 89%;
  }
}

#goods .goods_content ul .goods_content_prize {
  padding: 0 0 5px;
  border-radius: 0 0 17px 17px;
  text-align: center;
}

#goods .goods_content ul .goods_content_prize_A .goods_content_prize {
  padding: 0 0 5px;
}

@media screen and (min-width: 768px) {
  #goods .goods_content ul .goods_content_prize_A .goods_content_prize {
    padding: 0 0 35px;
    margin-top: 7px;
  }
}

#goods .goods_content ul .goods_content_prize_B .goods_content_prize {
  padding: 0 0 14px;
}

@media screen and (min-width: 768px) {
  #goods .goods_content ul .goods_content_prize_B .goods_content_prize {
    padding: 0 0 39px;
    margin-top: 2px;
  }
}

#goods .goods_content ul .goods_content_prize_C .goods_content_prize {
  padding: 0 0 5px;
}

@media screen and (min-width: 768px) {
  #goods .goods_content ul .goods_content_prize_C .goods_content_prize {
    padding: 0 0 38px;
    margin-top: 19px;
  }
}

#goods .goods_content ul .goods_content_prize picture img {
  width: 81.2%;
}

@media screen and (min-width: 768px) {
  #goods .goods_content ul .goods_content_prize picture img {
    width: 87.6%;
  }
}

#goods .goods_content ul .notes {
  line-height: 1.35;
}

#goods .bread-deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#goods .bread {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
}

#goods .bread1 {
  display: none;
}

@media screen and (min-width: 768px) {
  #goods .bread1 {
    background-image: url(../img/deco_pandorobou.png);
    display: block;
    width: 165px;
    height: 184px;
    top: 3.2%;
    left: -176px;
  }
}

#goods .bread2 {
  background-image: url(../img/deco_bread_01.png);
  width: 63px;
  height: 56px;
  top: 26.4%;
  left: -4.6%;
}

@media screen and (min-width: 768px) {
  #goods .bread2 {
    width: 115px;
    height: 104px;
    top: 24.2%;
    left: -291px;
  }
}

#goods .bread3 {
  background-image: url(../img/deco_bread_02.png);
  width: 58px;
  height: 50px;
  top: 55%;
  right: -1.8%;
}

@media screen and (min-width: 768px) {
  #goods .bread3 {
    width: 95px;
    height: 84px;
    top: 40.7%;
    left: -123px;
  }
}

#goods .bread4 {
  background-image: url(../img/deco_bread_03.png);
  width: 57px;
  height: 51px;
  top: 78%;
  left: -3.3%;
}

@media screen and (min-width: 768px) {
  #goods .bread4 {
    width: 110px;
    height: 92px;
    top: 56.7%;
    left: -290px;
  }
}

#goods .bread5 {
  display: none;
}

@media screen and (min-width: 768px) {
  #goods .bread5 {
    background-image: url(../img/deco_bread_04.png);
    display: block;
    width: 91px;
    height: 79px;
    top: 72.1%;
    left: -121px;
  }
}

#goods .bread6 {
  display: none;
}

@media screen and (min-width: 768px) {
  #goods .bread6 {
    display: block;
    background-image: url(../img/deco_bread_05.png);
    width: 98px;
    height: 96px;
    top: 88.7%;
    left: -262px;
  }
}

#goods .bread7 {
  display: none;
}

@media screen and (min-width: 768px) {
  #goods .bread7 {
    display: block;
    background-image: url(../img/deco_bread_05.png);
    width: 89px;
    height: 86px;
    top: 7%;
    right: -142px;
    transform: rotate(-37deg);
  }
}

#goods .bread8 {
  display: none;
}

@media screen and (min-width: 768px) {
  #goods .bread8 {
    display: block;
    background-image: url(../img/deco_bread_04.png);
    width: 91px;
    height: 79px;
    top: 21.4%;
    right: -290px;
  }
}

#goods .bread9 {
  display: none;
}

@media screen and (min-width: 768px) {
  #goods .bread9 {
    display: block;
    background-image: url(../img/deco_bread_06.png);
    width: 103px;
    height: 87px;
    top: 37.9%;
    right: -177px;
  }
}

#goods .bread10 {
  display: none;
}

@media screen and (min-width: 768px) {
  #goods .bread10 {
    display: block;
    background-image: url(../img/deco_bread_01.png);
    width: 115px;
    height: 104px;
    top: 52%;
    right: -290px;
    transform: rotate(72deg);
  }
}

#goods .bread11 {
  display: none;
}

@media screen and (min-width: 768px) {
  #goods .bread11 {
    display: block;
    background-image: url(../img/deco_bread_07.png);
    width: 78px;
    height: 77px;
    top: 69.3%;
    right: -169px;
  }
}

#goods .bread12 {
  display: none;
}

@media screen and (min-width: 768px) {
  #goods .bread12 {
    display: block;
    background-image: url(../img/deco_bread_02.png);
    width: 95px;
    height: 84px;
    top: 88.4%;
    right: -255px;
    transform: rotate(79deg);
  }
}

/*   #products   */
#products {
  position: relative;
  background-color: #FFF0D2;
  background-size: 100%;
  background-repeat: no-repeat;
  padding: 16px 0 0;
}

#products:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 25px;
  background: url(../img/prodacts_bg_sp.png) no-repeat center top;
  background-size: 100% 25px;
}

@media screen and (min-width: 768px) {
  #products:before {
    top: -33px;
    width: 100%;
    height: 33px;
    background: url(../img/prodacts_bg.png) no-repeat center top;
    background-size: 100% 100%;
  }
}

#products h2 {
  width: 91%;
  margin: 0 auto 8px;
}

@media screen and (min-width: 768px) {
  #products h2 {
    width: 50%;
    margin: 9px auto 23px;
  }
}

#products .notes {
  margin-top: 17px;
  line-height: 1.6;
}

@media screen and (min-width: 768px) {
  #products .notes {
    margin-top: 9px;
  }
}

/*   #howto   */
#howto {
  position: relative;
  background-color: #FFF0D2;
  padding: 37px 0 5px;
}

@media screen and (min-width: 768px) {
  #howto {
    padding: 37px 0 20px;
  }
}

#howto:after {
  content: "";
  position: absolute;
  bottom: -25px;
  width: 100%;
  height: 25px;
  background: url(../img/prodacts_bg_sp.png) no-repeat bottom center;
  background-size: 100% 25px;
  transform: rotate(180deg);
}

@media screen and (min-width: 768px) {
  #howto:after {
    bottom: -33px;
    width: 100%;
    height: 33px;
    background: url(../img/prodacts_bg.png) no-repeat center top;
    background-size: 100% 100%;
  }
}

#howto h2 {
  width: 91%;
  margin: 0 auto 12px;
}

@media screen and (min-width: 768px) {
  #howto h2 {
    width: 50%;
    margin: 11px auto 31px;
  }
}

/* ラジオ非表示 */
.tab-wrap input {
  display: none;
}

/* タブ基本 */
.tab-wrap{
  z-index: 2;
  position: relative;
}

.tab {
  display: inline-block;

  width: 50%;

  padding: 14px 0 13px;
  background: #EA5514;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: 0.2s;
}


.tab img {
  display: block;
  margin: 0 auto;
}

.tab img.on {
  display: none;
}

/* 選択されたタブだけ on画像表示 */
#tab-web:checked ~ .tab-btns .web-tab .on,
#tab-post:checked ~ .tab-btns .post-tab .on {
  display: block;
}

/* 選択されたタブの背景色変更 */
#tab-web:checked ~ .tab-btns .web-tab,
#tab-post:checked ~ .tab-btns .post-tab {
  width: 50%;
  background: #fff;
  text-align: center;
}

@media screen and (min-width: 768px) {
  #tab-web:checked ~ .tab-btns .web-tab,
  #tab-post ~ .tab-btns .post-tab,
  #tab-web ~ .tab-btns .web-tab,
  #tab-post:checked ~ .tab-btns .post-tab {
    width: 50%;
  }
}

#tab-web:checked ~ .tab-btns .web-tab .off,
#tab-post:checked ~ .tab-btns .post-tab .off {
  display: none;
}

/* コンテンツ非表示 */
.content {
  display: none;
}

.tab-contents{
  background-color: #EA5514;
  border-radius: 0 0 10px 10px;
}

/* 選択時だけ表示 */
#tab-web:checked ~ .tab-contents .web-content,
#tab-post:checked ~ .tab-contents .post-content {
  display: block;
  background-color: #fff;
  text-align: center;
}
#tab-web:checked ~ .tab-contents .web-content {
  border-radius: 0 10px 10px 10px;
}
#tab-post:checked ~ .tab-contents .post-content {
  border-radius: 10px 0 10px 10px;
}



#tab-web:checked ~ .tab-contents .web-content picture img,
#tab-post:checked ~ .tab-contents .post-content picture img {
  width: 86%;
}

@media screen and (min-width: 768px) {
  #tab-web:checked ~ .tab-contents .web-content picture img,
  #tab-post:checked ~ .tab-contents .post-content picture img {
    width: 89%;
  }
}

#tab-web:checked ~ .tab-contents .web-content picture img {
  padding: 21px 0 24px;
}

@media screen and (min-width: 768px) {
  #tab-web:checked ~ .tab-contents .web-content picture img {
  padding: 19px 0 20px;
  }
}

#tab-post:checked ~ .tab-contents .post-content picture img {
  padding: 21px 0 0;
}

@media screen and (min-width: 768px) {
  #tab-post:checked ~ .tab-contents .post-content picture img {
  padding: 19px 0 0;
  }
}

#tab-post:checked ~ .tab-contents .post-content-btn picture img {
  width: 60%;
  padding: 10px 0 20px;
}

@media screen and (min-width: 768px) {
  #tab-post:checked ~ .tab-contents .post-content-btn picture img {
    max-width: 240px;
    padding: 10px 0 20px;
  }
}

.tab-btns {
  display: flex;
  justify-content: center;
}

.tab-btns picture img {
    width: auto;
    height: 5vw;
}

@media screen and (min-width: 768px) {
  .tab-btns .web-tab picture img {
    height: 18px;
  }

  .tab-btns .post-tab picture img {
    height: 19px;
    padding-left: 5px;
  }
}

#howto .inner > ul {
  line-height: 1.5;
  margin-top: 22px;
}

@media screen and (min-width: 768px) {
  #howto .inner > ul {
    margin-top: 10px;
  }
}

#howto .inner > ul li {
  text-indent: -1em;
  padding-left: 1em;
  padding-bottom: 5px;
}

@media screen and (min-width: 768px) {
  #howto .inner > ul li {
    padding-bottom: 0;
  }
}

/*   #pandorobou   */
#pandorobou {
  background-image: url(../img/pandorobou_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 55px 0 70px;
  scroll-margin-top: -25px;
}

@media screen and (min-width: 768px) {
  #pandorobou {
    padding: 82px 0 40px;
    scroll-margin-top: -33px;
  }
}

#pandorobou p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  margin-top: 22px;
}

@media screen and (min-width: 768px) {
  #pandorobou p {
    font-size: 18px;
    line-height: 2.15;
    margin-top: -4px;
  }
}

/*   #info-area   */
#info-area {
  background-image: url("../img/detail_bg.png");
  background-size: 30px;
  background-repeat: repeat;
  background-position: center 0;
  padding: 32px 0 110px;
}

@media screen and (min-width: 768px) {
  #info-area {
    padding: 49px 0;
  }
}

#detail h2 {
  width: 97%;
  margin: 0 auto 8px;
}

@media screen and (min-width: 768px) {
  #detail h2 {
    width: 87.5%;
    margin: 0 auto;
    padding-right: 16px;
  }
}

.detail_box {
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  .detail_box {
    padding: 10px 13px 15px 20px;
    width: 460px;
  }
}

.detail_scroll::-webkit-scrollbar {
  width: 3px;
}

@media screen and (min-width: 768px) {
  .detail_scroll::-webkit-scrollbar {
    width: 5px;
  }
}

.detail_scroll::-webkit-scrollbar-thumb {
  background: #EA5514;
  border-radius: 8px;
}

.detail_scroll::-webkit-scrollbar-track {
  background: #FEEADE;
  border-radius: 8px;
}

.box-style {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  height: 230px;
  overflow-y: scroll;
}

@media screen and (min-width: 768px) {
  .box-style {
    border-radius: 12px;
    padding: 10px;
    height: 295px;
  }
}

.box-style + .box-style {
  margin-top: 50px;
}

.box-style,
.box-style p {
  font-weight: 500;
  font-size: 11px;
  line-height: 1.45;
  color: #000;
}

@media screen and (min-width: 768px) {
  .box-style,
  .box-style p {
    font-size: 14px;
  }
}

.box-style dt {
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 5px;
}

@media screen and (min-width: 768px) {
  .box-style dt {
    font-size: 15px;
    margin-top: 20px;
  }
}

.box-style dd dt:first-child{
  margin-top: 5px;
}

.box-style .detail_spec dt {
  font-size: 11px;
}

@media screen and (min-width: 768px) {
  .box-style .detail_spec dt {
    font-size: 14px;
  }
}

.top-1rem {
  margin-top: 1rem;
}

.bottom-1rem {
  margin-bottom: 1rem;
}

#contact {
  width: 91%;
  margin: 0 auto;
  padding: 31px 0 0;
}

#contact h2 {
  margin-bottom: 15px;
}

@media screen and (min-width: 768px) {
  #contact h2 {
    width: 74.8%;
    margin: 17px auto 18px;
  }
}

#contact .inner {
  position: relative;
}

#contact .inner > p {
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.06rem;
}

@media screen and (min-width: 768px) {
  #contact .inner > p {
    font-size: 18px;
    letter-spacing: 0;
  }
}

#contact .bread-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#contact .bread {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
}

#contact .bread1 {
  background-image: url(../img/deco_bread_02.png);
  width: 55px;
  height: 47px;
  top: 16%;
  left: -3%;
}

@media screen and (min-width: 768px) {
  #contact .bread1 {
    width: 70px;
    height: 60px;
    top: 16.3%;
    left: 32px;
  }
}

#contact .bread2 {
  background-image: url(../img/deco_bread_01.png);
  width: 60px;
  height: 54px;
  top: 14.8%;
  right: -4.4%;
}

@media screen and (min-width: 768px) {
  #contact .bread2 {
    width: 71px;
    height: 64px;
    top: 15.7%;
    right: 23px;
  }
}

#contact  .inner > p.contact_tel {
  font-size: 32px;
  font-weight: 700;
  margin-top: 7px;
  margin-bottom: 8px;
  letter-spacing: -0.07rem;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  #contact  .inner > p.contact_tel {
    font-size: 34px;
    margin-top: 12px;
    margin-bottom: 13px;
    letter-spacing: 0;
  }
}

#contact address {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  #contact address {
    font-size: 16px;
    line-height: 1.4;
  }
}

#contact address dl {
  margin: 0;
}

#contact address dt,
#contact address dd {
  margin: 0;
}

#contact address dt {
  float: left;
  width: 6em;
  clear: left;
}

#contact address dt.address_mail {
  width: 4.3em;
}

#contact address dd {
  margin-left: 6em;
}

#contact address dd.address_mail {
  margin-left: 4.3em;
}

#contact address span {
  font-weight: 500;
}

#contact .inner > ul {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 15px;
  margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
  #contact .inner > ul {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 20px;
    margin-bottom: 31px;
  }
}

.site-btn {
  width: 87%;
  margin: 0 auto 5px;
}

.copyright {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .copyright {
    margin-top: 14px;
  }
}

.copyright small {
  font-size: 9px;
}

@media screen and (min-width: 768px) {
  .copyright small {
    font-size: 13px;
  }
}

/*   .float-button_wrap   */
.float-btn_wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
}

.float-btn_wrap .floating-btn_top {
  position: fixed;
  bottom: 90px;
  right: 10px;
  width: 50px;
}

.floating-btn_top {
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
}

.floating-btn_top.is-show {
  opacity: 1;
  visibility: visible;
}

@media screen and (min-width: 768px) {
  .float-btn_wrap .floating-btn_top {
    bottom: 40px;
    right: 45px;
    width: 61px;
  }
}

.float-btn_wrap .floating-btn_oubo {
  width: 90%;
  margin: 0 auto 10px;
}

@media screen and (min-width: 768px) {
  .float-btn_wrap .floating-btn_oubo {
    max-width: 360px;
    margin: 0 auto 10px;
  }
}

.pcOnly {
  display: none !important;
}

@media screen and (min-width: 768px) {
  .spOnly {
    display: none !important;
  }

  .pcOnly {
  display: inline-block !important;
}
}

a img{
  opacity: 1;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  a:hover img{
    opacity: 0.8;
  }
}

a{
  -webkit-tap-highlight-color: transparent;
}

a:focus{ outline: none; }
a:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
}


.p-footer{
  margin: 0!important;
  padding-bottom: 160px!important;
}