@charset "utf-8" ;

/**
debug
**/
/**セクションごとの区切りを入れる用**/
.test hr {
  display: block;;
  border-top: 10px dashed darkorange;
  height: 10px;
  background: #000;
  margin: 0;
  width: 99vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.test div {
  outline: 2px dashed deeppink;
}
.test img {
  outline: 1px dashed blue;
}
hr {
    display: none;
}


/**default**/
*, ::before, ::after {
    box-sizing: border-box;
}
body {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%; /* Safari */
}
img {
    max-width:100%;
    vertical-align: top;
}
table {
    width:100%;
}
a:link, a:active, a:visited {
    text-decoration: none;
    color: inherit;
}
a,a:hover {
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;
}
a:hover {
    opacity: 0.8;
}
a, picture, img {
    display: block;
}

/**Google Font用のスタイル
.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
**/

/**共通**/
.mb10per {
    margin-bottom: 10%;
}
.no-absolute {
    position: unset!important;
}

/**base**/
html {
    font-size: 16px;
    scroll-behavior: smooth;
}
.lpwrap {
    max-width: 768px;
    width: 100%;
    margin: 0 auto;
    /* overflow: hidden; */
}
img,
iframe,
video {
    margin-top: -0.1%;
}

.fv_mae {
    margin-bottom: -20px;
    margin-bottom: -3%;
    position: relative;
    z-index: 10;
}
#slideshow02 {
    /* margin-top: -20px; */
}
.fv_usiro {
    margin-top: -20px;
    margin-top: -3%;
    position: relative;
    z-index: 10;
}
.slideshow02 {
    position: relative;
}
.slideshow02 .show {
    opacity: 1;
    /* z-index: 1; */
}

.slideshow02 img {
    position: absolute;
    position: relative;
    opacity: 0;
    transition: 1s;
}
.slideshow02 img.fv02 {
    position: absolute;
    left: 0;
    top: 0;
}

.wrap_insta {
    background: url(https://d2w53g1q050m78.cloudfront.net/jbjbccom/uploads/jabujabuclean_202603/img/jabujabuclean1_08_bg.jpg) 0 0 repeat-y;
    background-size: contain;
    padding-bottom: 10%;
}
.ugc-slider-wrapper {
    padding: 0 5%;
}

.wrap_iframe_bg {
    background-color: #0368cf;
}
.wrap_iframe {
    width: 84%;
    width: calc((700/768)*100%);

    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.wrap_iframe::before {
    padding-top: 56.25%; /**対応策**/
    content: "";
    display: block;
}
.wrap_iframe iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 10;
    border: 2px solid #fff;
}

.wrap_offer {
    position: relative;
    display: flex;
    justify-content: center;
}
.wrap_offer .btn_cta {
    position: absolute;
    margin: 0 auto;
    bottom: 15%;
    width: calc((649/768)*100%);
    animation: anime1 0.8s ease 0s infinite alternate;
}
@keyframes anime1 {
0% {
    transform: scale(0.9, 0.9);
}
100% {
    transform: scale(1, 1);
}
}/**@end**/

.video {
	width: 100%;
	vertical-align: bottom; /**下にできる余白対策**/
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 10;
    border: 2px solid #fff;
}


/** SP **/
@media screen and (max-width: 480px){

    /**base**/
    html {
        font-size: 14px;
    }
    .lpwrap {
        max-width: 100%;
    }
    .lpwrap {
        margin-top: -0.1%;
    }

}/**@end**/