@charset "utf-8";

/* -----------------------------------------------------------
	Site Name: sakushin-univ web site
	Author: Yamazen Communications co.,ltd.
	Comment: topicsframe style
	Since2014
----------------------------------------------------------- */
	
/*Index
	00.reset
	01.structure
	02.block
	03.calendar
----------------------------------------------------------- */


/* 00.reset style
----------------------------------------------------------- */
#article ul,
#article ol{
	margin: 11px 0 0;
	padding: 0 0 0 40px;
}
#article ul li{
	list-style: outside disc;
}
#article ol li{
	list-style: outside decimal;
}
dl#article dd ul.pic{
	margin: 0;
	padding: 0;
}
dl#article dd ul.pic li{
	list-style: none;
}



/* 01.structure
----------------------------------------------------------- */

/* article */
dl#article{
	margin:0 0 70px;
}


dl#article dt#pttl{
	margin:0 0 15px;
	padding:20px;
	color:white;
	font-weight:bold;
	font-size:150%;
	line-height:1.5;
	border-radius: 10px;		/* CSS3²Ý°¸ */
	-webkit-border-radius: 10px;	/* Safari,Google ChromeÓÃ */
	-moz-border-radius: 10px;	/* FirefoxÓÃ */
	background:#305072 url(../img/side/bg-request.gif) repeat;
}
#sjc dl#article dt#pttl{
	background: url(/sjc/common/img/bg-stripe.gif) repeat 0 0;
}


span.caption{
	display:block;
	margin:5px 0 0;
	padding-left:10px;
	text-align:left;
	font-size:85.714%;
	background:url(/common/img/arrow06.png) no-repeat 0 5px;
}
@media only screen and (max-width: 640px){
}
@media only print, only screen and (min-width: 641px){
dl#article{
	width:730px;
}
dl#article dt#pttl{
	width:700px;
}
}




/* 02.block
----------------------------------------------------------- */

dl#article dd{
	float:left;
	margin:0 30px 0 0;
	overflow:hidden;
}
dl#article .date{
	width: 700px;
	margin: 0 30px 20px 0;
	text-align: right;
	font-size: 85.714%;
}
dl#article dd.area{
	border: 1px solid #ff0000;
}

dl#article dd.area:hover{
	cursor: pointer;
	opacity:0.5;
	filter: alpha(opacity=50);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=50)";  /* ie 8 */
	-moz-opacity:0.5;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.5;              /* Safari 1.x */
}
@media only screen and (max-width: 640px){
dl#article dd{
	float:none;
	margin:0;
}
dl#article .date{
	width: 100%;
	margin: 0 0 20px;
}
}

/* block_width */
@media only print, only screen and (min-width: 641px){
dl#article dd.wide_1_1{width:700px;}
dl#article dd.wide_1_2{width:335px;}
dl#article dd.wide_1_3{width:213px;}
dl#article dd.wide_2_3{width:456px;}
dl#article dd.wide_1_4{width:152px;}
dl#article dd.wide_3_4{width:516px;}
}

/* block_pic_layout */
dl#article dd ul.pic{
	position:relative;
	letter-spacing:-0.4em;
	z-index:999;
}
dl#article dd ul.pic li{
	margin:0 0 10px;
	letter-spacing:normal;
}

dl#article dd.pic_above ul.pic,
dl#article dd.pic_below ul.pic{width:100%;text-align:center;}
dl#article dd.pic_left  ul.pic{float:left;}
dl#article dd.pic_right ul.pic{float:right;}

dl#article dd.pic_above ul.pic{margin:0 -10px 15px;}
dl#article dd.pic_below ul.pic{margin:15px -10px 0;}

dl#article dd.pic_above ul.pic li,
dl#article dd.pic_below ul.pic li{
	display:inline-block;
	margin:0 10px;
	vertical-align:top;
}
dl#article dd.pic_above ul.pic li img,
dl#article dd.pic_below ul.pic li img{
	padding:0;
}


dl#article dd.pic_left  ul.pic{padding-right:15px;}
dl#article dd.pic_right ul.pic{padding-left:15px;}
dl#article dd.pic_left  ul.pic,
dl#article dd.pic_right ul.pic{background-color:white;}

@media only screen and (max-width: 640px){
dl#article dd.pic_above ul.pic li,
dl#article dd.pic_below ul.pic li{
	width: 100%!important;
}
}


/* file block */
dl#article dd ul.file{
	margin:15px 30px 0 0;
	padding-right:15px;
	list-style-type: none;
}

dl#article dd ul.file li{
	padding: 3px 0 3px 10px;
	background:url(/common/img/arrow05.png) no-repeat 0 center;
	list-style-type: none;
}

/* mp3 block */
dl#article dd ul li a.play{
	margin-right:5px;
	text-decoration:underline;
	cursor:pointer;
	transition:all 0.3s linear;
}
dl#article dd ul li a.play:hover{
	color:#ff6600;
}
dl#article dd ul li a.pause{
	padding:1px 5px 0;
	color:#fff;
	font-size:12px;
	text-align:center;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	background-color:#1b3c5f;
	cursor:pointer;
	transition:all 0.3s linear;
}
dl#article dd ul li a.pause:hover{
	background-color:#ff6600;
}





/* 03.calendar
----------------------------------------------------------- */
#calendar{margin-top:-50px;padding: 0 135px 0 0;}
#library #calendar {background: url(/common/img/color-library.gif) no-repeat right top;}
#ic #calendar      {background: url(/common/img/color-ic.gif) no-repeat right top;}
#kokoro #calendar  {background: url(/common/img/color-kokoro.gif) no-repeat right top;}
#calendar th{text-align: center;color: #646464;font-weight: normal;}
#calendar td{text-align: center;color: #999999;}

#calendar .purple {background-color: #babaff;color: #646464;}
#calendar .white  {background-color: #ffffff;color: #646464;}
#calendar .bgreen {background-color: #96e7c0;color: #646464;}
#calendar .aqua   {background-color: #99f5f5;color: #646464;}
#calendar .ygreen {background-color: #bdf88d;color: #646464;}
#calendar .orange {background-color: #ffe57b;color: #646464;}
#calendar .red    {background-color: #ffc8b4;color: #646464;}
#calendar .yellow {background-color: #ffff99;color: #646464;}
#calendar .pink   {background-color: #ff99cc;color: #646464;}

#calendar td.coution{
	padding:5px 0 0 0;
	border:none;
	border-right:1px white solid;
}

#calendar td.coution p{
	margin:10px 0;
	color:#323232;
	text-align:left;
}


@media only screen and (max-width: 640px){
#calendar .left-calendar{margin-bottom: 25px;}
#calendar th,
#calendar td{padding: 5px;}
}
@media only print, only screen and (min-width: 641px){
#calendar .left-calendar{
	float: left;
	width: 270px;
	margin-right: 25px;
}
#calendar .right-calendar{
	float: left;
	width: 270px;
}
#calendar p.coution{
	width:270px;
}
}