@charset "utf-8";

html {overflow: auto;scroll-behavior: smooth;}
body{
font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, "sans-serif";
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.05em;
color: #333;
overflow: hidden;
}
/*-------------------- img */
img{ display: block; width: 100%;}
a img:hover{transform: scale(110%);transition: .2s;}
@media(max-width:780px){a img:hover{opacity: 1;}}/* @media */

/*-------------------- a */
a:link   {color: #000;text-decoration: none; transition: ease .3s all;}
a:visited{color: #000;}a:hover  {opacity: 07;}a:active {color: #ccc;}

/*-------------------- PC-SP */
.pc{ display: block !important;}@media(max-width:540px){.pc{ display: none !important;}}
.sp{ display: none !important;}@media(max-width :540px){.sp{ display: block !important;}}

/*-------------------- font */
.min {
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.t_600{
  font-weight: 600;
}
.t_700 {
  font-weight: 700;
}
.t_800 {
  font-weight: 800;
}
.t_red{
  color: #ff6666;
}
.t_orange{
  color: #ffaa45;
}
.t_yellow{
  color: #fff3c5;
}
.t_white{
  color: #fff !important;
}
.t_blue{
  color: #37a6b6;
}
.t_green{
  color: #5cc4cd;
}
.t_08 {
  font-size: .8em;
  line-height: 1.6;
}
.t_12 {
  font-size: 1.2em;
  line-height: 1.6;
}
.t_14 {
  font-size: 1.4em;
  line-height: 1.6;
}
.t_16 {
  font-size: 1.6em;
  line-height: 1.6;
}
.t_18 {
  font-size: 1.8em;
  line-height: 1.6;
}
.t_20 {
  font-size: 2em;
  line-height: 1.6;
}
.note {
  font-size: 0.65em;
}
.t_italic {
  font-style: italic;
}
h2 {
  padding: .3em 0;
  margin: 0 auto .8em;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  position: relative;
}
h3 {
  padding: .3em 0;
  margin: 0 auto .8em;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.4;
  position: relative;
}
h4 {
  padding: .3em 0;
  margin: 0 auto .8em;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
}
.ac {
  text-align: center;
}
.al {
  text-align: left;
}
.ar {
  text-align: right;
}

/*-------------------- cta */
#mv, #cta1, #cta2, #cta3, #cta4 {
  position: relative;
}
#mv .btn, #cta1 .btn, #cta2 .btn, #cta3 .btn, #cta4 .btn {
  width: 70%;
  position: absolute;
  bottom: 300px;
  left: 50%;
  transform: translate(-50%, 0);
}
#cta1 .btn, #cta2 .btn, #cta3 .btn {
  bottom: 130px;
}
#cta4 .btn {
  bottom: 80px;
}

/*-------------------- cta */
.cta {
  position: relative;
  padding: 3vw 0;
}
.btn {
  width: 80%;
  margin: 0 auto;
}
.btn img {
  animation: anime1 0.5s ease 0s infinite alternate;
  transform-origin:center;
}
@keyframes anime1 {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}

/*-------------------- contents */

.frame {
  width: 750px;
  margin: 0 auto;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media(max-width :780px){.flex{ flex-direction: column !important;}}


footer {
  padding: 1em 0 .5em;
}
footer a {
  color: #333 !important;
  text-decoration: underline !important;
}
footer .copy p {
  margin: 0 auto;
  font-size: .8em;
}


@media screen and (max-width: 1400px) {

}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 780px) {
  .frame {
    width: 100%;
  }
}

@media screen and (max-width: 540px) {
  #mv .btn, #cta1 .btn, #cta2 .btn, #cta3 .btn, #cta4 .btn {
    width: 90%;
    margin: 0 auto;
    bottom: 39.5vw;
  }
  #cta1 .btn, #cta2 .btn, #cta3 .btn {
    bottom: 14.5vw;
  }
  #cta4 {
    position: relative;
  }
  #cta4 .btn {
    bottom: 10vw;
  }
  footer {
    font-size: 2.8vw;
  }
}