@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 */
}
.lpwrap img {
    max-width:100%;
    vertical-align: top;
}
.lpwrap table {
    width:100%;
}
.lpwrap a:link, .lpwrap a:active, .lpwrap a:visited {
    text-decoration: none;
    color: inherit;
}
.lpwrap a,.lpwrap a:hover {
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;
}
.lpwrap a:hover {
    opacity: 0.8;
}
.lpwrap a, .lpwrap picture, .lpwrap 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;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    /* overflow: hidden; */
    position: relative;
}
img,
iframe,
video {
    margin-top: -0.1px;
}

.ugc-slider-wrapper {
    padding: 0 5%;
}

.wrap_fv {
    position: relative;
    justify-content: center;
}
.wrap_fv .fv_anim01{
    position: absolute;
    bottom: 7%;
    left: 6%;
    width: calc((222/768)*100%);
}
.wrap_fv .fv_anim02{
    position: absolute;
    bottom: 7%;
    left: 35.5%;
    width: calc((222/768)*100%);
}
.wrap_fv .fv_anim03{
    position: absolute;
    bottom: 7%;
    right: 6%;
    width: calc((222/768)*100%);
}
/* フェードイン(初期値) */
.js-fadeUp img {
	opacity: 0;
	transform: translateY(30px);/* 下に30pxの位置から */
	transition: opacity .8s, transform .8s;
}
/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview img {
	opacity: 1;
	transform: translateY(0);/* 30px上に移動する */
	transition-delay: .5s;/* フェード開始を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: 5%;
    width: calc((627/768)*100%);
    /* animation: anime1 0.8s ease 0s infinite alternate; */
    overflow: hidden;
}

.wrap_offer .btn_cta01 {
    width: calc((653/768)*100%);
    bottom: 6.5%;
    /* transform: translate(-1%, 0); */
}
.wrap_offer .btn_cta02 {
    width: calc((653/768)*100%);
    bottom: 37%;
}
.wrap_offer .btn_cta03 {
    width: calc((653/768)*100%);
    bottom: 6%;
}
.wrap_offer .btn_cta04 {
    width: calc((653/768)*100%);
    bottom: 41%;
}
.wrap_offer .btn_cta05 {
    width: calc((653/768)*100%);
    bottom: 7%;
}
.wrap_offer .btn_cta01::before,
.wrap_offer .btn_cta03::before,
.wrap_offer .btn_cta05::before {
    position: absolute;
    content: "";
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-45deg);
    animation: shine-btn 4s cubic-bezier(0.5, 0.08, 0.6, 0.5) infinite;
}
@keyframes shine-btn {
0% {
    left: -100%;
}
10% {
    left: 100%;
}
100% {
    left: 100%;
}
} /**@keyframes**/




@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;
}

.wrap_accordion {
    text-align: center;
    margin: 6% 0;
}
.wrap_accordion dt,
.wrap_accordion dd,
.wrap_accordion img {
    display: inline-block;
    width: calc((727/768)*100%);
}
.wrap_accordion dt .accordion_ttl_on {
    display: none;
}
.wrap_accordion dt.accordion_on .accordion_ttl_on {
    display: inline-block;
}
.wrap_accordion dt.accordion_on .accordion_ttl_off {
    display: none;
}
.wrap_accordion dt {
    cursor: pointer;
    /* margin-bottom: 3.9%; */
}
.wrap_accordion dd {
    margin-bottom: 3.9%;
}
.wrap_accordion dd + dt {
    margin-top: 5%;
}




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

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

}/**@end**/