@charset "utf-8";

/*---------------------------------------*/
/* アニメーション */
/*---------------------------------------*/
.anime.slide{
position:relative;
}
/* スライドインコンテンツ */
.slideIn{
position:relative;
padding:0;
}
.slideIn:after{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:#fff;
z-index:100;
display:inline-block;
opacity:1;
content:"";
padding-left:20px;
transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
}
.slideIn.left:after{
left:0;
}
.slideIn.animation:after{
width:0 !important;
padding:0;
}
.slideIn:before{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:#f8f6f4;
z-index:100;
display:inline-block;
opacity:1;
content:"";
padding-left:20px;
transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;
}
.slideIn.left:before{
left:0;
}
.slideIn.yello:before{
background:#ffff00;
}
.slideIn.animation:before{
width:0;
padding:0;
}
/* フェードイン */
.fadeIn{
opacity:0;
transition: all 0.8s ease 0.5s;
}
.animation.fadeIn{
opacity:1;
}
.animation.fadeIn.delay01{
transition: all 1s ease 0.6s;
}
.animation.fadeIn.delay02{
transition: all 1s ease 0.7s;
}
.animation.fadeIn.delay03{
transition: all 1s ease 0.8s;
}
.animation.fadeIn.late{
transition: all 0.5s ease 1.5s;
}
#topArea .animation.fadeIn.late{
transition: all 0.5s cubic-bezier(.43,.45,0,.92)  1s;
}
#topArea .animation.fadeIn.late.delay01{
transition: all 1s cubic-bezier(.43,.45,0,.92)  1.8s;
}
#topArea .animation.fadeIn.late.delay02{
transition: all 1s cubic-bezier(.43,.45,0,.92)  2s;
}
.fadeIn.left{
transform: translate(-50px,0);
}
.animation.fadeIn.left{
transform: translate(0,0);
}
.fadeIn.right{
transform: translate(50px,0);
}
.animation.fadeIn.right{
transform: translate(0,0);
}
.fadeIn.top{
transform: translate(0,-50px);
}
.animation.fadeIn.top{
transform: translate(0,0);
}
.fadeIn.bottom{
transform: translate(0,50px);
}
.animation.fadeIn.bottom{
transform: translate(0,0);
}
.fadeIn.top-left{
transform: translate(-50px,-50px);
}
.animation.fadeIn.top-left{
transform: translate(0,0);
}
.fadeIn.top-right{
transform: translate(50px,-50px);
}
.animation.fadeIn.top-right{
transform: translate(0,0);
}
.fadeIn.bottom-left{
transform: translate(-50px,50px);
}
.animation.fadeIn.bottom-left{
transform: translate(0,0);
}
.fadeIn.bottom-right{
transform: translate(50px,50px);
}
.animation.fadeIn.bottom-right{
transform: translate(0,0);
}
/* フラフィー */
.fluffyOuter .fluffy {
  animation: fluffy 3s ease infinite;
}
@keyframes fluffy {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}
/* バウンド */
.bound{
opacity:0;
transition: all  0.15s ease 1s;
}
.bound.boundanimation{
opacity:1;
animation-name: bound; 
animation-duration: 0.2s; 
animation-timing-function: ease;
animation-delay:1s;
animation-iteration-count: 1;
}
@keyframes bound{
0% {
transform:scale(0.0,0.0);
}
33% {
transform:scale(1.6,1.6);
}
66% {
transform:scale(0.8,0.8);
}
100% {
transform:scale(1.0,1.0);
}
}
/* ズーム */
.anime.zoom{
position:relative;
transform:scale(0.0,0.0);
transition: all  0.35s ease;
}
.anime.zoom.animation{
transform:scale(1.0,1.0);
}
/* スタンプ */
.stamp{
opacity:0;
transition: all  0.15s ease 1s;
}
.stamp.animation{
opacity:1;
animation-name: stamp; 
animation-duration: 0.2s; 
animation-timing-function: ease;
animation-delay:1s;
animation-iteration-count: 1;
}

@keyframes stamp {
0% {
transform: scale(10.0,10.0);
}
70% {
transform:scale(0.6,0.6);
}
100% {
transform:scale(1.0,1.0);
}
}
/* スイング */
.swing.anime{
opacity:0;	
transition: all  0.15s ease 1s;
}
.swing.animation{
transform-origin:top center;
animation-name:swing;
animation-duration: 1s; 
animation-timing-function: ease;
animation-delay:1.1s;
animation-iteration-count: 1;
opacity:1;
}
@keyframes swing{
0%{
transform:rotate3d(0,0,0,0deg);
}
20%{
transform:rotate3d(0,0,1,15deg);
}
40%{
transform:rotate3d(0,0,1,-10deg);
}
60%{
transform:rotate3d(0,0,1,5deg);
}
80%{
transform:rotate3d(0,0,1,-5deg);
}
100%{
transform:rotate3d(0,0,1,0deg);
}
}
/* ふわふわ動き */
.move01,
.move02,
.move03,
.move04,
.move05{
animation: horizontal 2s ease-in-out infinite alternate;
}
@media only screen and (max-width: 767px) {
.move01,
.move02,
.move03,
.move04,
.move05{
animation: horizontal-s 2s ease-in-out infinite alternate;
}
}
.move01__inner,
.move02__inner,
.move03__inner,
.move04__inner,
.move05__inner{
animation: vertical 3s ease-in-out infinite alternate;
}
@media only screen and (max-width: 767px) {
.move01__inner,
.move02__inner,
.move03__inner,
.move04__inner,
.move05__inner{
animation: vertical-s 3s ease-in-out infinite alternate;
}
}
.move01{ animation-duration: 1.1s}
.move02{ animation-duration: 1.3s}
.move03{ animation-duration: 1.5s}
.move04{ animation-duration: 1.7s}
.move05{ animation-duration: 1.9s}
@keyframes horizontal {
0% { transform:translateX( -15px); }
100% { transform:translateX(  0px); }
}
@keyframes vertical {
0% { transform:translateY(-10px); }
100% { transform:translateY(  0px); }
}
@keyframes horizontal-s {
0% { transform:translateX( -7px); }
100% { transform:translateX(  0px); }
}
@keyframes vertical-s {
0% { transform:translateY(-5px); }
100% { transform:translateY(  0px); }
}
.bounce{
animation: bounce 0.5s infinite cubic-bezier(0.165, 0.84, 0.44, 1) alternate;
}
@keyframes bounce{
0%{
transform:translateY(0px);
}
100%{
transform:translateY(-10px);
}
}
.rotationY{
animation:rotationY 1s infinite ease-in-out alternate;
}
@keyframes rotationY{
0%{
transform:rotateY(0deg);
}
100%{
transform:rotateY(360deg);
}
}
/* ハンバーガーメニュー */
.accordionClose,
.accordionCopy,
.accordionInfo,
.accordionLinks,
.accordionBtn,
 .accordionMenu li.fadeIn{
opacity:0;
transform: translate(50vw,0);
}
.animation .accordionClose,
.animation .accordionCopy,
.animation .accordionInfo,
.animation .accordionLinks,
.animation .accordionBtn,
.animation .accordionMenu li.fadeIn{
opacity:1;
transform: translate(0,0);
}
 .accordionMenu li:first-child{
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.15s;
}
 .accordionMenu li:nth-child(2){
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.2s;
}
 .accordionMenu li:nth-child(3){
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.25s;
}
 .accordionMenu li:nth-child(4){
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.3s;
}
 .accordionMenu li:nth-child(5){
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.35s;
}
 .accordionMenu li:nth-child(6){
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.4s;
}
 .accordionMenu li:nth-child(7){
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.45s;
}
.accordionBtn.reservation{
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.5s;
}
.accordionBtn.catalog{
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.55s;
}
.accordionInfo{
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.6s;
}
.accordionLinks{
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.65s;
}
.accordionCopy{
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.7s;
}
.accordionClose{
transition: all 0.3s cubic-bezier(.43,.45,0,.92) 0.75s;
}