html {
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Open Sans', sans-serif;
}

a,a:hover {
    text-decoration: none;
    color: #333;
}
/* header */
.header {
    z-index: 1;
    vertical-align: center;
}
.logo {
    margin-right: 1rem;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 340px;
}
.nav-btn {
    background-color: #06c755;
    min-width: 180px;
    text-align: center;
    padding: 1rem 2rem;
    color: #fff;
    display: inline-block;
    border-radius: 9999px;
    font-weight: bold;
    border: 2px solid #fff;
    transition: .3s ease-in-out;
}
.nav-btn:hover {
    background-color: #fff;
    border: 2px solid #06c755;
    color: #06c755;
    text-decoration: none;
    transition: .3s ease-in-out;
}
@media screen and (max-width: 768px) {
    .logo {
        max-width: 150px;
    }
    .nav-btn {
        max-width: 150px;
        min-width: 120px;
        padding: 1rem .5rem;
    }
}

/* FV */
.fv {
    width: 100%;
}
.fv-image-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80%;
    height: 80%;
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: absolute;
	opacity:0;
}
.fv-image {
    background-image: url(../img/fv_img01.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    width: 100%;
    height: 100%;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
    height: 100%;
    width: 100%;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 0, 165, 1), rgba(191, 233, 255, 1));
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

.fv-copy {
    position: absolute;
    bottom: 10%;
    right: -20%;
}
@media screen and (max-width: 768px) {
    .fv-image-wrap {
        width: 100%;
        height: 100%;
    }
    .fv-image {
        background-image: url(../img/fv_sp.jpg);
        background-position: 0% 0%;
        width: 100%;
        height: 100%;
    }    
    .fv-copy {
        width: 90%;
        left: 1rem;
        bottom: 1rem;
    }
}

/* section */

.section_header {
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 3rem;
}
.section_header span {
    display: inline-block;
    text-align: center;
    padding: 0.5rem 1.5rem;
    color: #ffff;
    background-image: linear-gradient(45deg, rgba(255, 0, 165, 1), rgba(191, 233, 255, 1));
}
.section_header h2 {
    font-weight: bold;
}

.subtitle {
    width: 100%;
}
.subtitle span {
    display: inline-block;
    text-align: center;
    padding: 0.2rem 1rem;
    color: #ffff;
    background-image: linear-gradient(45deg, rgba(255, 0, 165, 1), rgba(191, 233, 255, 1));
}

.qr img {
 width: 100%;
 max-width: 700px;
}

/* footer */
.footer {
    background-image: linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%);
    color: #fff;
}

/* utility */
.rounded {
    border-radius: 1em;
}
.tx-c {
    text-align: center;
}
.ov-h {
    overflow: hidden;
}

.pt-1 {
    padding-top: 1rem !important;
}
.pt-2 {
    padding-top: 2rem !important;
}
.pt-3 {
    padding-top: 3rem !important;
}
.pt-4 {
    padding-top: 4rem !important;
}
.pt-5 {
    padding-top: 5rem !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}
.pb-1 {
    padding-bottom: 1rem !important;
}
.pb-2 {
    padding-bottom: 2rem !important;
}
.pb-3 {
    padding-bottom: 3rem !important;
}
.pb-4 {
    padding-bottom: 4rem !important;
}
.pb-5 {
    padding-bottom: 5rem !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}