@charset "utf-8";

html {
    font-size: 62.5%;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    text-align: center;
    font-size: 10px;
    font-family: 'Noto Sans JP', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
    color: #000000;
    line-height: 1.75;
    width: 100%;
    background-color: #fff;
    background-image: url(../img/bg_body.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    font-weight: 400;	
    font-feature-settings: "palt" 1;
}

#wrapper{
    overflow: hidden;
        box-shadow: 0 6px 10px rgba(0, 0, 0, .2);
        background: #fff;
        margin: 0 auto;
        max-width: 480px;
        min-width: 320px;
        position: relative;
}


img {
    max-width: 100%;
    height: auto;
}

a {
    color: #fff;
}

a:hover {
    /*opacity: 0.8;*/
    text-decoration: none;
}

p {
    text-align: justify;
    hanging-punctuation: allow-end;	
}


#footer {
	text-align: center;
    font-size: 1.5em;
    padding: 0.5em;
}
#footer a{
	color: #000;
}

/* ---------------------------------------------------
 * common（PC　min-width: 1023px）
/* ---------------------------------------------------*/
.wrap {
	width: 2000px;
	max-width: 100%;
}

#container {
    position: relative;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/*動画*/
.vid_contents{
   position:absolute; 
   z-index: 999;
   top:4%;
   right:8%;
   width: 84%;/*背景色を横幅いっぱいに広げる*/
   margin: auto;
   background: #e6e6e6;/*余白の背景色*/
}
.vid_main{
    width: 100%;
    max-width: 920px;/*PC版での最大幅*/
}


/*ボタン*/
.cta_box01{
    position:absolute;
    z-index: 999;
    top:16%;
    right:0;
    left: 0;
    margin: auto;
    width: 95%;
}

.cta_box01 img{
  animation-duration: 1.4s;
  animation-name: poyon;
  animation-iteration-count: infinite;
}


.cta_box02{
    position:absolute;
    z-index: 999;
    top:4%;
    right:0;
    left: 0;
    margin: auto;
    width: 84%;
}

.cta_box02 img{
  animation-duration: 1.4s;
  animation-name: poyon;
  animation-iteration-count: infinite;
}


.cta_box03{
    position:absolute;
    z-index: 999;
    top:54%;
    right:0;
    left: 0;
    margin: auto;
    width: 84%;
}

.cta_box03 img{
  animation-duration: 1.4s;
  animation-name: poyon;
  animation-iteration-count: infinite;
}


@keyframes poyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}


@keyframes poyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.95, 0.95) translate(0%, 0%); }
  30%  { transform: scale(1.05, 1.05) translate(0%, 0%); }
  50%  { transform: scale(0.95, 0.95) translate(0%, 0%); }
  70%  { transform: scale(1.05, 1.05) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}



*, *::before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;	/*親要素のbox-sizingを継承*/
}

/*-----------------スマホサイズ-----------------------*/

@media screen and (max-width:600px) {
    .followBtn {
  position: fixed;
  right: 0;
    left:0;
    margin: auto;
  bottom: 0%;
}
.followBtn img{
    width:100%;
}
    .-pc {
        display: none;
    }
    .-sp {
        display: block;
    }
    body {
        font-size: 4.2vw;
    }
    .wrap {
        max-width: 100%;
        width: 100%;
    }
    
    #footer {
        text-align: center;
        font-size: 0.8em;
        padding: 1em;
    }
    #footer a{
        color: #000000;
    } 
}