@charset "UTF-8";


/*------- animation ----------------*/
@keyframes fadein { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fadeout { 0% { opacity: 1; }
  100% { opacity: 0; } }




/*------- float ----------------*/
.f-left { float: left !important; }

.f-right { float: right !important; }

.f-none { float: none !important; }

.clear { clear: both; }


/*------- sp ----------------*/
.sp-show { display: none; }

.sp-hide { display: inherit; }

@media screen and (max-width: 599px) { .sp-show { display: inherit; }
  .sp-hide { display: none; } }
.sp-show-inline { display: none; }

.sp-hide-inline { display: inline; }

@media screen and (max-width: 599px) { .sp-show-inline { display: inline; }
  .sp-hide-inline { display: none; } }
.inner { width: 100%; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; padding-bottom: .5rem; box-sizing: border-box; max-width: 1000px; }
@media screen and (max-width: 768px) { .inner { width: 100%; padding-left: 1rem; padding-right: 1rem; padding-bottom: 0; box-sizing: border-box; } }

.inner-block { margin-left: 10%; margin-right: 10%; }

.header { width: 100%; background: white; box-shadow: 0px 3px 7px rgba(53, 39, 17, 0.2); }
@media screen and (max-width: 768px) { .header { position: relative; } }
.header a { color: #352711; }
.header-upper { display: flex; align-items: center; padding-top: 1rem; }
@media screen and (max-width: 768px) { .header-upper { padding-bottom: 1rem; } }
.header-upper__logo { width: 245px; }
@media screen and (max-width: 768px) { .header-upper__logo { width: 180px; } }
.header-upper__nav { margin-left: auto; }
.header-upper__nav ul li { display: inline; margin-left: 20px; }
@media screen and (max-width: 768px) { .header-upper__nav ul li .btn-s { min-width: inherit; padding: .75rem; }
  .header-upper__nav ul li span { display: none; } }

/* header-nav-sp */
.header-nav-sp { display: none; padding: 1rem; width: 70px; height: 74px; box-sizing: border-box; position: absolute; top: 0; left: 0; transition: .4s; }
@media screen and (max-width: 768px) { .header-nav-sp { display: block; z-index: 20000; } }
.header-nav-sp.active { left: 84%; position: fixed; }

.btn-trigger { position: relative; width: 100%; height: 100%; cursor: pointer; display: block; box-sizing: border-box; }
.btn-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #BB9C65; border-radius: 2px; }
.btn-trigger span:nth-of-type(1) { top: 10px; }
.btn-trigger span:nth-of-type(2) { top: 20px; }
.btn-trigger span:nth-of-type(3) { bottom: 10px; }
.btn-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg); }
.btn-trigger.active span:nth-of-type(2) { opacity: 0; }
.btn-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg); }

.btn-trigger, .btn-trigger span { display: inline-block; transition: all .5s; box-sizing: border-box; }

.btn { display: inline-block; font-size: 1.3125rem; background: #EACA76; border: 1px solid #EACA76; color: white; min-width: 413px; max-width: 100%; line-height: 1; text-align: center; padding: 26px; box-sizing: border-box; border-radius: 60px; transition: .4s; }
@media screen and (max-width: 768px) { .btn { min-width: 296px; } }
.btn:hover { background: white; color: #EACA76; }

.btn-white { background: white; color: #EACA76; }
.btn-white:hover { background: #EACA76; color: white; }

.btn-green { background: #B5BA84; border: 1px solid #B5BA84; color: white; }
.btn-green:hover { background: white; color: #B5BA84; }

.btn-s { background: #352711; color: white !important; border: 1px solid #352711; border-radius: 40px; font-size: 1rem; line-height: 1; min-width: 180px; text-align: center; padding: .75rem 1rem; box-sizing: border-box; display: inline-block; transition: .4s; }
.btn-s:hover { background: white; color: #352711 !important; }

.btn-outline { background: none; color: #352711 !important; }

.btn-section { text-align: center; }
.btn-section ul li { margin-bottom: 1rem; }
.btn-section ul li:last-child { margin-bottom: 0; }

.hhgenmai-lp { max-width: 1000px; margin: 0 auto; }

.lp-main { position: relative; }

.lp-main__btn { position: absolute; top: 367px; left: 40px; }
@media screen and (max-width: 980px) { .lp-main__btn { top: 36.7vw; left: 4vw; }
  .lp-main__btn img { width: 48vw; } }

.lp-cta { padding-bottom: 40px; }
.lp-cta__head { text-align: center; padding: 45px 0 30px; }
@media screen and (max-width: 768px) { .lp-cta__head { padding-left: 1rem; padding-right: 1rem; } }
.lp-cta__box { background: #F6F0DA; border: 3px solid #352710; border-radius: 11px; width: 912px; margin: 0 auto; padding: 1rem; box-sizing: border-box; display: flex; }
@media screen and (max-width: 768px) { .lp-cta__box { width: 100%; } }
.lp-cta__box--body { width: 684px; }

.lp-faq { padding: 70px 0; }
.lp-faq__title { text-align: center; margin-bottom: 50px; }
.lp-faq__list { color: #7C5F1E; width: 905px; margin: 0 auto; }
@media screen and (max-width: 768px) { .lp-faq__list { width: 100%; } }
.lp-faq__list--qa { width: 45px; margin-right: 1rem; }
.lp-faq__list dt, .lp-faq__list dd { margin-bottom: 24px; display: flex; }
.lp-faq__list dt p, .lp-faq__list dd p { padding-top: .5rem; flex: 1; }
@media screen and (max-width: 768px) { .lp-faq__list dt p, .lp-faq__list dd p { padding-top: 0; } }
.lp-faq__list dt { font-size: 1.5rem; width: 100%; border: 1px solid #7C5F1E; padding: 1rem; box-sizing: border-box; }
@media screen and (max-width: 768px) { .lp-faq__list dt { font-size: 1rem; } }
.lp-faq__list dd { background: #F6F0DA; font-size: 1.375rem; padding: 1rem; box-sizing: border-box; width: 100%; }
@media screen and (max-width: 768px) { .lp-faq__list dd { font-size: 1rem; } }

.lp-bnr { padding: 40px 0 30px; text-align: center; }
.lp-bnr a { margin: 1rem 0; display: block; }

.btn-form { background: none; border: none; appearance: none; cursor: pointer; transition: .4s; opacity: 1; filter: brightness(100%); }
.btn-form:hover { filter: brightness(110%); opacity: .9; }

.footer-nav { padding: 4rem 0; }
.footer-nav ul { text-align: center; }
@media screen and (max-width: 768px) { .footer-nav ul { text-align: left; } }
.footer-nav ul li { display: inline; margin: 0 1rem; }
@media screen and (max-width: 768px) { .footer-nav ul li { display: block; padding: .5rem 0; } }
.footer-nav ul li a { color: #352711; }

.footer-copyright { text-align: center; background: #231815; padding: 1.5rem; }
.footer-copyright address { font-style: normal; color: white; font-weight: bold; }

.product-buy { position: fixed; bottom: 1rem; right: 1rem; z-index: 30000; transition: .4s; }
@media screen and (max-width: 768px) { .product-buy { bottom: .25rem; right: 0; }
  .product-buy img { width: 150px; } }
.product-buy__close { position: absolute; right: 0; top: .25rem; display: inline-block; cursor: pointer; z-index: 40000; }
.product-buy__close i { font-size: 1.375rem; }
.product-buy__close:hover i { color: #BF972D; }
.product-buy.is-close { right: -250px; }
.product-buy__alw { position: fixed; bottom: 1rem; right: -200px; z-index: 30000; cursor: pointer; transition: .4s; opacity: 1; }
.product-buy__alw:hover { opacity: .7; }
.product-buy__alw.is-close { right: 0; }

/*# sourceMappingURL=lp.css.map */


.about, .point, .gallery, .price, .cta {
  padding: 100px 20%;
}

html,
body {
font-family: 'Noto Sans JP', sans-serif;
  }


.fd-in {
  opacity: 0;
  transform: translate(0, 60px);
  -webkit-transform: translate(0, 60px);
}

.fd-done {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}


.pc { display: none!important; }
.sp { display: block !important; }


body {
 background-color: #fff;
}



.lp{
  display: block;
  width: 100%;
  margin-top: 1vw;
  margin-bottom: 1vw;
  margin-right: auto;
  margin-left: auto;
}

.lpin {
  display: block;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.lp img {
  display: block;
  object-fit: contain;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  align: center;
}




.ctabox{
  display: block;
  width: 100%;
  margin-top: 1vw;
  margin-bottom: 1vw;
  margin-right: auto;
  margin-left: auto;
}

.ctaboxin {
  display: block;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.ctaboxin img {
  display: block;
  object-fit: contain;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  align: center;
}
.ctaboxin span {
  display: block;
  object-fit: contain;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  align: center;
}

.ctaboxin img:hover {
  opacity: 0.5;
  transition: color 0.8s;
  transform: scale(0.95, 0.95);
  margin-right: auto;
　margin-left: auto;
}

.ctaboxin span:hover {
  opacity: 0.5;
  transition: color 0.8s;
  transform: scale(0.95, 0.95);
  margin-right: auto;
　margin-left: auto;
}

.ctaboxin input {
	max-width:100%;
}
.ctaboxin2 input {
	max-width:100%;
}
.ctaboxin2 img {
  display: block;
  object-fit: contain;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  align: center;
}
.ctaboxin2 span {
  display: block;
  object-fit: contain;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  align: center;
}

.ctaboxin2 img:hover {
  opacity: 0.5;
  transition: color 0.8s;
  transform: scale(0.95, 0.95);
  margin-right: auto;
　margin-left: auto;
}
.ctaboxin2 span:hover {
  opacity: 0.5;
  transition: color 0.8s;
  transform: scale(0.95, 0.95);
  margin-right: auto;
　margin-left: auto;
}


footer {
  border-top: 2px solid #fff;
  padding: 1vw 0;
  background: #A7272D;
  text-align: center;
  color: #fff;
}
a	{
	text-decoration:none;
}

footer p {
  font-size: 1vw;
  line-height: 1.2;
}
