.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#contents .init {
position: relative;
-webkit-transform: translate(0px, 30px);
-moz-transform: translate(0px, 30px);
-ms-transform: translate(0px, 30px);
transform: translate(0px, 30px);
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
#contents .activeView {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all  1s ease;
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
#contents .none {
display: none;
}
#contents .hidden {
visibility: hidden;
}

/* CONTENTS */
html,body {
height: 100%;
}
.container {
}
#contents {}

#SCT1 {
position: relative;
background-color: #fff;
padding: 90px 0 60px 0;
width: 100%;
z-index: 1;
text-align: center;
}
@media (min-width: 751px) {
#SCT1 {
padding: 123px 0 105px 0;
}
}
#SCT1 div.image {
margin: 0 auto 42px auto;
width: 90%;
-moz-box-shadow: 2px 3px 5px rgba(0,0,0,0.35);
-webkit-box-shadow: 2px 3px 5px rgba(0,0,0,0.35);
box-shadow: 2px 3px 5px rgba(0,0,0,0.35);
}
@media (min-width: 751px) {
#SCT1 div.image {
margin: 0 auto 69px auto;
}
}
#SCT1 div.image img {
width: 100%;
height: auto;
display: block;
}
#SCT1 h3 {
margin-bottom: -6px;
font-size: 24px;
font-weight: 100;
color: #c00;
}
#SCT1 h2 {
margin-bottom: 28px;
font-size: 36px;
font-weight: 100;
}
@media (min-width: 751px) {
#SCT1 h3 {
margin-bottom: 2px;
font-size: 32px;
}
#SCT1 h2 {
margin-bottom: 41px;
font-size: 48px;
font-weight: 100;
}
}
#SCT1 ul {
margin: 35px 0 0 0;
padding: 0;
}
#SCT1 li {
margin: 0 9px;
display: inline;
}
#SCT1 li a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
background-color: #eee;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
width: 48px;
height: 48px;
font-size: 21px;
line-height: 49px;
display: inline-block;
color: #666;
overflow: hidden;
}
#SCT1 li.facebook a:hover {
background-color: #39579a;
color: #fff;
}
#SCT1 li.twitter a:hover {
background-color: #50aaf0;
color: #fff;
}

@media (min-width: 941px) {
#SCT1 .sns {
position: relative;
float: right;
}
#SCT1 ul {
position: absolute;
right: 60px;
bottom: 86px;
margin: 0 0 0 0;
}
#SCT1 li {
margin: 12px 0 0 0;
display: block;
}
#SCT1 li a {
display: block;
}
}
#SCT1 p {
margin: 0 30px;
font-size: 14px;
font-weight: 200;
line-height: 1.8;
text-align: left;
}
@media (min-width: 751px) {
#SCT1 p {
margin: 0 auto;
width: 605px;
font-size: 16px;
font-weight: 200;
line-height: 1.8;
text-align: left;
}
}
#SCT2 {
position: relative;
background-color: #fff;
width: 100%;
z-index: 1;
text-align: center;
}
#SCT2 .copy2 {
position: absolute;
right: 12px;
bottom: 12px;
font-size: 9px;
font-weight: 400;
line-height: 0;
}
#SCT2 .copy {
position: absolute;
left: 12px;
top: 12px;
font-size: 9px;
font-weight: 400;
line-height: 0;
}
#SCT2 .block {
position: relative;
background-color: #000;
width: 50%;
float: left;
cursor: pointer;
}
@media (min-width: 751px) {
#SCT2 .block {
width: 25%;
}
}
#SCT2 .block .image {
overflow: hidden;
}
#SCT2 .block .image img {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
width: 100%;
height: auto;
display: block;
}
#SCT2 .block.hover .image img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
}
#SCT2 .block .pack {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 200px;
display:table;
}
#SCT2 .block .pack p {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
-webkit-transform: translate(0px, 15px);
-moz-transform: translate(0px, 15px);
-ms-transform: translate(0px, 15px);
transform: translate(0px, 15px);
font-size: 12px;
font-weight: 300;
line-height: 1.5;
display: table-cell;
text-align: center;
vertical-align: middle;
color: #fff;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
@media (min-width: 941px) {
#SCT2 .block .pack p {
font-size: 14px;
}
}
@media (min-width: 1141px) {
#SCT2 .block .pack p {
font-size: 16px;
}
}
#SCT2 .block.hover .pack p {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
#SCT3 {
position: relative;
background-color: #fff;
width: 100%;
z-index: 1;
text-align: center;
}
#SCT3 .image {
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 320px;
overflow: hidden;
}
@media (min-width: 751px) {
#SCT3 .image {
width: 50%;
height: 640px;
}
}
#SCT3 .copy {
position: absolute;
right: 20px;
bottom: 20px;
font-size: 9px;
font-weight: 400;
line-height: 0;
}
#SCT3 .pack {
padding: 30px 0;
width: 100%;
display: block;
}
@media (min-width: 751px) {
#SCT3 .pack {
padding: 0;
width: 50%;
height: 640px;
display: table;
}
}
#SCT3 .pack div {
display: block;
}
@media (min-width: 751px) {
#SCT3 .pack div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
}
#SCT3 .pack p,
#SCT3 .pack h3 {
margin: 0 30px;
text-align: left;
}
@media (min-width: 751px) {
#SCT3 .pack p,
#SCT3 .pack h3 {
margin: 0 60px;
}
}
@media (min-width: 1121px) {
#SCT3 .pack p,
#SCT3 .pack h3 {
margin: 0 auto;
width: 440px;
}
}
#SCT3 .pack h3 {
margin-bottom: 16px;
font-size: 23px;
font-weight: 200;
line-height: 1.3;
}
@media (min-width: 1061px) {
#SCT3 .pack h3 {
margin-bottom: 33px;
font-size: 36px;
}
}
@media (min-width: 1201px) {
#SCT3 .pack h3 {
font-size: 40px;
}
}
#SCT3 .pack p {
font-size: 14px;
font-weight: 200;
line-height: 1.8;
}
@media (min-width: 1061px) {
#SCT3 .pack p {
font-size: 16px;
}
}
#S3_BLK3 .pack {
background-color: #f5f5f5;
}
#S3_BLK3 .image,
#S3_BLK2 .pack,
#S3_BLK1 .image {
float: right;
}
#S3_BLK3 .pack,
#S3_BLK2 .image,
#S3_BLK1 .pack {
float: left;
}
#S3_BLK3 .image {
background-position: center top;
}
#SCT4 {
position: relative;
background-color: #fff;
padding: 36px 0 0 0;
width: 100%;
z-index: 1;
text-align: center;
}
#SCT4 h2 {
margin-bottom: 22px;
font-size: 24px;
font-weight: 200;
}
@media (min-width: 751px) {
#SCT4 {
padding: 90px 0 0 0;
}
#SCT4 h2 {
margin-bottom: 64px;
font-size: 36px;
}
#SCT4 h2 br {
display: none;
}
}
#SCT4 form {
padding: 20px 30px 0 30px;
display: block;
}
@media (min-width: 751px) {
#SCT4 form {
padding: 33px 30px 0 30px;
}
}
#SCT4 .select {
margin: 0 auto;
width: 250px;
}
#SCT4 select {
padding: 0 48px 0 12px;
}
#SCT4 .customSelect {
background: url(../img/select_bg.png) no-repeat right center;
border: solid 1px #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
padding: 0 48px 0 12px;
width: 250px;
height: 34px;
font-size: 14px;
font-family: 'Noto Sans Japanese',sans-serif;
font-weight: 200;
line-height: 34px;
text-align: left;
display: block;
white-space: nowrap;
}
#SCT4 button {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
background-color: #cc0000;
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
padding: 0 12px;
margin: 24px 0 0 0;
width: 100%;
height: 50px;
font-family: 'Noto Sans Japanese',sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 50px;
color: #fff;
display: block;
cursor: pointer;
}
#SCT4 button.soldout:hover,
#SCT4 button.soldout {
background-color: #000;
color: #ccc;
}
#SCT4 button:hover {
background-color: #ff0000;
}
@media (min-width: 751px) {
#SCT4 button {
margin: 36px auto 0 auto;
width: 300px;
height: 60px;
line-height: 60px;
}
}
#SCT4 .soldoutBox {
padding: 75px 0 3px 0;
}
#SCT4 .soldoutBox h4 {
margin: 0 30px 20px 30px;
font-size: 20px;
color: #cc0000;
}
#SCT4 .soldoutBox p {
margin: 0 30px;
width: auto;
font-size: 12px;
line-height: 2.15;
text-align: left;
}
@media (min-width: 811px) {
#SCT4 .soldoutBox h4 {
margin: 0 30px 20px 30px;
font-size: 24px;
color: #cc0000;
}
#SCT4 .soldoutBox p {
margin: 0 auto;
width: 750px;
font-size: 14px;
}
}
#SCT4 .detail {
background-color: #eee;
margin-top: 50px;
padding: 30px 0 30px 0;
}
@media (min-width: 1041px) {
#SCT4 .detail {
background-color: #eee;
margin-top: 89px;
padding: 45px 0 51px 0;
}
}
#SCT4 .detail .cont {
margin: 0 auto;
padding: 0 30px;
text-align: left;
}
@media (min-width: 751px) {
#SCT4 .detail .cont {
margin: 0 auto;
text-align: left;
}
#SCT4 .detail .cont .div1 {
width: 50%;
float: left;
}
#SCT4 .detail .cont .div2 {
width: 50%;
float: right;
}
}
@media (min-width: 1041px) {
#SCT4 .detail .cont {
padding: 0;
width: 980px;
}
#SCT4 .detail .cont .div1 {
width: 490px;
}
#SCT4 .detail .cont .div2 {
width: 490px;
}
}
#SCT4 .detail .cont dl {
margin: 0;
padding: 0;
font-size: 12px;
font-weight: 200;
line-height: 1.8;
}
@media (min-width: 1041px) {
#SCT4 .detail .cont dl {
font-size: 14px;
line-height: 2.15;
}
}
#SCT4 .detail .cont dt {
float: left;
}
#SCT4 .detail .cont dt span {
margin-right: -1em;
letter-spacing: 1em;
}
#SCT4 .detail .cont dd {
margin-left: 4em;
}
#SCT4 .detail .cont a {
color: #c00;
text-decoration: none;
}
#SCT4 .detail .cont a:hover {
text-decoration: underline;
}
#SCT4 .frame {
position: relative;
padding: 80px 0;
display: none;
}
#SCT4 .frame p {
position: absolute;
right: 15px;
top: 16px;
cursor: pointer;
}
#SCT4 .frame p img {
width: 15px;
height: auto;
}
@media (min-width: 751px) {
#SCT4 .frame p {
right: 30px;
top: 32px;
}
#SCT4 .frame p img {
width: auto;
height: auto;
}
}
#SCT4 .frame div img {
margin: 0 auto;
width: 40%;
height: auto;
display: block;
}
.bx-wrapper {
position: relative;
margin: 0;
padding: 0;
*zoom: 1;
}
.bx-wrapper .block img {
margin: 0 auto;
width: 80%;
height: auto;
display: block;
-moz-box-shadow: 2px 3px 5px rgba(0,0,0,0.35);
-webkit-box-shadow: 2px 3px 5px rgba(0,0,0,0.35);
box-shadow: 2px 3px 5px rgba(0,0,0,0.35);
}
.bx-wrapper .block p {
margin: 76px 0 0 0;
font-size: 10px;
font-weight: 200;
}
.bx-wrapper .block p span {
zoom : 75%;
}
@media (min-width: 556px) {
.bx-wrapper .block p {
margin: 76px 30px 0 30px;
font-size: 12px;
}
.bx-wrapper .block p span {
zoom : 100%;
}
}
@media (min-width: 751px) {
.bx-wrapper .block p {
margin-top: 107px;
font-size: 16px;
}
}
@media (min-width: 876px) {
.bx-wrapper .block p {
font-size: 20px;
}
}
@media (max-width: 750px) {
#SCT4 .frame div img {
margin: 0 auto;
width: 80%;
height: auto;
display: block;
}
}
/* PAGER */
.pagerBox {
position: relative;
z-index: 100;
}
#bx-pager {
position: absolute;
left: 0;
top: -64px;
width: 100%;
}
@media (min-width: 751px) {
#bx-pager {
top: -82px;
}
}
#bx-pager a {
background-color: #fff;
border: solid 6px #fff;
box-sizing: border-box;
text-indent: -9999px;
display: inline-block;
width: 24px;
height: 24px;
margin: 0 6px;
outline: 0;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#bx-pager a.a1 {
background-color: #f5642e;
}
#bx-pager a.a2 {
background-color: #3e71e4;
}
#bx-pager a.a3 {
background-color: #43a359;
}
#bx-pager a.a4 {
background-color: #eeaabb;
}
#bx-pager a.a5 {
background-color: #d33857;
}
#bx-pager a.a6 {
background-color: #eedd44;
}
#bx-pager a.a7 {
background-color: #000000;
}

#bx-pager a:hover,
#bx-pager a.active {
background-color: #fff;
}
#bx-pager a.a1:hover,
#bx-pager a.a1.active {
border: solid 6px #f5642e;
}
#bx-pager a.a2:hover,
#bx-pager a.a2.active {
border: solid 6px #3e71e4;
}
#bx-pager a.a3:hover,
#bx-pager a.a3.active {
border: solid 6px #43a359;
}
#bx-pager a.a4:hover,
#bx-pager a.a4.active {
border: solid 6px #eeaabb;
}
#bx-pager a.a5:hover,
#bx-pager a.a5.active {
border: solid 6px #d33857;
}
#bx-pager a.a6:hover,
#bx-pager a.a6.active {
border: solid 6px #eedd44;
}
#bx-pager a.a7:hover,
#bx-pager a.a7.active {
border: solid 6px #000000;
}