@charset "utf-8";
/*---------------------------------
	Reset
---------------------------------*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1.5;
}
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
img,
a img {
  border: none;
  vertical-align: top;
}
input,
select {
  vertical-align: middle;
}
a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
iframe {
  border: 0;
}
button {
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  appearance: none;
  cursor: pointer;
}
/*---------------------------------
	common
---------------------------------*/
body {
  position: relative;
  width: 100%;
  /*
	background: url(../img/bg_header_left.png) no-repeat left top,url(../img/bg_header_right.png) no-repeat right top,url(../img/bg_footer_left.png) no-repeat left bottom,url(../img/bg_footer_right.png) no-repeat right bottom,url(../img/bg.jpg) repeat center top #a0a0a0;
	*/
  background: url(../img/bg_header_left.png) no-repeat left top,
    url(../img/bg_header_right.png) no-repeat right top,
    url(../img/bg.jpg) repeat center top #a0a0a0;
  background-size: auto, auto, auto 100%;
  color: #fff;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ,
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  font-size: 0.9rem;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
#wrapper {
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-flow: column;
}
/*---------------------------------
	header
---------------------------------*/
header {
  width: calc(100% - 1054px);
  height: 75px;
  margin: 0 auto;
  box-sizing: border-box;
  background: url(../img/bg_header_mid.png) repeat-x center top;
  text-align: center;
}
h1 {
  position: absolute;
  top: 16px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
h1 img {
  width: 106px;
}
.cloud li {
  position: absolute;
  z-index: -200;
}
.cloud li.c_01 {
  top: 600px;
  right: -5px;
  animation: c_01 35s linear infinite;
  -webkit-animation: c_01 35s linear infinite;
  -ms-animation: c_01 35s linear infinite;
}
.cloud li.c_02 {
  top: 985px;
  right: 17px;
  animation: c_02 35s linear infinite;
  -webkit-animation: c_02 35s linear infinite;
  -ms-animation: c_02 35s linear infinite;
}
.cloud li.c_03 {
  top: 781px;
  left: -66px;
  animation: c_03 35s linear infinite;
  -webkit-animation: c_03 35s linear infinite;
  -ms-animation: c_03 35s linear infinite;
}
.cloud li.c_04 {
  top: 234px;
  right: -110px;
  animation: c_04 35s linear infinite;
  -webkit-animation: c_04 35s linear infinite;
  -ms-animation: c_04 35s linear infinite;
}
.cloud li.c_05 {
  top: 370px;
  left: -130px;
  animation: c_05 35s linear infinite;
  -webkit-animation: c_05 35s linear infinite;
  -ms-animation: c_05 35s linear infinite;
}
@keyframes c_01 {
  0% {
    right: -5px;
  }
  30% {
    right: -427px;
  }
  30.01% {
    right: 100%;
  }
  100% {
    right: -5px;
  }
}
@keyframes c_02 {
  0% {
    right: 17px;
  }
  20% {
    right: -433px;
  }
  20.01% {
    right: 100%;
  }
  100% {
    right: 17px;
  }
}
@keyframes c_03 {
  0% {
    left: -66px;
  }
  80% {
    left: 100%;
  }
  80.01% {
    left: -440px;
  }
  100% {
    left: -66px;
  }
}
@keyframes c_04 {
  0% {
    right: -110px;
  }
  20% {
    right: -550px;
  }
  20.01% {
    right: 100%;
  }
  100% {
    right: -110px;
  }
}
@keyframes c_05 {
  0% {
    left: -130px;
  }
  80% {
    left: 100%;
  }
  80.01% {
    left: -530px;
  }
  100% {
    left: -130px;
  }
}
/*---------------------------------
	section
---------------------------------*/
section#contents {
  min-height: 1000px;
  flex: 1;
  display: flex;
  align-items: center;
}
/*---------------------------------
	slider
---------------------------------*/
div.slider {
  margin: 30px auto 0 auto;
  position: relative;
  width: 100vw;
  min-height: 1000px;
}
div.slider .arrow {
  position: absolute;
  top: calc(50% - 46.5px);
  width: 70px;
  height: 93px;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 1000;
}
div.slider .arrow.left {
  left: calc(50% - 400px);
}
div.slider .arrow.right {
  right: calc(50% - 380px);
  transform: scaleX(-1);
}
div.slider .arrow:hover {
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s, transform 0.3s;
}
div.slider .arrow.left:hover {
  transform: translateX(-10px);
}
div.slider .arrow.right:hover {
  transform: translateX(10px) scaleX(-1);
}
div.slider ul.list {
  position: relative;
  min-height: 1000px;
  width: 100vw;
  top: 50%;
  left: calc(50% - 320px);
}
div.slider ul.list li {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  position: absolute;
}
div.slider ul.list li img {
  width: 100%;
  height: auto;
}
div.slider ul.list li.left {
  transform: translate3d(-390px, 273px, 0);
  width: 300px;
  z-index: 0;
}
div.slider ul.list li.center {
  transform: translate3d(0, 0, 0);
  width: 620px;
  z-index: 100;
}
div.slider ul.list li.right {
  transform: translate3d(710px, 273px, 0);
  width: 300px;
  z-index: -1;
}
div.slider ul.list li.transition {
  transition: width 0.5s, transform 0.5s, z-index 0.5s;
}

/*---------------------------------
	card-layout
---------------------------------*/
div.card {
  width: 620px;
  height: 920px;
  cursor: default;
  overflow: hidden;
  position: absolute;
  top: calc(50% - 489px);
  left: calc(50% - 320px);
  z-index: 1000;
}
div.card .front {
  display: block;
  position: relative;
  width: 620px;
  height: 920px;
  overflow: hidden;
}
div.card li {
  display: none;
  position: absolute;
}
div.card li img {
  width: 100%;
  height: auto;
}
div.card li.card_bg {
  display: block;
  width: 100%;
}
div.card li.domitore {
  display: block;
  top: 155px;
  right: 0px;
}
.animate div.card li.domitore img {
  animation: domitore 0.1s linear infinite;
  -webkit-animation: domitore 0.1s linear infinite;
  -ms-animation: domitore 0.1s linear infinite;
}
div.card li.airou {
  display: block;
  top: 240px;
  right: 250px;
}
.animate div.card li.airou img {
  animation: airou 3s ease-in-out infinite;
  -webkit-animation: airou 3s ease-in-out infinite;
  -ms-animation: airou 3s ease-in-out infinite;
}
div.card li.ena {
  display: block;
  top: 230px;
  right: 110px;
}
div.card li.honda {
  display: block;
  top: 155px;
  left: 116px;
}
.animate div.card li.honda img {
  animation: honda 3s ease-in-out infinite;
  -webkit-animation: honda 3s ease-in-out infinite;
  -ms-animation: honda 3s ease-in-out infinite;
  transform-origin: 50% 50% 0;
}
div.card li.ryunosuke {
  display: block;
  top: 278px;
  right: 70px;
}
.animate div.card li.ryunosuke img {
  animation: ryunosuke 3s ease-in-out infinite;
  -webkit-animation: ryunosuke 3s ease-in-out infinite;
  -ms-animation: ryunosuke 3s ease-in-out infinite;
}
div.card li.mochi {
  display: block;
  top: 145px;
  left: 160px;
}
.animate div.card li.mochi {
  animation: mochi 3s ease-in-out infinite;
  -webkit-animation: mochi 3s ease-in-out infinite;
  -ms-animation: mochi 3s ease-in-out infinite;
}
div.card li.garuku {
  display: block;
  top: 410px;
  left: 40px;
}
.animate div.card li.garuku {
  animation: garuku 2s ease infinite;
  -webkit-animation: garuku 2s ease infinite;
  -ms-animation: garuku 2s ease infinite;
}
div.card li.card_front {
  display: block;
  top: 0;
  left: 0;
}
div.card li.card_text {
  display: block;
  bottom: 0;
  left: 0;
}
div.card li.zeni {
  display: block;
  bottom: 250px;
  left: 190px;
}
.animate div.card li.zeni {
  animation: zeni 2.7s ease-in infinite;
  -webkit-animation: zeni 2.7s ease-in infinite;
  -ms-animation: zeni 2.7s ease-in infinite;
}
div.card li.green {
  display: block;
  top: -1600px;
  left: 50px;
  background: url(../img/green.png) repeat-y;
  background-size: 100%;
  transition: top 0.5s;
}
.animate div.card li.green {
  animation: confetti_green 30s linear infinite;
  -webkit-animation: confetti_green 30s linear infinite;
  -ms-animation: confetti_green 30s linear infinite;
}
div.card li.yellow {
  display: block;
  top: -1400px;
  left: 40px;
  background: url(../img/yellow.png) repeat-y;
  background-size: 100%;
  transition: top 0.5s;
}
.animate div.card li.yellow {
  animation: confetti_yellow 25s linear infinite;
  -webkit-animation: confetti_yellow 25s linear infinite;
  -ms-animation: confetti_yellow 25s linear infinite;
}
div.card li.white {
  display: block;
  top: -350px;
  left: 18px;
  background: url(../img/white.png) repeat-y;
  background-size: 100%;
  transition: top 0.5s;
}
.animate div.card li.white {
  animation: confetti_white 20s linear infinite;
  -webkit-animation: confetti_white 20s linear infinite;
  -ms-animation: confetti_white 20s linear infinite;
}
div.card li.green img,
div.card li.yellow img,
div.card li.white img {
  opacity: 0;
}

/*---------------------------------
	move
---------------------------------*/
@keyframes confetti_green {
  0% {
    top: -1600px;
  }
  100% {
    top: -363px;
  }
}
@keyframes confetti_yellow {
  0% {
    top: -1400px;
  }
  100% {
    top: -246px;
  }
}
@keyframes confetti_white {
  0% {
    top: -350px;
  }
  100% {
    top: 83px;
  }
}
@keyframes domitore {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes airou {
  0% {
    transform: translate(0, 0) rotate(-40deg);
  }
  3% {
    transform: translate(0, 0) rotate(-40deg);
  }
  25% {
    transform: translate(40px, -25px) rotate(-20deg);
  }
  50% {
    transform: translate(80px, 0) rotate(0deg);
  }
  56% {
    transform: translate(80px, 0) rotate(0deg);
  }
  75% {
    transform: translate(40px, -25px) rotate(-20deg);
  }
  97% {
    transform: translate(0, 0) rotate(-40deg);
  }
  100% {
    transform: translate(0, 0) rotate(-40deg);
  }
}
@keyframes honda {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  80% {
    transform: translate(-30px, -10px) rotate(-10deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes ryunosuke {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  80% {
    transform: translate(35px, -13px) rotate(10deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes mochi {
  0% {
    transform: scaleX(1);
  }
  80% {
    transform: scaleX(1.3) rotate(-4.25deg) translate(0, -10px);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes garuku {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-10px);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
  40% {
    transform: translateY(0);
  }
  55% {
    transform: translateY(0);
  }
  70% {
    transform: translate(5px, -70px);
  }
  90% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes zeni {
  0% {
    transform: translate(0);
  }
  15% {
    transform: translate(5px, -5px);
  }
  50% {
    transform: translate(15px, 60px);
  }
  70% {
    transform: translate(0px, 65px);
    opacity: 1;
  }
  80% {
    transform: translate(5px, 70px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*---------------------------------
	bnrArea
---------------------------------*/
#bnrArea {
  position: relative;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10;
}
#bnrArea ul {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
}
#bnrArea ul li {
  margin: 0 10px;
}
#bnrArea ul li a {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: opacity 0.3s;
}
#bnrArea ul li a:hover {
  opacity: 0.8;
}
#bnrArea ul li img {
  width: 100%;
}
/*---------------------------------
	footer
---------------------------------*/
footer {
  position: relative;
  width: 100%;
  height: 40px;
  margin: 0 auto;
  box-sizing: border-box;
  border-top: 8px solid #710511;
  background: #7b0413;
  text-align: center;
}
footer p {
  /*display: none;*/
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 100%;
  color: #fff;
  font-size: 10px;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}