@charset "utf-8";

html{
  overflow: auto;
}	
body {
  overflow: hidden;
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg);}
  100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
  0% {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.fadeIn{
  opacity: 0;
  transition: 0.6s;
}
.fadeIn_on {
  opacity: 1.0;
}
.fadeInTop {
  opacity: 0;
  transform: translate(0,40px); 
  -webkit-transform: translate(0,40px); 
  transition: .8s;
}
.fadeInTop_on {
  opacity: 1.0;
  transform: translate(0,0); 
  -webkit-transform: translate(0,0);
}
.fadeInBottom {
  opacity: 0;
  transform: translateY(-40px); 
  -webkit-transform: translateY(-40px); 
  transition: .6s;
}
.fadeInBottom_on {
  opacity: 1.0;
  transform: translateY(0); 
  -webkit-transform: translateY(0);
}
.fadeInRight {
  opacity: 0;
  transform: translate(60px,0); 
  -webkit-transform: translate(60px,0); 
  transition: .8s;
}
.fadeInRight_on {
  opacity: 1.0;
  transform: translate(0,0); 
  -webkit-transform: translate(0,0);
}
.fadeInLeft {
  opacity: 0;
  transform: translateX(-60px); 
  -webkit-transform: translateX(-60px); 
  transition: .8s;
}
.fadeInLeft_on {
  opacity: 1.0;
  transform: translateX(0); 
  -webkit-transform: translateX(0);
}

.zoom{
  opacity: 0;
  transform: scale(0.6, 0.6);
  -webkit-transform: scale(0.6, 0.6);
  transition: all 0.6s cubic-bezier(0.16, 1.84, 0.71, 1.01) 0.8s;
}
.zoom_on{
  opacity: 1.0;
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}
#nav_area ul li {
  opacity: 0;
  transform: scale(0.6, 0.6);
  -webkit-transform: scale(0.6, 0.6);
  transition: all 0.6s cubic-bezier(0.16, 1.84, 0.71, 1.01) 0.8s;
}
#nav_area ul li.showed {
  opacity: 1.0;
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}




/******************************
circle
******************************/

.load {
  width: 326px;
  height: 326px;
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  -ms-animation: spin 10s linear infinite;
  -o-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg);}
  100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
  0% {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
/******************************
loading
******************************/
html {
  width: 100%;
  height: 100%;
}
body.loading {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#loading {
  position: fixed;
  top: 50%;
  bottom: 0;
  left: 50%;
  right: 0;
  margin-left: -150px;
  margin-top: -150px;
  background-image: url(../img/tokucha_circle.svg);
  background-size: 100px 100px;
  background-position: center center;
  background-repeat: no-repeat;
}
#loading.load {
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -ms-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
body.load_complete #loading {
  display: none;
}
#suntory_contents {
  transition: opacity 0.5s;
}
body.loading #suntory_contents {
  opacity: 0;
}
body.load_complete #suntory_contents {
  opacity: 1;
}


a:hover img.bound {
  -webkit-animation: bound 0.5s linear 1;
  -moz-animation: bound 0.5s linear 1;
  -ms-animation: bound 0.5s linear 1;
  -o-animation: bound 0.5s linear 1;
  animation: bound 0.5s linear 1;
}
@-webkit-keyframes bound {
  0%   {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
  40%  {-webkit-transform: scale3d(1.06, 1.06, 1.06); transform: scale3d(1.06, 1.06, 1.06);}
  60%  {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
  85%  {-webkit-transform: scale3d(1.02, 1.02, 1.02); transform: scale3d(1.02, 1.02, 1.02);}
  100% {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
}
@-moz-keyframes bound {
  0%   {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
  40%  {-webkit-transform: scale3d(1.06, 1.06, 1.06); transform: scale3d(1.06, 1.06, 1.06);}
  60%  {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
  85%  {-webkit-transform: scale3d(1.02, 1.02, 1.02); transform: scale3d(1.02, 1.02, 1.02);}
  100% {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
}
@-ms-keyframes bound {
  0%   {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
  40%  {-webkit-transform: scale3d(1.06, 1.06, 1.06); transform: scale3d(1.06, 1.06, 1.06);}
  60%  {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
  85%  {-webkit-transform: scale3d(1.02, 1.02, 1.02); transform: scale3d(1.02, 1.02, 1.02);}
  100% {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
}
@-o-keyframes bound {
  0%   {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
  40%  {-webkit-transform: scale3d(1.06, 1.06, 1.06); transform: scale3d(1.06, 1.06, 1.06);}
  60%  {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
  85%  {-webkit-transform: scale3d(1.02, 1.02, 1.02); transform: scale3d(1.02, 1.02, 1.02);}
  100% {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
}
@keyframes bound {
  0%   {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
  40%  {-webkit-transform: scale3d(1.06, 1.06, 1.06); transform: scale3d(1.06, 1.06, 1.06);}
  60%  {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
  85%  {-webkit-transform: scale3d(1.02, 1.02, 1.02); transform: scale3d(1.02, 1.02, 1.02);}
  100% {-webkit-transform: scale3d(1.00, 1.00, 1.00); transform: scale3d(1.00, 1.00, 1.00);}
}