@charset "utf-8";
#container .accordion-menu { height: 600px; width: 100%; max-width: 1200px; margin: 0 auto 80px;}
#container .accordion-menu li { float: left; height: 100%; position: relative; background: #ddd;}
#container .accordion-menu li::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.8); z-index: 0; transition: all .5s;}
#container .accordion-menu li:hover::after,
#container .accordion-menu li.active::after { background: rgba(0,0,0,.5);}
#container .accordion-menu li >div { float: left; height: 100%;}
#container .accordion-menu li .accordion-title { width: 60px; height: 100%; position: relative; cursor: pointer; z-index: 10;}
#container .accordion-menu li .accordion-title img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#container .accordion-menu li .accordion-inner-wrap { width: 0; height: 100%; opacity: 0; pointer-events: none; transition: all .5s; position: relative;}
#container .accordion-menu li .accordion-inner-wrap .inner{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: calc(100% - 120px); text-align: center; z-index: 10;}
#container .accordion-menu li .accordion-inner-wrap p { color: #fff; margin-bottom: 30px; font-size: 21px; letter-spacing: .2em;}
#container .accordion-menu li .accordion-inner-wrap p.accordion-inner-title { margin-bottom: 30px;}
#container .accordion-menu li .accordion-inner-wrap p.accordion-inner-title img { height: 32px;}
#container .accordion-menu li .accordion-inner-wrap .detail-btn { display: block; color: #fff; border: #fff 1px solid; width: 100%; max-width: 160px; margin: 0 auto; padding: 10px 0; text-decoration: none;}

#container .accordion-menu li .accordion-inner-wrap .inner2 { position: absolute; bottom: -20px; right: 10px; /*transform: translate(-50%,-50%); width: calc(100% - 120px); text-align: center;*/ z-index: 10;}
#container .accordion-menu li .accordion-inner-wrap .inner2 .accordion-inner-caps { color: #fff; font-size: 12px; letter-spacing: .2em;}


@media screen and ( max-width: 767px) {
#container .accordion-menu { height: auto;}
#container .accordion-menu li,
#container .accordion-menu li >div { float: none;}
#container .accordion-menu li .accordion-title { width: 100%; height: 60px;}
#container .accordion-menu li .accordion-title img { width: auto; height: 32px;}
#container .accordion-menu li .accordion-inner-wrap { width: 100%; height: 0; opacity: 0;}
#container .accordion-menu li:first-child .accordion-inner-wrap { height: 300px; opacity: 1;} /
#container .accordion-menu li .accordion-inner-wrap p { font-size: 18px;}
#container .accordion-menu li .accordion-inner-wrap p.accordion-inner-title { display: none;}
}

#container .accordion-menu li:first-child { background: url("img/img00-top.jpg") bottom center; background-size: cover;}
#container .accordion-menu li:nth-child(2) { background: url("img/img01-top.jpg") bottom center; background-size: cover;}
#container .accordion-menu li:nth-child(3) { background: url("img/zeh_top.jpg") center center; background-size: cover;}
#container .accordion-menu li:nth-child(4) { background: url("img/access_top.jpg") center center; background-size: cover;}
#container .accordion-menu li:nth-child(5) { background: url("img/concierge-kv.jpg") center center; background-size: cover;}
#container .accordion-menu li:nth-child(6) { background: url("img/ginza-main04.jpg") center center; background-size: cover;}
#container .accordion-menu li:nth-child(7) { background: url("img/ginza-main.jpg") center center; background-size: cover;}
#container .accordion-menu li:nth-child(8) { background: url("img/img02-top.jpg") center center; background-size: cover;}