@charset "UTF-8";
/*
 Theme Name:   coupon
*/
/* reset
------------------------------ */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, sub, sup, i, small, address, time, fieldset, form, label, legend, hr, table, caption, tbody, tfoot, thead, tr, th, td, header, footer, nav, section, article, aside, figure, figcaption, canvas, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
}
ul, ol, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}
/* common
------------------------------ */
body {
  font: 13px/1.6em Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", meiryo, sans-serif;
  font-feature-settings: "palt";
  background-color: #f7e055;
  -webkit-font-smoothing: antialiased;
}
main {
  display: block;
	margin-bottom: 25vw;
}
section {
}
h1 {
	padding: 10px;
	background-color: #fff;
}
h1 img{
	width: 70%;
}
h2 {
	font-size: 1.5em;
	color: #fff;
  margin-bottom: 4vw;
}
h3 {
  font-size: 1.2em;
  margin-bottom: 1vw;
}
.forPC {
  display: none !important;
}
.inner {
  width: 100%;
  padding: 0 4%;
  box-sizing: border-box;
  margin: 0 auto;
}
.fadeIn {
  -webkit-transform: translateY(5vw);
  transform: translateY(5vw);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  opacity: 0;
}
.fadeIn.view {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
}
.btn a {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
  width: 90%;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 6px;
  margin: 0 auto;
  text-align: center;
}
.btn.blue a {
  background-color: #6babde;
  border: solid 3px #0071bc;
}
.btn.red a {
  background-color: #dd8373;
  border: solid 3px #d0543e;
}
.btn-area .btn a {
  width: 100%;
}

.btn.orange {
  width: 98.5% !important;
}
.btn.orange a{
  margin-top: 10px;
  background-color: #f7931e;
  border: solid 3px #e86400;
}
.btn-area .btn {
  display: inline-block;
  width: 48.5%;
  margin: 0 0.5%;
}
.mb10 {
  margin-bottom: 3%;
}
.mb30 {
  margin-bottom: 6%;
}
.mb50 {
  margin-bottom: 8%;
}
.mb70 {
  margin-bottom: 12%;
}
.tR {
  text-align: right;
}
.tC {
  text-align: center;
}/* header
------------------------------ */
header {
  background: url("../img/bg_header.jpg") no-repeat top center/cover;
}
header #logo {
  width: 96%;
  margin: 0 auto;
  padding-top: 7vw;
}
/* main
------------------------------ */
#main .btn a{
	font-size: 1em;
        line-height: 1.4em;
        padding: 12px 0;
}
#beginning {
	padding: 10vw 0;
  background-color: #6babde;
}
#already {
	padding: 10vw 0;
  background-color: #dd8373;
}
#beginning .inner,#already .inner{
	width: 92%;
        padding: 8vw 4%;
        background-color: #fff;
        border-radius: 10px;
}
#beginning .inner .btn,#already .inner .btn{
	animation: yoko 2s infinite;
}
@keyframes yoko {
    0% {
        transform: translate(4px, 0px);
    }
    5% {
        transform: translate(-4px, 0px);
    }
    10% {
        transform: translate(4px, 0px);
    }
    15% {
        transform: translate(-4px, 0px);
    }
    20% {
        transform: translate(4px, 0px);
    }
    25% {
        transform: translate(-4px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}
#beginning .inner .btn a,#already .inner .btn a{
	background-color: #29abe2;
}
/* footer
------------------------------ */
footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
  padding: 5vw 0 4vw;
  background-color: #fff;
}
footer .inner .btn{
	animation: dokun 1s ease infinite;
}
@keyframes dokun {
  0%  { transform: scale(1); }
  15% { transform: scale(1.02); }
  30% { transform: scale(1); }
  45% { transform: scale(1.02); }
  70% { transform: scale(1); }
}
footer .inner .btn a {
	width: 96%;
	background-color: #07b53b;
}
footer .inner .btn a img {
  width: 22px;
        margin: 0.3vw 6px 0 0;
}