/*--▼1280px以上--*/
.ec {
background-size:cover;
background-position:center center; /*--横×縦の位置--*/
background-repeat:none;
/*border-bottom:1px dotted #ccc;*/
position:relative; /*追記 pankuzu基点*/
width:100%;
}

.ec-w960 {
width:98%;
padding:0 1%;
max-width:1200px;
height:280px; /*280px*/
margin:auto;
position:relative;
display: flex; /*v-align-center*/
align-items: center; /*v-align-center*/
}
/*--▼1280px以下--*/
@media only screen and (max-width:1280px) {
.ec-w960 {
width:96%;
height:280px;
padding:0 2%;
}
}
/*--▼640px以下--*/
@media only screen and (max-width:640px) {
.ec-w960 {
height:240px;
}
}

/*--▼背景dot--*/
.bg-screen {
z-index:1;
background:url(../img/bg-dot-b.png);
}

/*--▼title--*/
h1.ttl-2 {
position:relative;
z-index:3;
display:inline-block;
width:100%;
font-size:2.7em;
text-align:left;
text-shadow:#000 1px 1px 7px, #000 -1px 1px 7px, #000 1px -1px 7px, #000 -1px -1px 7px;
font-family: 'Noto Serif JP', serif;
line-height:1.2em;
border-bottom: 1px solid #fff;
padding:0 0 9px 50px;
}
@media only screen and (max-width:640px) {
h1.ttl-2 {
font-size:1.5em;
text-align:center;
border-bottom: 2px solid #fff;
padding:0 ;
}
}

/*--▼title-sub-ウィスキーアーカイブなど--*/
.ttl-sub{
font-size:0.5em;
font-weight:bold;
color:#dcd3b2;
text-shadow:none;
padding:4px 8px 4px 8px;
margin:0 0 8px 0;
background : rgba(0,0,0, 0.5);
display:inline-block;
}
@media only screen and (max-width:640px) {
.ttl-sub {border-bottom:1px solid #dcd3b2;}
}

/*--▼装飾image--*/
h1.ttl-2:before {
content: "";
position: absolute;
z-index:2;
width:140px;
height:140px;
top:50%;
left:-5px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background:url(../img/bg-matsu-ttl.png) no-repeat center / auto 100%;
}
/*--640以下--*/
@media only screen and (max-width:640px) {
h1.ttl-2:before {
content: "";
position: absolute;
z-index:-1;
width:100px;
height:100px;
top:50%;
left:-5px;
background:url(../img/bg-matsu-ttl.png) no-repeat center / auto 100%;
}
}

/*--告知BOX--*/
.pr-box a{
position: absolute;
z-index:22;
right:0%;
bottom:-10px;
display-inline;
padding:6px 8px;
/*width:200px;*/
/*height:auto;*/
/*min-height:40px;*/
text-align:center;
background : rgba(255,255,255, 0.9);
border:2px solid #b79b5b;
color:#b79b5b;
line-height:1.0em;
border-radius:4px;
/*overflow;hidden;*/
}
.pr-box a:hover{
background:rgba(255,255,255, 0.7);
border:2px solid #b79b5b;
color:#b79b5b;
}
@media only screen and (max-width:640px) {
.pr-box a{
padding:6px 8px;
bottom:-8px;
font-size:0.6em;
}
}

/*--▼装飾icon-告知boxと同じ基点--*/
/*.pr-box img{
/*position:absolute;
z-index:21;
right:-0%;
bottom:-12px;
width:block;
height:50px;
}
@media only screen and (max-width:640px) {
.pr-box img{
z-index:23;
bottom:-12px;
height:70px;
}
}*/



/*--▼pankuzu--*/
.pankuzu {
position: absolute;
bottom:0;
left:1%;
width:100%;
max-width:1200px;
margin:0 auto;
padding:0;
/*border-top: 2px dotted #fff;*/
}



/*--▼回転とzoom effect--*/
.rotate img {overflow:hidden;}
.rotate {
-webkit-transition: 1.0s ease; transition: 1.0s ease; /*--rotateとzoom共通--*/
}
.rotate :hover{
-webkit-transform: rotate(360deg); transform: rotate(360deg);
}
.rotate-y :hover{
-webkit-transform:rotatey(360deg); transform:rotatey(360deg);
}
.rotate-y img, .rotate img{
-webkit-transition: 1.0s ease; transition: 1.0s ease;
}
.zoom-2 img{
-webkit-transition: 0.2s ease; transition: 0.2s ease; /*--rotateとzoom共通--*/
}
.zoom-2 :hover{
-webkit-transform:scale(1.2); transform:scale(1.2);
}
.scale_up img {
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
transition: transform 0.5s linear;
}
.scale_up img:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
/*回転とzoom effect*/

/*--figure {width:100%; height:auto; margin:0; padding:0; background:#fff; overflow:hidden;}--*/
/*--figure:hover+span {bottom:-0px; opacity:1;}--*/

/*ec-css animation (prefixes are cut)*/
.appear {transform-origin:center top; animation:show 0.5s both;}
span.appear {display:inline-block;}
.d1 {animation-delay:0.5s;}
.d2 {animation-delay:2.0s;}
.d3 {animation-delay:2.5s;}
@keyframes show {
0% {transform:translate(0,2em); opacity:0; text-shadow:0 0 1.0em #fff;}
50% {text-shadow:0 0 3.0em #fff;}
100% {transform:translate(0,0); opacity:1;}
}
/*ec-css animation (prefixes are cut)*/

/*effect*/
.delighter.splash {transition: all 2s ease-out;}
.delighter.splash.ended {background: #fff;}

.delighter.right {transform:translate(-100%); opacity:0; transition: all .50s ease-out; }
.delighter.right.started { transform:none; opacity:1; }

.delighter.left {transform:translate(100%); opacity:0; transition: all .50s ease-out; }
.delighter.left.started {transform:none; opacity:1; }

.delighter.bottom { transform:translatey(300%); opacity:0; transition: all .75s ease-out; }
.delighter.bottom.started { transform:none; opacity:1; }

.delighter div {opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started div{ opacity: 1; transform: none; }
.delighter.started div:nth-child(1) {transition: all .7s ease-out .5s;}
.delighter.started div:nth-child(2) {transition: all .7s ease-out .7s;}
.delighter.started div:nth-child(3) {transition: all .7s ease-out .9s;}
.delighter.started div:nth-child(4) {transition: all .7s ease-out .11s;}

.delighter li { opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started li{opacity: 1; transform: none; }
.delighter.started li:nth-child(1) {transition: all .7s ease-out .1s;}
.delighter.started li:nth-child(2) {transition: all .7s ease-out .2s;}
.delighter.started li:nth-child(3) {transition: all .7s ease-out .3s;}
.delighter.started li:nth-child(4) {transition: all .7s ease-out .4s;}

.delighter p {opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started p{ opacity: 1; transform: none; }
.delighter.started p:nth-child(1) {transition: all .7s ease-out .2s;}
.delighter.started p:nth-child(2) {transition: all .7s ease-out .3s;}
.delighter.started p:nth-child(3) {transition: all .7s ease-out .4s;}
.delighter.started p:nth-child(4) {transition: all .7s ease-out .5s;}

.delighter pre {
display: block;
transition: all 2s ease-out;
opacity: 0;
padding: 20px 0;
width: 1px; overflow: hidden;
}
.delighter.started pre {max-width: 99999px; width: 100%; opacity: 1;}
.delighter .box { transition: all 1s ease-out; }
.delighter .box:nth-child(1) { transform: translate(-100%, 0); }
.delighter .box:nth-child(2) { transform: translate(170%, -70%); }
.delighter .box:nth-child(3) { transform: translate(20%, 0%); }

.delighter.started .box:nth-child(1) { transform: translate(0, 0); }
.delighter.started .box:nth-child(2) { transform: translate(70%, -70%); }
.delighter.started .box:nth-child(3) { transform: translate(20%, -120%); }