@charset "utf-8";
/*全スタイル共通*/
li {list-style: none;}
a {text-decoration: none;border: none;color: #666;}
html {margin: 0;width: 100%;scroll-behavior: smooth;font-family: 'Noto Sans JP';color: #666;}
body {padding: 0;border: none;margin: 0 auto;color: #666;}
p {margin: 0;padding: 0;text-align: justify;}
button:focus {outline: none;}
*{width:100%;margin:0;padding:0;}

@keyframes scalein {
  0% {opacity: 0;}
  100% {opacity: 1;}}
@keyframes slideup {
  0% {transform: translateY(3%);opacity: 0;}
  50% {transform: translateY(0);opacity: 1;}}
@keyframes slideinleft {
  0% {transform: translateX(-3%);opacity: 0;}
  100% {transform: translateX(0);opacity: 1;}}
@keyframes pulse {
  0% {
    webkit-transform: scale(0.9);-ms-transform: scale(0.9);transform: scale(0.9);}
  50% {
    -webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
  100% {
    -webkit-transform: scale(0.9);-ms-transform: scale(0.9);transform: scale(0.9);}}
@keyframes bounce {
  0% {transform: scale(1.0);}
  10% {transform: scale(1.1);}
  20% {transform: scale(1.0);}
  30% {transform: scale(1.05);}
  40% {transform: scale(1.0);}}

.fadein{
  visibility: hidden;
  opacity:0;
  transition: 2.5s;
  transform: translateY(10%);}
.active{
  opacity:1;
  visibility: visible;
  transform: translateY(-10%);}
.fadeleft{
  opacity: 0;
  visibility: hidden;
  animation-delay: 1s;
  transition: 1s ease;
  transform: translateX(-8%);}
.move_left {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);}
.wrap{
  width:100%;
  display:block;
  margin:0 auto;}

#gradation{
background:linear-gradient(85deg, #8d80bb, #000000);
animation: gradient 10s ease infinite;
background-size: 200% 200%;
background-color: #fff;
position: fixed;
right:0;
left:0;
width:100%;
height:100%;
z-index:-5;}
@keyframes gradient {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  70% {background-position: 100% 40%;}
  100% {background-position: 0% 50%;}}

#entry .entry {
  position: fixed;
  margin:0 auto;
  z-index: 10000;
  bottom:1%;
  right: 0;
  left: 0;
  width: 90%;}

.entry {
  overflow:hidden;
  text-transform: none;
  margin: 0;
  padding: 0;
  max-width:320px;
  width:100%;
  border-radius: 5px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  padding-top: 4px;
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  position:relative;
  
  &.shiny:after{
    position:absolute;
    top:-200%;
    left:-150%;
    content:"";
    height:500%;
    width:70px;
    background:linear-gradient(90deg, rgba(255,255,255,0),rgba(255,255,255,0.6) 40%,rgba(255,255,255,0),rgba(255,255,255,0.6),rgba(255,255,255,0));
    transform: rotate(60deg);
    animation:3s shine infinite linear;
  }
}

@keyframes shine{
  0%{
    left:-100%;
  }
  80%{
    left:150%;
  }
  100%{
    left:150%;
  }
}


.is-hidden {
  visibility: hidden;
  transition: 0.5s ease;
  opacity: 0;}

.content{
  margin:-1px auto 0;}

/*mainview*/
.mainview_title {
  margin: -138% auto 0;
  width: 100%;
  -webkit-animation: slideinleft 1.5s ease-in-out 0s 1 forwards;
  animation: slideinleft 1.5s ease-in-out 0s 1 forwards;}
.mainview_title02 {
  opacity: 0;
  -webkit-animation: slideinleft 1.5s ease-in-out 0.5s 1 forwards;
  animation: slideinleft 1.5s ease-in-out 0.5s 1 forwards;}

.no1 {
  margin:40% auto 0;}
.no1_base {
  margin:-4px auto 0;}
.no1_medal {
  width:65%;
  display:block;
  margin:-135% auto 0}

.worries {
  margin:67% auto 0;}
.worries01, .worries02, .worries03{
  display:block;
  margin:-285% auto 0;}
.worries02 {
  margin:0 auto;}
.worries03 {
  margin:0 auto;}

.about {
  background-color: #fff;
  margin:7% auto -2%;}
.about_marcopolo {
  margin:25% auto 0;}
.sheet_back, .sheet_content_sm {
  background-color: #fff;}
.sheet_title {
  margin:-210% auto 0;}
.button01 {
  width: 60%;
  margin:-225% auto 0;}
.sheet_about {
  background-color: #fff;
  padding-bottom: 20px;
  margin:200% auto 0;}

.merit {
  background-color: #fff;
  margin:-16% auto -30%;}
.merit_back {
  background-color: #fff;}
.merit01 {
  margin:10% auto 0;}
.merit06 {
  background:linear-gradient(85deg, #8d80bb, #000000);
  animation: gradient 10s ease infinite;
  background-size: 130% 130%;
  margin:10% auto 0;}
.merit06 img {
  margin:20% auto 35%;}
.button02 {
  width: 50%;
  margin:-39% auto 0;}

.core_sm {
  margin:40% auto 0;
  background-color: #edf7fa;}
.core_title, .core_about {
  background-color: #edf7fa;}
.core_about {
  margin:25% auto 0;}
.core_merit {
  background-color: #fff;
  margin:-10% auto 0;}
.core_button {
  background-color: #fff;
  padding-top:15%;
  margin:-20% auto 0;}
.button03, .button04 {
  -webkit-animation: bounce 7s infinite ease-in-out;
  animation: bounce 7s infinite ease-in-out;
  width: 80%;}
.button03 {
  margin:0 auto;}
.button04 {
  margin:8% auto 0;
  padding-bottom:25%;}

.step_sm {
  background-color: #e9eff9;
  margin:-5% auto 0;}
.step01 {
  margin:25% auto 0;}
.button05 {
  -webkit-animation: bounce 7s infinite ease-in-out;
  animation: bounce 7s infinite ease-in-out;
  width: 80%;
  margin: 20px auto 0;
  padding-bottom: 90px;}

.voice_sm{
  margin:-1% auto 0;}
.voice01 {
  margin:-710% auto 0;}
.voice02, .voice03, .button06{
  margin:-1% auto 0;}
.button06 {
  -webkit-animation: bounce 7s infinite ease-in-out;
  animation: bounce 7s infinite ease-in-out;
  width:80%;
  margin:-3% auto 0;}

.cost_sm {
  background-color: #fff;
  margin:43% auto 0;}
.cost_title {
  margin:-16% auto 0;}
.cost01_content  {
  margin:20% auto 0;}
.cost02_content {
  margin:15% auto 0;}
.cost03_content {
  margin:-60% auto 0;}
.cost04_content {
  margin:-15% auto 15%;}
.button07 {
  width:80%;
  margin:-10px auto 0;
  padding-bottom:23%;}

#background{
  background:linear-gradient(85deg, #8d80bb, #000000);
  animation: gradient 10s ease infinite;
  background-size: 130% 130%;}
.qanda_title img {
  margin:20% auto 0;}

.qanda_content {
  padding-bottom:25%;
  width:90%;
  margin:-3% auto 0;}
.question{
  display: none;}
.question-label{
  color: #fff;
  margin:7% auto 0;
  display: block;}
.answer01, .answer02, .answer03{
  width:90%;
  height: 0;
  margin:0 auto;
  opacity: 0;
  padding: 0 10px;
  transition: .5s;
  color: #fff;
  visibility: hidden;}
.answer01 p, .answer02 p, .answer03 p {
  margin: 0;
  padding: 0;
  text-align: justify;
  line-height: 23px;
  letter-spacing: 2px;}
.question:checked + .question-label + .answer {
  display:block;
  height:220px;
  opacity: 1;
  margin: 0 auto;
  padding: 10px;
  visibility: visible;}
.question:checked + .question-label + .answer02 {
  height:160px;}

#form{
  padding-bottom:50px;
  background-color: #eeedf9;
  margin:40px auto 0px;}
.form_step {
  margin:30px auto 0;}
#form_content {
  width:90%;
  margin:2% auto 0;}
.form_iframe {
  height:1470px;}
.form_tel {
  margin:30px auto 0;}

footer {
  padding-bottom:20px;
  background-color: #5cc3ae;}
.logo {
  width: 70%;
  margin:0 auto;}
.logo img {
  margin:25% auto 0;}
.footer_content {
  margin:10% auto 0;
  width:70%;}
.footer_text {
  margin:5% auto;}
.copyright {
  margin:20% auto 5%;}
/*
  .mainview_sm, .mainview_tab, #entry, .no1_sm, .sheet_sm, .core_sm, .step_sm, .voice_sm, .cost_sm, .qanda_sm, .form_title, .form_step, .form_tel, .footer {
    display: none;}*/
    .mainview_tab, .mainview_pc, #entry_pc, .no1_pc, .sheet_pc, .core_pc, .step_pc, .voice_pc, .cost_pc, .qanda_title_pc, .question-label_pc, .qanda_pc, .form_title_pc, .form_step_pc, .form_tel_pc, .footer_pc {
    display:none;}

@media screen and (min-width: 350px){
  .answer01 p, .answer02 p, .answer03 p {
    font-size:14px;
    line-height: 25px;}
  .form_iframe {
    height:1350px;}
}

@media screen and (min-width: 400px){
  .answer01 p, .answer02 p, .answer03 p {
    font-size:16px;
    line-height: 27px;
    letter-spacing: 1px;}
  .form_iframe {
    height:1300px;}
}

@media screen and (min-width: 500px){
  .answer01 p, .answer02 p, .answer03 p {
    font-size:18px;
    line-height: 31px;}
  .copyright {
    margin:20% auto;}
  #form_content {
    width: 100%;}
  .form_iframe {
    height:1350px;}
}


@media screen and (min-width: 600px){
  .mainview_sm, .mainview_pc {
    display: none;}
  .mainview_tab {
    display:block;}
  #entry .entry {
    bottom: 3%;
    width:40%;}
  main{
    width:60%;
    margin:0 auto;}
  .mainview_title_tab {
    margin:-85% auto 0;
    width: 100%;
    -webkit-animation: slideinleft 1.5s ease-in-out 0s 1 forwards;
    animation: slideinleft 1.5s ease-in-out 0s 1 forwards;}
  .mainview_title02_tab {
    opacity: 0;
    -webkit-animation: slideinleft 1.5s ease-in-out 0.5s 1 forwards;
    animation: slideinleft 1.5s ease-in-out 0.5s 1 forwards;}
  .no1 {
    margin:1% auto 0;}
  .no1_medal {
    width:54%;
    margin: -124% auto 0;}
  .worries01 {
    margin:-280% auto 0;}
  .merit {
    margin:-10% auto -30%;}
  .button02{
    margin:-40% auto 0;}
  .step01 {
    margin:15% auto 0;}
  .voice {
    margin:-3px auto 0;}
  .answer01 p, .answer02 p, .answer03 p {
    font-size:20px;}
  .form_iframe {
    height:1200px;}
  #form_content {
  width:80%;}
  .logo, .footer_content {
    width: 40%;}
  footer {
    padding-top: 20px;
    padding-bottom: 40px;}
}
@media screen and (min-width: 700px){
  .form_iframe {
    height:1260px;}
}

@media screen and (min-width: 800px){
  .form_iframe {
    height:1250px;}
}

@media screen and (min-width: 1000px){
  .mainview_sm, .mainview_tab, #entry, .no1_sm, .sheet_sm, .core_sm, .step_sm, .voice_sm, .cost_sm, .qanda_sm, .form_title, .form_step, .form_tel, .footer {
    display: none;}
  .mainview_pc, #entry_pc, .no1_pc, .sheet_pc, .core_pc, .step_pc, .voice_pc, .cost_pc, .qanda_title_pc, .question-label_pc, .qanda_pc, .form_title_pc, .form_step_pc, .form_tel_pc, .footer_pc {
    display:block;}

  #entry_pc .entry_pc {
    position: fixed;
    margin: 0 auto;
    z-index: 10000;
    top: 0%;
    right: 3%;
    width:17%;}
	
	
.entry_pc {
  overflow:hidden;
  text-transform: none;
  margin: 0;
  padding: 0;
  max-width:320px;
  width:100%;
  border-radius: 5px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  padding-top: 4px;
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  position:relative;
  
  &.shiny:after{
    position:absolute;
    top:-200%;
    left:-150%;
    content:"";
    height:500%;
    width:70px;
    background:linear-gradient(90deg, rgba(255,255,255,0),rgba(255,255,255,0.6) 40%,rgba(255,255,255,0),rgba(255,255,255,0.6),rgba(255,255,255,0));
    transform: rotate(60deg);
    animation:3s shine infinite linear;
  }
}

@keyframes shine{
  0%{
    left:-100%;
  }
  80%{
    left:150%;
  }
  100%{
    left:150%;
  }
}



  main {
    background-color: #fff;
    margin:0 auto;
    width:50%;}
  .mainview_title_pc {
    margin:-46% auto 0;
    width: 100%;
    -webkit-animation: slideinleft 1.5s ease-in-out 0s 1 forwards;
    animation: slideinleft 1.5s ease-in-out 0s 1 forwards;}
  .mainview_title02_pc {
    margin: -9% auto 0;
    opacity: 0;
    -webkit-animation: slideinleft 1.5s ease-in-out 0.5s 1 forwards;
    animation: slideinleft 1.5s ease-in-out 0.5s 1 forwards;}

  .fadein{
    visibility: hidden;
    opacity:0;
    transition: 2s;
    transform: translateY(10%);}
  .active{
    opacity:1;
    visibility: visible;
    transform: translateY(0);}

  .no1_pc {
    margin:4% auto 0;}
  .no1_medal_pc {
    margin:-40% auto 0;}

  .worries_pc {
    margin:-1% auto 0;}
  .worries_content_pc {
    width: 92%;
    display: flex;
    margin:-42% auto 0;}

  .about_pc {
    margin:8% auto 0;}
  .about_marcopolo_pc {
    margin:1% auto 0;}
  .sheet_pc {
    margin:-8% auto 0;}

  .sheet_title_pc {
    margin:-80% auto 0;}
  .button01_pc {
    width:30%;
    margin:-105% auto 0;}
  .sheet_about_pc {
    margin:120% auto 0;}

  .merit_pc {
    margin:10% auto 0;}
  .merit01_pc {
    margin:0 auto;}
  .merit06_pc {
    background:linear-gradient(85deg, #8d80bb, #000000);
    animation: gradient 10s ease infinite;
    background-size: 130% 130%;
    margin:10% auto 0;}
  .merit06_pc img {
    margin:15% auto 25%;}
  .button02_pc {
    margin:-18% auto 0;
    width: 30%;}

  .core_pc {
    background-color: #edf7fa;
    margin:12% auto 0;}
  .core_about_pc {
    margin:-5% auto 0;}
  .core_merit_pc {
    background-color: #fff;
    margin:-1% auto 0;}
  .core_button_pc {
    padding-top:18%;
    margin: -10% auto 0;
    background-color: #fff;}
  .button03_pc, .button04_pc {
  -webkit-animation: bounce 7s infinite ease-in-out;
  animation: bounce 7s infinite ease-in-out;
  width: 50%;}
  .button03_pc {
    margin:-5% auto 0;}
  .button04_pc {
    margin:6% auto 0;
    padding-bottom:15%;}

  .step_pc {
    background-color: #e9eff9;}
  .step01_pc {
    margin:7% auto 0;}
  .button05_pc {
    -webkit-animation: bounce 7s infinite ease-in-out;
    animation: bounce 7s infinite ease-in-out;
    width:45%;
    padding-bottom: 15%;
    margin:7% auto 0;}

  .voice01_pc {
    margin:-365% auto 0;}
  .voice02_pc, .voice03_pc, .button06_pc {
    margin:4% auto 0;}
  .button06_pc {
    -webkit-animation: bounce 7s infinite ease-in-out;
    animation: bounce 7s infinite ease-in-out;
    width:50%;
    margin:10% auto 0;}

  .cost_pc {
    margin:12% auto 0;}
  .cost01_content_pc {
    margin:15% auto 0;}
  .cost02_content_pc {
    margin:8% auto 0;}
  .cost03_content_pc {
    margin:-10% auto 0;}
  .cost04_content_pc {
    margin:11% auto 0;}
  .button07_pc {
    -webkit-animation: bounce 7s infinite ease-in-out;
    animation: bounce 7s infinite ease-in-out;
    width:50%;
    margin:10% auto 15%;}

  #background_pc{
    background:linear-gradient(85deg, #8d80bb, #000000);
    animation: gradient 10s ease infinite;
    background-size: 130% 130%;}

  .qanda_title_pc img {
    margin:15% auto 0;}
  .qanda_content_pc{
    padding-bottom:20%;
    width:80%;
    margin:-1% auto 0;}
  .question_pc{
    display: none;}
  .question-label_pc{
    color: #fff;
    margin:7% auto 0;
    display: block;}
  .answer01_pc, .answer02_pc, .answer03_pc{
    width:90%;
    height: 0;
    margin:0 auto;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    color: #fff;
    visibility: hidden;}
  .answer01_pc p, .answer02_pc p, .answer03_pc p {
    margin: 0;
    padding: 0;
    text-align: justify;
    line-height: 23px;
    letter-spacing: 2px;}
  .question_pc:checked + .question-label_pc + .answer_pc {
    display:block;
    height:150px;
    opacity: 1;
    margin: 0 auto;
    padding: 10px;
    visibility: visible;}
  .question_pc:checked + .question-label_pc + .answer02_pc {
    height:100px;}

  .form_step_pc {
    width: 85%;
    display: flex;
    margin:8% auto 3%;}
  .form_tel_pc {
    margin: 13% auto 5%;
    width: 85%;}
  .form_iframe {
    height:1210px;}

  .footer_pc {
    margin:0 auto;
    width:50%;}
  .logo_pc {
    width:50%;
    margin:6% auto 10%;}
  .footer_content_pc {
    display: flex;
    width: 100%;
    margin: 0 auto;}
  .footer_text_pc {
    margin: 3% auto;}
  .copyright{
    width:60%;
    margin:14% auto;}
}

@media screen and (min-width: 1100px){
  .form_iframe {
    height:1300px;}
}
@media screen and (min-width: 1500px){
  main {
    width:850px;}

  .fadein{
    visibility: hidden;
    opacity:0;
    transition: 2.5s;
    transform: translateY(20px);}
  .active{
    opacity:1;
    visibility: visible;
    transform: translateY(-20px);}
  .fadeleft{
    opacity: 0;
    visibility: hidden;
    animation-delay: 1s;
    transition: 1s ease;
    transform: translateX(-20px);}
  .move_left {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);}

  #entry_pc .entry_pc {
    width:200px;}

  .mainview_base_pc {
    margin: 0 auto;}
  .mainview_title_pc {
    width: 1500px;
    position: relative;
    margin: 0 auto;
    height:0;
    top:-690px;}
  .mainview_title02_pc {
    width: 1500px;
    position: relative;
    margin: 0 auto;
    height:0;
    top:-120px;}

  .no1_pc {
    margin:-3px auto 0;}
  .no1_medal_pc {
    margin:-325px auto 0;}

  .worries_pc{
    margin:-25px auto 0;}
  .about_pc {
    margin: 70px auto 0;}
  .about_marcopolo_pc {
    margin: 1px auto 0;}

  .button01_pc {
    width: 250px;
    margin: -890px auto 0;}
  .sheet_title_pc {
    margin: -700px auto 0;}
  .sheet_about_pc {
    margin: 950px auto 0;}

  .merit_pc {
    margin: 40px auto 0;}
  .merit06_pc img {
    margin: 100px auto 200px;}
  .button02_pc {
    margin: -150px auto 0;
    width: 230px;}

  .core_pc {
    margin: 110px auto 0;}
  .core_about_pc {
    margin: -150px auto 0;}
  .core_merit_pc {
    margin: -10px auto 0;}
  .core_button_pc {
    padding-top: 50px;
    margin: -20px auto 0;}
  .button03_pc, .button04_pc {
    margin: -25px auto 0;
    width:300px;}
  .button04_pc {
    padding-bottom: 120px;
    margin:40px auto 0;}

  .step01_pc {
    margin: 70px auto 0;}
  .button05_pc {
    width: 320px;
    padding-bottom:150px;
    margin: 10px auto 0;}

  .voice01_pc {
    margin: -3130px auto 0;}
  .voice02_pc, .voice03_pc, .button06_pc {
    margin:10px auto 0;}
  .button06_pc {
    width: 300px;}

  .cost_pc {
    margin: 70px auto 0;}
  .cost01_content_pc {
    margin: 100px auto 0;}
  .cost02_content_pc {
    margin:40px auto 0;}
  .cost03_content_pc {
    margin: -130px auto 0;}
  .cost04_content_pc {
    margin: 50px auto 0;}
  .button07_pc {
    margin: 50px auto 90px;
    width:300px;}

  .qanda_title_pc img {
    margin: 115px auto 0;}
  .qanda_content_pc {
    padding-bottom: 150px;
    width: 600px;
    margin: 0px auto 0;}
  .answer01_pc p, .answer02_pc p, .answer03_pc p {
    font-size: 17px;
    line-height: 33px;}
  .question_pc:checked + .question-label_pc + .answer_pc {
    width:560px;
    padding: 20px;}

  .form_step_pc {
    width: 600px;
    margin:70px auto -10px;}
  .form_iframe {
    height: 1100px;}
  .form_tel_pc {
    margin: 60px auto 25px;
    width: 550px;}

  .logo_pc {
    width: 350px;
    margin: 80px auto 40px;}
  .footer_content_pc {
    width:600px;}
  .footer_text_pc {
    margin: 15px auto;}
  .copyright {
    width: 400px;
    margin: 70px auto;}
}