@charset "utf-8";

/* ===================================================================
css information

File Name  : layout.css
Author     : 
Style Info : 
=================================================================== */

/* playList
-----------------------------------------------*/

.playList #container { padding:10px 0 0 0; }
.playList #playListNav { display:none; }
.playList .alBg { margin:15px 0 0 0; }

.playList #pageTtl { padding:75px 0 0 0; }
.playList #pageTtl h2 { width:100%; height:28px; margin:0 auto; padding:0 10px; text-align:center; position:relative; }
.playList #pageTtl h2 img { height:100%; }
.playList #pageTtl h2:after { content:''; display:block; width:100%; height:4px; background:#6fd4e3; position:absolute; bottom:-8px; left:0;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow:    0px 1px 3px 0px rgba(0, 0, 0, 0.15);
box-shadow:         0px 1px 3px 0px rgba(0, 0, 0, 0.15);
}

.playList h2.cmnTtl { position:relative; cursor:pointer; }
.playList h2.cmnTtl:before { content:''; display:block; position:absolute;
background:URL(../img/allow.png) no-repeat center center; background-size:contain;
width:15px; 
height:50px; 
position:absolute; 
right:12px; 
top:0;
}
.playList h2.cmnTtl.active:before { background:URL(../img/allow_on.png) no-repeat center center; background-size:contain; }
.playList h2.cmnTtl.type01 { background:#7c5ca4; }
.playList h2.cmnTtl.type01:after { background:URL(../img/ttlIcon_01.png) no-repeat left center; background-size:100% 100%; }
.playList h2.cmnTtl.type02 { background:#0aabb7; text-indent:15px; }
.playList h2.cmnTtl.type02:after { background:URL(../img/ttlIcon_02.png) no-repeat left center; background-size:100% 100%; }
.playList h2.cmnTtl.type03 { background:#45a7dc; }
.playList h2.cmnTtl.type03:after { background:URL(../img/ttlIcon_03.png) no-repeat left center; background-size:100% 100%; }
.playList h2.cmnTtl.type04 { background:#8bbb1a; }
.playList h2.cmnTtl.type04:after { background:URL(../img/ttlIcon_04.png) no-repeat left center; background-size:100% 100%; }
.playList h2.cmnTtl.type05 { background:#ecb030; }
.playList h2.cmnTtl.type05:after { background:URL(../img/ttlIcon_05.png) no-repeat left center; background-size:100% 100%; }
.playList h2.cmnTtl.type06 { background:#f18948; }
.playList h2.cmnTtl.type06:after { background:URL(../img/ttlIcon_06.png) no-repeat left center; background-size:100% 100%; }
.playList h2.cmnTtl.type07 { background:#ea4991; }
.playList h2.cmnTtl.type07:after { background:URL(../img/ttlIcon_07.png) no-repeat left center; background-size:100% 100%; }

.playList .mainContInner { padding:10px; display:none; }
.playList .mainContInner ul { width:100%; margin:0 auto; text-align:left; }
.playList .mainContInner ul li { width:100%; height:100px; position:relative; padding:8px; margin:6px 0 0 0; /*overflow:hidden;*/ background:#f5f5f5;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px; 
-webkit-box-shadow: inset 0px 0px 0px 1px rgba(221, 221, 221, 1);
-moz-box-shadow:    inset 0px 0px 0px 1px rgba(221, 221, 221, 1);
box-shadow:         inset 0px 0px 0px 1px rgba(221, 221, 221, 1); 
}
.playList .mainContInner ul li:first-child { margin-top:0 !important; }
.playList .mainContInner ul li article { width:100%; display:table; }
.playList .mainContInner ul li article figure { width:84px; display:table-cell; vertical-align:middle; }
.playList .mainContInner ul li article figure img { width:100%; }
.playList .mainContInner ul li article section { padding:0 0 0 8px; display:table-cell; vertical-align:middle; }
.playList .mainContInner ul li article section h4 { font-size:15px; line-height:140%; }
.playList .mainContInner ul li article section h4 br { display:none; }
.playList .mainContInner ul li article section h4.small01 { font-size:13px; }
.playList .mainContInner ul li article section h4 span.smlTxt { font-size:10px; display:inline-block; *display:inline; *zoom:1; line-height:160%; }
.playList .mainContInner ul li article section p { color:#777; font-size:10px; line-height:140%; padding:4px 0 0 0; letter-spacing:0.05em; }
.playList .mainContInner aside { padding:10px 0 0 0; }
.playList .mainContInner aside p { font-size:10px; line-height:140%; color:#777; letter-spacing:0.05em; }

/* 各種アイコン */
.playList .mainContInner ul li.norate article section h4 { padding-right:18px; }
.playList .mainContInner ul li.hdnMsc:after { display: none; position:absolute; content:''; top:7px; right:8px; width:13px; height:17px; background:url(../img/hdnIcon.png) no-repeat left top; }
.playList .mainContInner ul li.hdnMsc span.date { right:28px; }
.playList .mainContInner ul li.norate .icon_nr { position:absolute; top:6px; right:6px; width:20px; height:20px; background:url(../img/stIcon05.png) no-repeat center center; background-size:100%; }
.playList .mainContInner ul li.norate.hdnMsc .icon_nr { top:28px; }
.playList .mainContInner ul li.stIcon:before { position:absolute; content:''; bottom:-2px; right:-3px; width:100px; height:100px; background-repeat:no-repeat; background-position:right bottom; background-size:60px; }
.playList .mainContInner ul li.stIcon.ic01:before { background-image:url(../img/stIcon01.png); }
.playList .mainContInner ul li.stIcon.ic02:before { background-image:url(../img/stIcon02.png); }
.playList .mainContInner ul li.stIcon.ic03:before { background-image:url(../img/stIcon03.png); }
.playList .mainContInner ul li.stIcon.ic04:before { background-image:url(../img/stIcon04.png); }
.playList .mainContInner ul li.stIcon article section p { padding-right:18px; }
.playList .mainContInner ul li.stIcon span.date { right:28px; }
.playList .mainContInner ul li > .yt { position:absolute; bottom:8px; right:8px; }
.playList .mainContInner ul li > .yt img { width:34px; }

.playList .mainContInner ul li span.date { position:absolute; display:block; top:6px; right:6px; line-height:100%; padding:3px 6px; background:#fff; color:#009fb9; border:1px solid #009fb9; font-size:11px; }

.playList #info { padding:10px; }
.playList #info p { position:relative; font-size:13px; color:#444; padding-left:45px; margin-top:15px; }
.playList #info p:before { position:absolute; content:''; top:2px; left:8px; width:22px; height:22px; background-repeat:no-repeat; background-position:center center; background-size:100%; }
.playList #info p.hdnMsc:before { background-image:url(../img/hdnIcon.png); width:15px; height:20px; left:12px; }
.playList #info p.icon01:before { background-image:url(../img/stIcon01.png); width:30px; height:30px; }
.playList #info p.icon02:before { background-image:url(../img/stIcon02.png); width:40px; height:40px; top:-15px; left:-4px; }
.playList #info p.icon03:before { background-image:url(../img/stIcon04.png); }
.playList #info p.norate:before { background-image:url(../img/stIcon05.png); }

.playList .linkBnr01 { text-align:center; margin:18px 0 0; }
.playList .linkBnr01 img { width:100%; max-width:420px; }