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

body {
    margin: 0;
}
img {
    width: 100%;
    max-width: 1080px;
    vertical-align:middle;    
}
.img-box {
    text-align:center;
    margin: 0 auto;    
    max-width: 1080px;    
}

.btn_position {
    display: block;
    position: relative;
}
.btn_position a{
    position: absolute;
    transform: translate(-50%,-50%);
    display: block;
    box-sizing: border-box;
    transition: .3s;
    text-decoration: none;
    box-shadow: 9px 10px rgba(35, 24, 21, .75);    
}
.btn_position a:hover{
    transform: translate(-50%,-45%);
    box-shadow:none;
}
.btn01 a {
    left: 40%;
    top: 77%;
    width: 69%;
}
.btn02{
    padding: 10% 0px 11%;
}
.btn02 a{
    left: 50%;
    width: 70%;
}
.btn03 a{
    left: 50%;
    top: 64%;
    width: 70%;
}
.qr-code {
    position: absolute;
    transform: translate(-50%,-50%);
    display: block;
    left: 50%;
    top: 52%;
    width: 22%;
}
@media screen and (min-width: 1080px) {
.btn02{
    padding: 95px 0px 105px;
}
}
@media screen and (max-width: 750px) {
.btn_position a{
    box-shadow: 4px 5px rgba(35, 24, 21, .75);    
}
}

.btnshine{
	position: relative;
	display:inline-block;
    color: #fff;
    text-decoration: none;
    outline: none;
    overflow: hidden;
}

.btnshine::before {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
    width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);


	animation: shine 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;        

}

.btnshine::before {
}

@keyframes shine {
	0% {
		left: -75%;
	}
    85% {
		left: -75%;
	}
	100% {
		left: 125%;
	}
}

@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}

.shiny-btn {
    position: relative;
    display: block;
    width: 100%;
    text-decoration: none;
    color: #ffffff;
    background-color: #384878;
    overflow: hidden;
}

.shiny-btn::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 40px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}