@charset "utf-8";

body { min-width:980px; }

/* WRAP */
#wrap { width:980px; }

/* HEADER */
#header { width:980px; height:40px; }
#header > div { float:left; }
#header > div img { width:auto; height:32px; }
#header ul { width:auto; float:right; }
#header ul li { margin:0 0 0 15px; float:right; }
/* HEADER */

/* MAINIMAGE */
#mainImage { width:980px; height:360px; }
#mainImage img { width:auto; height:360px; }
/* MAINIMAGE */

/* CONTAINER */
#container { width:980px; background:url(../../../../img/images/project/chabo_magical60s_tour/bg.png) no-repeat right bottom; }
#content { width:650px; float:left; }

/* TOPBOX */
#topBox > p { margin:0 0 20px; text-align:right; }
#topBox > p:first-of-type { font-size:1.8rem; font-weight:bold; overflow:hidden; }
#topBox > p:first-of-type a { display:block; margin:20px auto 0; width:auto; text-align:center; }
#topBox > p:first-of-type a img { width:auto; height:24px; }
#topBox > p:first-of-type span { font-weight:normal; font-size:1.4rem; display: inline-block; width: 100%; text-align:center; }
#topBox > p:nth-of-type(2) { text-align:center; }
#topBox > p:last-of-type { font-size:2.2rem; }
#topBox > p:last-of-type time { padding:4px 16px; }
#topBox > p:last-of-type time span { font-size:3.2rem; }
#topBox > p:nth-of-type(2) a img { width:auto; height:40px; }
#topBox > p:nth-of-type(2) a:first-of-type img { height:80px; }
#topBox span.centerbnr { display: block; font-size: 1.6rem; font-weight: bold; }
#topBox img.centerbnr { margin: 20px 0px; width: 100%; }
/* TOPBOX */

/* LISTBOX */
#listBox div.item > h1 { margin:0; padding:0 40px; font-size:2.2rem; border-bottom:1px solid #1C542C; background-image:url(../../../../img/images/project/chabo_magical60s_tour/mark_interfm.png), url(../../../../img/images/project/chabo_magical60s_tour/icon_open.png); background-repeat:no-repeat; background-position:0 50%, right 50%; background-size:auto 30px, auto 23px; }
#listBox div.item > h1.opened { background-image:url(../../../../img/images/project/chabo_magical60s_tour/mark_interfm.png), url(../../../../img/images/project/chabo_magical60s_tour/icon_close.png); }
#listBox > article:first-of-type div.item > h1 { background:url(../../../../img/images/project/chabo_magical60s_tour/mark_interfm.png) no-repeat 0 50% / auto 30px; cursor:auto; }
#listBox div.item div.playList > h2 { margin:0 0 15px; font-size:1.8rem; }
#listBox div.item div.playList > p { padding:0 40px; }
/* songData */
#listBox div.item div.playList ul.songData { margin:0 0 30px; }
#listBox div.item div.playList ul.songData li { padding:25px 30px; }
#listBox div.item div.playList ul.songData li article > div > div.image { width:120px; height:120px; background:#FFF; margin:0; float:left; position: relative;}
#listBox div.item div.playList ul.songData li article > div > div.image img {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
#listBox div.item div.playList ul.songData li article > div img { width:120px; }
#listBox div.item div.playList ul.songData li article > div > h1 { margin:0 0 5px 140px; padding:0; font-size:2.4rem; }
#listBox div.item div.playList ul.songData li article > div > h1 + p { margin:0 0 15px 140px; }
#listBox div.item div.playList ul.songData li article > div > p + p { margin:0 0 0 140px; }
#listBox div.item div.playList ul.songData li article > p { margin:0; }
/* LISTBOX */

/* SIDEBAR */
#sidebar { width:280px; float:right; }
/* SIDEBAR */

/* CONTAINER */

/* FOOTER */
#footer { width:980px; }
#footer p img { width:auto; height:45px; }
/* FOOTER */

#modalOverlay { display:none; width:100%; height:120%; background-color:rgba(0,0,0,0.75); position:fixed; top:0; left:0; z-index:100; }
#listBox div.item div.playList ul.songData li article > div > div.modalImageBox { display:none; margin:0; padding:27px 0 12px; width:500px; border:3px solid #BBB; border-radius:3px; background:#FFF; position:fixed; z-index:150; }
#listBox div.item div.playList ul.songData li article > div > div.modalImageBox p { text-align:center; margin:0; line-height:1.5; }
#listBox div.item div.playList ul.songData li article > div > div.modalImageBox p img { width:90%; }
#listBox div.item div.playList ul.songData li article > div > div.modalImageBox p.song { margin-top:10px; font-size:1.6rem; color:#555; }
#listBox div.item div.playList ul.songData li article > div > div.modalImageBox p.artist { padding:0 0 5px; font-size:1.4rem; color:#1C542C; }
#listBox div.item div.playList ul.songData li article > div > div.modalImageBox p.modalClose { font-size:16px; font-weight:bold; line-height:24px; text-align:center; width:24px; height:24px; background:#BBB; position:absolute; top:-2px; right:0; cursor:pointer; }