html{
    scroll-behavior: smooth;
}
body{
    font-family:'メイリオ', 'Meiryo', sans-serif;
    background: #f1f1f1;
    margin:0;
    padding:0;
}
.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
margin:0 auto;
    vertical-align:bottom;
}
div:after,
ul:after {
 content: "";
display: block;
 clear: both;
}

ul{
 list-style: none;
 margin: 0px;
 padding: 0px;
}

a img {
    transition: opacity 0.1s linear;
}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
.pc{display: block;}
.sp{display: none;}
@media only screen and (max-width: 750px) {
.pc{display: none;}
.sp{display: block;}
}


/*all*/

.all{
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    text-align: center;
}

header{
    text-align: left;
}

/*section*/

section{
    max-width:1200px;
    margin:0 auto;
}
section p{
    margin:0;
    position: relative;
    z-index: 10;
}

/*fv*/
.fv{
    max-width:1200px;
    margin:0 auto;
    text-align: center;
}

/*greenbelt*/
.greenbelt::before{
    content: "";  
    display: block;
    background-color: #22b173;
    width:100%;
    height:75px;
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
}
@media only screen and (max-width: 750px) {
    .greenbelt::before{
        display: none;
    }
}

/*point*/

.point{
    margin:0 auto;
    position: relative;
}
.point p{
    position: relative;
    z-index: 10;
}



/*overview*/
.overview{
    position: relative;
    padding:0 0 50px;
    background-color: #fffaeb;
}
@media only screen and (max-width: 750px) {
    .overview{
        padding:0 0 8vw;
    }
}

/*app*/

.app{
    position: relative;
    padding:0 0 50px;
}
@media only screen and (max-width: 750px) {
    .app{
        padding:0 0 8vw;
    }
}

/*faq*/
.faq{
    position: relative;
    background-color: #fffaeb;
    padding:0 0 50px;
}
@media only screen and (max-width: 750px) {
    .faq{
        padding:0 0 8vw;
    }
}



/*accordion*/
.accordion-item {
  max-width: 100%;
  cursor: pointer;
    max-width: 750px;
    margin: 0 auto 20px;
}
.accordion-btn {
  position: relative;
  line-height: 0;
}

.btn-img {
  transition: opacity 0.4s ease;
}
.btn-close {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; 
  z-index: 1;
}
.btn-open {
  position: relative;
  z-index: 2;
}
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease, opacity 0.4s;
  opacity: 0;
  overflow: hidden;
}
.content-inner {
  min-height: 0;
}
.accordion-item.is-open .btn-open {
  opacity: 0;
}
.accordion-item.is-open .btn-close {
  opacity: 1;
}
.accordion-item.is-open .accordion-content {
  grid-template-rows: 1fr;
  opacity: 1;
}



/*share*/
#share{
    position: relative;
}
#share ul{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
}
@media only screen and (max-width: 750px) {

    #share ul{
        width:44vw;
        gap: 2.67vw;
        top: 20vw;
    }
}

/*footer*/
footer{
    padding:0 0 134px;
}
footer p{
    margin:0;
}
footer .tellink{
    pointer-events: none;
}
@media only screen and (min-width: 751px) {
    footer p.belt img{
        margin:0;
        height: 126px;
        width: 100%;
        object-fit: fill;
    }
}
@media only screen and (max-width: 750px) {
    footer{
        padding:0 0 18vw;
    }
    footer .tellink{
        pointer-events: auto;
    }
}

/*fixedBtn*/

.chase_link{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index:9999;
}
.chase_link_btn{
    display: flex;
    background-color:#fff;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
    max-width:1200px;
    margin:0 auto;
}
.chase_link_btn a{
    display: block;
    text-align: center;
    width:100%;
    background: #f9db35;
    padding:10px;
    /*background: linear-gradient(to right,  #ee872e 0%,#ea6b2d 100%); */
}