@charset "UTF-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
}


/*---------- リンク設定 ----------*/
a:link {color:#37859a;text-decoration:underline;}
a:visited {color:#37859a;text-decoration:underline;}
a:hover {color:#139eb1;text-decoration:none;}
a{-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;}
a img {border-style:none;}
img {vertical-align:bottom;}
a img {border-style:none;-webkit-transition:all .3s;transition:all .3s;}


/*---------- ベーステキストの指定 ----------*/
p {
font-size:100%;
line-height:180%;
}

@media screen and (min-width:769px){
p {
font-size:18px;
line-height:180%;
letter-spacing:1px;
}
} 

/*---------- PC・スマホの非表示指定 ----------*/

@media screen and (max-width:768px){.spnone{display:none;}}
@media screen and (min-width:769px){.pcnone{display:none;}}


body{
margin:0;
padding:0;
font-size:100%;
color:#333;
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

@media screen and (min-width:769px){
body{
background-color: #f7e217;
background-image: url("images/all_bg.png");
background-repeat: repeat;
background-size: contain;
}
}


/*---------- SP・全体----------*/
#container{
margin: 0 auto;
padding: 0;
background:#fff;
border-left: none;
border-right: none;
text-align: center;
}

#container img{
max-width: 768px;
width: 100%;
}

/*---------- PC・全体----------*/
@media screen and (min-width:769px){
#wrapper{
width:768px;
margin:0 auto;
padding:0 40px;
border-left:8px solid #1e1e20;
border-right:8px solid #1e1e20;
background:#fff;
}

#container{
margin: 0 auto;
padding: 0;
background:#fff;
border-left:8px solid #1e1e20;
border-right:8px solid #1e1e20;
text-align: center;
}

#container img{
max-width: 768px;
width: 100%;
}
}


.btn_01, .btn_02, .btn_03{
margin: 0 auto;
width: 90%;
}

.btn_01{
padding: 35% 0 6.2%;
}

.btn_02{
padding: 33% 0 6.4%;
}

.btn_03{
padding: 40.8% 0 6.3%;
}

.btn_01 img, .btn_02 img, .btn_03 img{
cursor: pointer;
max-width: 660px;
animation: yureru-j 3.8s infinite;
width: 100%;
}

@keyframes yureru-j {
    0% {
        transform: translate(0px, 2px);
    }
    5% {
        transform: translate(0px, -2px);
    }
    10% {
        transform: translate(0px, 2px);
    }
    15% {
        transform: translate(0px, -2px);
    }
    20% {
        transform: translate(0px, 2px);
    }
    25% {
        transform: translate(0px, -2px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

.btn_01_bg, .btn_02_bg, .btn_03_bg, .top_bg{
margin: 0 auto;
padding: 0;
display: block;
background-repeat: no-repeat;
background-size: 100%;
}

.btn_01_bg{
background-image: url("images/02_btn_bg.png");
}

.btn_02_bg{
background-image: url("images/28_btnbg.png");
}

.btn_03_bg{
background-image: url("images/20_btnbg.png");
}

.top_bg {
  background-image: url("images/00_top.png");
  padding: 0 0 154.8%;
  position: relative; 
overflow: hidden;
}


/*----------ふわふわ・PC---------*/
.fuwafuwa01, .fuwafuwa02, .fuwafuwa03, .fuwafuwa04{
  position: absolute; 
  display: inline-block;
  width: 160px;
  height: 160px;
  background-size: 52.8%;
}

.fuwafuwa01 {
  animation: fuwafuwa1 4s ease-in-out infinite alternate;
  background-image: url("images/top_icon01.png");
  background-repeat: no-repeat;
  background-position: center center;
  top: 18%; 
  left: -7%;
}

.fuwafuwa02 {
  animation: fuwafuwa2 3s ease-in-out infinite alternate;
  background-image: url("images/top_icon02.png");
  background-repeat: no-repeat;
  background-position: center center;
  top: 28%; 
  left: 11%; 
}

.fuwafuwa03 {
  animation: fuwafuwa3 3s ease-in-out infinite alternate;
  background-image: url("images/top_icon03.png");
  background-repeat: no-repeat;
  background-position: center center;
  top: 27%; 
  right: 8%; 
}

.fuwafuwa04 {
  animation: fuwafuwa4 4s ease-in-out infinite alternate;
  background-image: url("images/top_icon04.png");
  background-repeat: no-repeat;
  background-position: center center;
  top: 16%; 
  right: -6%;
}

@keyframes fuwafuwa1 {
  0% {
    transform: translateY(0) rotate(-20deg);
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
  }
  100% {
    transform: translateY(0) rotate(20deg);
  }
}

@keyframes fuwafuwa2 {
  0% {
    transform: translateY(0) rotate(15deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
  100% {
    transform: translateY(0) rotate(-15deg);
  }
}

@keyframes fuwafuwa3 {
  0% {
    transform: translateY(0) rotate(-15deg);
  }
  50% {
    transform: translateY(20px) rotate(10deg);
  }
  100% {
    transform: translateY(0) rotate(15deg);
  }
}

@keyframes fuwafuwa4 {
  0% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(20px) rotate(15deg);
  }
  100% {
    transform: translateY(0) rotate(5deg);
  }
}


/*----------ふわふわ・PC---------*/
@media screen and (min-width:769px){
.fuwafuwa01, .fuwafuwa02, .fuwafuwa03, .fuwafuwa04{
  position: absolute; 
  display: inline-block;
  width: 160px;
  height: 160px;
  background-size: 92%;
}

.fuwafuwa01 {
  animation: fuwafuwa1 4s ease-in-out infinite alternate;
  background-image: url("images/top_icon01.png");
  background-repeat: no-repeat;
  background-position: center center;
  top: 26%; 
  left: 2%;
}

.fuwafuwa02 {
  animation: fuwafuwa2 3s ease-in-out infinite alternate;
  background-image: url("images/top_icon02.png");
  background-repeat: no-repeat;
  background-position: center center;
  top: 33%; 
  left: 17%; 
}

.fuwafuwa03 {
  animation: fuwafuwa3 3s ease-in-out infinite alternate;
  background-image: url("images/top_icon03.png");
  background-repeat: no-repeat;
  background-position: center center;
  top: 33%; 
  right: 17%; 
}

.fuwafuwa04 {
  animation: fuwafuwa4 4s ease-in-out infinite alternate;
  background-image: url("images/top_icon04.png");
  background-repeat: no-repeat;
  background-position: center center;
  top: 26%; 
  right: 2%;
}

@keyframes fuwafuwa1 {
  0% {
    transform: translateY(0) rotate(-20deg);
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
  }
  100% {
    transform: translateY(0) rotate(20deg);
  }
}

@keyframes fuwafuwa2 {
  0% {
    transform: translateY(0) rotate(15deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
  100% {
    transform: translateY(0) rotate(-15deg);
  }
}

@keyframes fuwafuwa3 {
  0% {
    transform: translateY(0) rotate(-15deg);
  }
  50% {
    transform: translateY(20px) rotate(10deg);
  }
  100% {
    transform: translateY(0) rotate(15deg);
  }
}

@keyframes fuwafuwa4 {
  0% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(20px) rotate(15deg);
  }
  100% {
    transform: translateY(0) rotate(5deg);
  }
}
}


/*----------スティッキーボタン・PC---------*/
@media screen and (min-width:769px){
.sticky-container{
display: none;
}

.btn_sticky img{
display: none;
}
}

/*----------スティッキーボタン・SP---------*/
.sticky-container {
margin: 0 auto;
}

.sticky-container.stopped {
  animation: none;
  position: absolute;
  bottom: auto;
  top: calc(100% - 80px);
}

.btn_sticky{
margin: 0 auto;
position: fixed;
bottom: 1px;
left: 0;
right: 0;
z-index: 9999;
width: 90%;
}

.btn_sticky img{
cursor: pointer;
max-width: 660px;
animation: yureru-j 3.8s infinite;
width: 100%;
}

@keyframes yureru-j {
  0%, 10%, 20%, 30% { transform: translate(0px, 2px); }
  5%, 15%, 25% { transform: translate(0px, -2px); }
}

.sticky-container[style*="display: none"] {
  display: none !important;
}


/*---------- footer----------*/
@media screen and (min-width: 769px){
#footer{
font-size: 12px;
}
}

#footer{
margin: 0;
padding: 30px 0;
font-size: 13px;
line-height: 180%;
color: #333;
text-align: center;
background: #fff;
}