@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Serif+JP&display=swap');

* {margin:0; 
    padding:0; 
    line-height:1.6; 
    color: #222; 
    font-family: 'Noto Serif JP', serif;
}
*, *:before, *:after {box-sizing: border-box;}

html {
    font-size: 62.5%!important;
    overflow: auto;
}
body {
    overflow: hidden;
    position: relative;
    -webkit-text-size-adjust: 100%;
    margin: 0 auto;
    font-feature-settings : "palt";
    min-height: 100vh;

}




br {line-height:0;}
img,video {
    border:none;
    line-height:0;
    vertical-align:middle;
    max-width:100%;
    height:auto;
}
a {cursor: pointer;}
a:hover{text-decoration:none;}

p, div, li, th, td {font-size:1.6rem;}
ul,li{list-style: none;}

.dblock, .sp_none {display:block;}
.dnone, .pc_none {display:none;}
.tac {text-align:center;}
.tal {text-align:left;}
.tar {text-align:right;}
iframe{border:0; vertical-align: bottom;}
.relative{position: relative;}
.z1 {z-index: 1;}






/*---------- upper -----------*/

.box{width:100%; max-width:1000px; margin-right:auto; margin-left:auto; position:relative;}
.m_box{width:100%; max-width:880px; margin-right:auto; margin-left:auto; position:relative;}


/*---------- margin,padding -----------*/

.mtm5{margin-top:-5px;position:relative;z-index: 100}
.mtm12{margin-top:-12px;position:relative;z-index: 100}
.mtm110{margin-top:-110px;position:relative;z-index: 100}
.mtm150{margin-top:-150px;position:relative;z-index: 100}
.mtm200{margin-top:-200px;position:relative;z-index: 100}

.mb0{margin-bottom:0;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb15{margin-bottom:15px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb45{margin-bottom:45px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}
.mb70{margin-bottom:70px;}
.mb90{margin-bottom:90px;}
.mb135{margin-bottom:135px;}
.mb145{margin-bottom:145px;}

.mbm15{margin-bottom:-15px;}

.pb15{padding-bottom:15px;}
.pb30{padding-bottom:30px;}
.pb45{padding-bottom:45px;}
.pb60{padding-bottom:60px;}
.pb70{padding-bottom:70px;}
.pb90{padding-bottom:90px;}
.pb180{padding-bottom:180px;}

.pt5{padding-top:5px;}
.pt15{padding-top:15px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt60{padding-top:60px;}
.pt70{padding-top:70px;}
.pt80{padding-top:80px;}
.pt90{padding-top:90px;}
.pt120{padding-top:120px;}
.pt140{padding-top:140px;}
.pt180{padding-top:180px;}
.pt220{padding-top:220px;}
.pt450{padding-top:450px;}
.pt853{padding-top:853px;}

.box .mtm45 {margin-top:-45px;}
.box .mbm5 {margin-bottom:-5px; position: relative; z-index:1;}
.box .mbm10 {margin-bottom:-10px; position: relative; z-index:1;}

/*----- text -----*/

.small {font-size:80%;}
.big{font-size: 6rem;}
.bold {font-weight:bold;}
.strike {text-decoration: line-through;}
.red {color:#F00;}
.underline {text-decoration: underline;}
.line01, .line02 {position:relative;}
.line01::after {
    position:absolute;
    content:"";
    display:block;
    width:100%;
    height:4px;
    background:#222;
    left:0;
    bottom:-0.2rem;
    z-index:0;
}
.cf:after, .box:after, .m_box:after, ul:after, dl:after {
    height:0;visibility:hidden;content:" ";display:block;clear:both;}



/*---------- form -----------*/


input, textarea {
    font-family:inherit;
    font-size:100%;
    -webkit-user-select:auto;
    vertical-align: middle;
}
input[type="text"], input[type="tel"], input[type="email"], textarea {
    background: #FFF;
    border-radius: 6px;
    padding: 15px;
}
input[type="image"]{
    border:0;
    cursor:pointer;
}






/* 画像 */
.ttl_img {
    display:block;
    margin: 0 auto 30px;
    text-align: center;
}
.ttl_img0 {
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}
.img_h {transition: 0.5s;}
.img_h:hover {opacity:0.7;}



/* 点滅 */
.caution {
    display: block;
    margin: 0 auto 30px;
    animation: blink 0.7s ease-out infinite alternate;
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
/* 矢印 */
#arw3 {
    position: relative;
    height: 82px;
    width: 42px;
    margin-left: 310px;
}
#arw3 img {
    position: absolute;
    left:0;
    right:0;
    margin: 0 auto;
    animation: arw3 2s infinite;
    opacity: 0;
}
#arw3 img:nth-child(1){
    top:0;
    animation-delay: 0s;
}
#arw3 img:nth-child(2) {
    top:30px;
    animation-delay: .15s;
}
#arw3 img:nth-child(3) {
    bottom:0;
    animation-delay: .3s;
}
@keyframes arw3 {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}
.scroll {
    position: absolute;
    left:0;
    right:0;
    bottom:15px;
    display: block;
    margin: 0 auto;
    animation: scroll 0.7s ease-in infinite alternate;
    z-index: 2;
    text-align: center;
}
@keyframes scroll{
    0% {top:-15px;}
    100% {top:0;}
}


/*  ボタン
---------------------------------------------------------- */
@keyframes anime{
    0%{transform:scale(.95); opacity:1}
    90%{opacity:.1}to{transform:scale(1.2,1.2); opacity:0}
}

.btn {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.btn_box01 {
    position: relative;
    width: 778px;
    height: 163px;
    margin: 0 auto;
    transition: .2s;
    z-index: 1000;
}
.btn_box01:before, .btn_box01:after {
    content: "";
    position: absolute;
    z-index: -10;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 120px;
    box-shadow: 0 0 50px rgb(99, 243, 126) inset;
    animation: anime 2s ease-out infinite;
}
.btn_box01:after {animation-delay: .4s;}

.btn_box02 {
    position: relative;
    width: 540px;
    height: 83px;
    margin: 0 auto 15px;
    transition: .2s;
    z-index: 1000;
}
.btn_box02:before, .btn_box02:after {
    content: "";
    position: absolute;
    z-index: -10;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 120px;
    box-shadow: 0 0 50px rgba(0,255,0,0.6) inset;
    animation: anime 2s ease-out infinite;
}
.btn_box02:after {animation-delay: .4s;}

/* サンクス */
#thx .btn_box {
    height: 184px;
    margin: 0 auto;
}

/*  movie
---------------------------------------------------------- */

.movie {
    background: #dddddd;
    padding: 25px;
    width: 880px;
    margin: 0 auto 50px;
    position: relative;
}
.sonor{
    width: 820px;
    height: 483px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10;
}

.icon {
    width: 100px;
    height: 70px;
    border-radius: 17px;
    background: #e42983;
    position: absolute;
    top: calc(50% - 32px);
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
}

.icon:after {
    content: "";
    display: block;
    border-left: 36px solid #fff;
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 0px solid transparent;
    width: 0;
    height: 0;
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 14px);
}
.spinner {
    width: 180px;
    height: 180px;
    position: relative;
    margin: 0 auto;
    top: calc(50% - 84px);
}
.sonor_act {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 100px #e42983 inset;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    animation: sonor_act 1.3s ease-out infinite;
}
@keyframes sonor_act {
  0% { transform: scale(0.5);opacity: 1; }
  50% { transform: opacity: 1; }
  100% { transform: scale(1.0);opacity: 0; }
}




/* サンクス */
#thx .btn_box {
    height: 184px;
    margin: 0 auto;
}

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

    html {font-size: 100%;overflow: auto;}
    img {
        touch-callout:none;
        user-select:none;
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -moz-touch-callout:none;
        -moz-user-select:none;
    }
    .pc_none {display:block;}
    .sp_none {display:none;}
    body {
        overflow: hidden;
        position: relative;
    }
    body::before {
        content:"";
        display:block;
        width:100%;
        height:100%;
        position: fixed;
        z-index: -3;
        background: url(../img/body.jpg) repeat center top;
    }
       
    .sonor{
        pointer-events: none;
    }

    dl dt, dl dd {
        float: none;
        width: 100%;
    }
    dl dt b span {display: inline;}
    dl dt b {
        width: auto;
        margin: 0;
        padding-right: 160px;
    }
    .box p b, .box p strong {
        font-size:105%;
    }
    .line01::after {
        z-index:0;
        mix-blend-mode: multiply;
    }
}

.grecaptcha-badge { visibility: hidden; }