@charset "UTF-8";

@media screen and (max-width: 970px) {
/*  -----------  media Midium  ----------  */
div.editorialInPageNavigation .c_046 .docked-nav-wrapper.nav-static {
padding: 0 0;
}
/*--------------------------------------------------------*/
}

#blk-ehon-top {
position: relative;
box-sizing: border-box;
}
#blk-ehon-top > .inner {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 5% 0 0 0;
}
#blk-ehon-top h1 {
margin: 0 0 0.416666% 0;
padding: 0;
}
#blk-ehon-top h1 > img {
width: 50%;
margin: 0 auto;
padding: 0;
}

#box-ehon {
position: relative;
width: 100%;
padding: 0 0 46.875% 0; /*  450/960  */
background-image: url(../IMAGES/bg_ehon_bg.png);
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
}

#box-ehon #ehon-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}

#box-ehon #ehon-bg .item {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;	
opacity: 0;
}
#box-ehon #ehon-bg .item.current {
opacity: 1;
transition: opacity 0.3s;
}
#box-ehon #ehon-bg .item span {
position: absolute;
display: block;
left: 0;
top: 0;
}

/* Cubic Bezier
easeOutSine: cubic-bezier(0.39,0.575,0.565,1)
easeOutQuart:cubic-bezier(0.165,0.84,0.44,1)
easeExpo:    cubic-bezier(0.19,1,0.22,1)
easeOutBack: cubic-bezier(0.68,-0.55,0.265,1.55)
*/
#box-ehon #ehon-bg .item span.pos-L img,
#box-ehon #ehon-bg .item span.pos-R img {
transition: transform 1s cubic-bezier(0.19,1,0.22,1);
}
#box-ehon #ehon-bg .item span.pos-L img {
transform: translate(-30px,0);
}
#box-ehon #ehon-bg .item span.pos-R img {
transform: translate(30px,0);
}
#box-ehon #ehon-bg .item.current span.pos-L img,
#box-ehon #ehon-bg .item.current span.pos-R img {
transform: translate(0,0);
}




#box-ehon #ehon-bg .item.item-01 .item-01-01 {
/*  w:64 l:9  t:16 */
width: 6.6666%;
margin: 1.6666% 0 0 0.9375%;
}
#box-ehon #ehon-bg .item.item-01 .item-01-02 {
/*  w:102 l:859  t:18 */
width: 10.6250%;
margin: 1.875% 0 0 89.4791%;
}
#box-ehon #ehon-bg .item.item-01 .item-01-03 {
/*  w:75 l:24  t:330 */
width: 7.8125%;
margin: 36.375% 0 0 2.5%;
}
#box-ehon #ehon-bg .item.item-01 .item-01-04 {
/*  w:48 l:886  t:336 */
width: 5.0000%;
margin: 35.0000% 0 0 92.2916%;
}

#box-ehon #ehon-bg .item.item-02 .item-02-01 {
/*  w:35 l:911  t:149 */
width: 3.6458%;
margin: 15.5208% 0 0 94.8958%;
}
#box-ehon #ehon-bg .item.item-02 .item-02-02 {
/*  w:87 l:-11  t:301 */
width: 9.0625%;
margin: 31.3541% 0 0 -1.1458%;
}
#box-ehon #ehon-bg .item.item-02 .item-02-03 {
/*  w:90 l:877  t:320 */
width: 9.375%;
margin: 34.3333% 0 0 91.3541%;
}

#box-ehon #ehon-bg .item.item-03 .item-03-01 {
/*  w:75 l:-19  t:55 */
width: 7.8125%;
margin: 5.7291% 0 0 -1.9791%;
}
#box-ehon #ehon-bg .item.item-03 .item-03-02 {
/*  w:40 l:904  t:67 */
width: 4.16666%;
margin: 6.9791% 0 0 94.1666%;
}
#box-ehon #ehon-bg .item.item-03 .item-03-03 {
/*  w:58 l:901  t:196 */
width: 6.0416%;
margin: 20.4166% 0 0 93.8541%;
}
#box-ehon #ehon-bg .item.item-03 .item-03-04 {
/*  w:87 l:12  t:346 */
width: 9.0625%;
margin: 38.0416% 0 0 1.2500%;
}
#box-ehon #ehon-bg .item.item-03 .item-03-05 {
/*  w:66 l:889  t:321 */
width: 6.8750%;
margin: 33.7375% 0 0 92.6041%;
}

#box-ehon #ehon-items {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#box-ehon #ehon-items .item-box {
position: relative;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
}

#box-ehon #ehon-items .item {
position: relative;
display: block;
width: 27.29166%; /* 262/960 */
margin: 2.916666% 1.25% 0 1.25%; /* 28/960  12/960  */
background-image: none;
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
}
#box-ehon #ehon-items .item.item-01 {z-index: 3;}
#box-ehon #ehon-items .item.item-02 {z-index: 2;}
#box-ehon #ehon-items .item.item-03 {z-index: 1;}

#box-ehon #ehon-items .item a {
position: relative;
display: block;
width: 100%;
}
#box-ehon #ehon-items .item img {
display: block;
width: 100%;
height: auto;
}
#box-ehon #ehon-items .item img.item-chara {
position: absolute;
left: 0;
top: 0;
}
#box-ehon #ehon-items .item a .item-hkds {
/*  w:172  l: 207 t:76*/
display: block;
position: absolute;
left: 0;
top: 0;
width: 65.648%;/* 172/262 */
margin: 29.0076% 0 0 79.0076%;
opacity: 0;
}
#box-ehon #ehon-items .item a:hover .item-hkds {
opacity: 1;
transition: opacity 0.3s;
}


@media screen and (min-width: 580px) {
#box-ehon #ehon-items .item a .item-hkds img {
animation-duration: 0s;
}
#box-ehon #ehon-items .item a:hover .item-hkds img {
animation-name: elastic-scale;
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(0.39,0.575,0.565,1);
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
}
	
@media screen and (max-width: 581px) {
/*  -----------  media Small  ----------  */

#blk-ehon-top > .inner {
padding: 6.6666% 0 0 0;
}
#blk-ehon-top h1 > img {
width: 86.666666%;
}
#box-ehon {
position: relative;
width: 100%;
padding: 0 0 0 0;
background-image: none;
}	
#box-ehon #ehon-bg {
display: none;
}
#box-ehon #ehon-items {
position: relative;
left: auto;
top: auto;
height: auto;
}
#box-ehon #ehon-items .item-box {
display: block;
height: auto;
}
#box-ehon #ehon-items .item {
width: 100%;
margin: 6.6666% 0 0 0;
}
#box-ehon #ehon-items .item.item-01 { background-image: url(../IMAGES/bg_ehon_bg_sp01.png); }
#box-ehon #ehon-items .item.item-02 { background-image: url(../IMAGES/bg_ehon_bg_sp02.png); }
#box-ehon #ehon-items .item.item-03 { background-image: url(../IMAGES/bg_ehon_bg_sp03.png); }
	
	
#box-ehon #ehon-items .item a {
width: 54.93333%;
margin: 0 auto;
}
	
#box-ehon #ehon-items .item a .item-hkds {
display: block;
/*  w:258  l: 330 t:159*/
width: 62.6213%;/* 258/412 */
margin: 37.5922% 0 0 76.0097%;
opacity: 1;
}
/*  -----------  media Small  ----------  */
}