.flex {
    display: flex;
}

/* ーーーーーーーーーーーーーーーーーーー
見出しのスタイル
ーーーーーーーーーーーーーーーーーーー */
.label {
    background: #EEEEEE;
    font-weight: normal;
    font-size: 100%;
    padding: 8px;
    margin-bottom: 10px;
}

.label_title {
    padding: 5px 10px;
    font-size: 100%;
    background: #EEEEEE;
    font-weight: normal;
}

ol {
    padding-left: 12px;
}

ol li {
    margin-left: 30px;
}

.red {
    color: #B70100;
}

.Many {
    display: block;
    font-size: 30px;
    font-weight: bold;
    color: #08215c;
    padding: 5px 20px !important;
}
/* ーーーーーーーーーーーーーーーー
表のレイアウト
ーーーーーーーーーーーーーーーー */
table .data{
    border-top: #ddd solid 1px;
    border-right: #ddd solid 1px;
    padding: 0;
    width: 100%;
}

/*
table {
    border: #ddd solid 1px;
    color: #000;
    font-size: 100%;
    font-family: "ＭＳ Ｐ ゴシック","MS PGothic",sans-serif;
    line-height: 1.4;
    margin: 0 0 1.5em 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
}
*/

table.data caption {
    border: #ddd solid 1px;
    border-bottom: none;
    background-color: #ddd;
    font-weight: bold;
    padding: 3px;
    text-align: left;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

table.data th {
    background-color: #f5f5f5;
    font-weight: bold;
}

table.data th, table.data td {
    border-bottom: #ddd solid 1px;
    border-left: #ddd solid 1px;
    padding: 10px 3px;
}

th, td {
    text-align: left;
}

.colSingle {
    padding: 0 0 20px 0;
}

.colSingle dl {
    padding: 0;
}

.colSingle dl dt {
    background-color: #EFEFEF;
    margin: 0;
    padding: 3px 3px 3px 20px;
}

.colSingle dl dd {
    border-right: 3px solid #EFEFEF;
    border-bottom: 3px solid #EFEFEF;
    border-left: 3px solid #EFEFEF;
    padding: 10px;
}

.table_layout {
    color: #000;
    font-size: 100%;
    line-height: 1.4;
    margin: 0 0 1em 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
    border: 1px bold #000;
}

.table_layout th {
    border:1px solid #000;
    padding-left: 5px;
}

.table_layout td {
    line-height: 1.5;
    padding: 15px 5px;
    border:1px solid #000;
}

.success {
    color: #c00;
}

.failed {
    color: #2c34a5;
}


/* ーーーーーーーーーーーーー
表のリストスタイル
ーーーーーーーーーーーーー */
.alignCenter {
    text-align: center;
}

.alignRight {
    text-align: right;
}

.alignLeft {
    text-align: left;
}

table ul li {
    margin-left: 30px;
    padding-left: 5px;
    list-style-type: disc;
}

dd ul li {
    margin-left: 30px;
    padding-left: 5px;
    list-style-type: disc;
}

.download {
    line-height: 2.5em;
    padding: 0 10px 20px 10px;
}

.download ul {
    display: flex !important;
}
.download  ul li{
    list-style: none;
}

.download hr {
    margin: 5px 0;
}

.downloadTitle {
    background: url(../images/common/line1.gif) bottom repeat-x;
    float: left;
    list-style: none;
    margin: 0;
    width: 260px;
}

.downloadLink {
    background: url(../../images/common/line1.gif) bottom repeat-x;
    float: left;
    list-style: none;
    margin: 0;
    width: 9em;
}

.list-disc  li{
    list-style-type: disc !important;
    margin-left: 30px;
}


.list-cicle li {
    list-style-type: circle !important;
    margin-left: 30px !important;
}


.menu_ct hr {
 margin-bottom: 5px;
 margin-top: 5px;
}


.menu-list {
    line-height: 1.4;
    margin: 0 0 5px;
    padding: 0 0 5px;
}

.menu-list dt {
    display: flex;
    font-size: 14px;
    color: #000;
}

.menu-list dt a {
    display: block;
    font-size: 14px;
    color: #000;
    text-decoration: none;
}

.menu-list dt::before {
    content: url(/images/common/student_arw.svg);
    display: inline-block;
    padding-right: 8px;
    vertical-align: middle;
    line-height: 1;
}

.menu-list ul li a {
    display: block;
    font-size: 14px;
    color: #000;
    text-decoration: none;
}

.pastlist {
    float: right;
    border-radius: 5px;
}
.pastlist a {
    font-size: 20px;
}

.iconImg {
    width: 10% !important;
}

#linklist ul {
    border-bottom: dotted 1px #246BAE;
    padding-top: 10px;
}

#lbllink {
    padding: 0 0 0 10px;
    margin: 0;
    color: #246BAE;
    font-weight: bold;
}

.arrow_menu li {
    display: block;
    width: 100%;
    margin-bottom: 1em;
    font-size: 14px;
    color: #000;
}

.arrow_menu li::before {
    content: url(/images/common/student_arw.svg);
    display: inline-block;
    padding-right: 8px;
    vertical-align: middle;
    line-height: 1;
}
/* ------------------------ */

dl h4 {
    font-size: 108%;
    font-weight: bold;
}

dl {
    margin: 10px 0;
}

dd {
    padding-left: 15px;
}

p dl {
    padding: 0 0 1em 0；
}

.arrow {
    background-color: #EFEFEF;
    background-image: url(../images/common/col/dt.gif);
    background-position: 5px .55em;
    background-repeat: no-repeat;
    padding: 3px 3px 3px 20px;
}

.colSingle dl dt {
    background-color: #EFEFEF;
    background-image: url(../images/common/col/dt.gif);
    background-position: 5px .55em;
    background-repeat: no-repeat;
    margin: 0;
    padding: 3px 3px 3px 20px;
    _zoom: 1;
}

.image-box {
    padding-bottom: 150px !important;
}

.ompositionSubject dl {
    background-image: url(/ja/campuslife/course/general/take/2017/class/tate.gif);
    background-repeat: repeat-y;
    padding: 0;
}

.ompositionSubject dl dt {
    background-color: #fff;
    font-size: 108%;
    font-weight: bold;
}

.ompositionSubject dl dd {
    background-image: url(/ja/campuslife/course/general/take/2017/class/yoko.gif);
    background-position: 0 -5px;
    background-repeat: no-repeat;
    padding: 0 0 0 30px;
}


.ompositionSubject dl dd dl dd {
    background-image: url(/ja/campuslife/course/general/take/2017/class/yoko_last.gif);
    padding-bottom: 10px;
}

.ompositionSubject dl dd.last {
    background-color: #fff;
    background-image: url(/ja/campuslife/course/general/take/2017/class/yoko_last.gif);
    _zoom: 1;
}

.ompositionSubject dl dd dl {
    background-image: none;
}

/* ------------------------------------------- */

table.session td.general {
    background-color: #feffaf;
}

table.session td.pro {
    background-color: #bfdfff;
}
/* ーーーーーーーーーーーーーーーー
commutationのスタイル
ーーーーーーーーーーーーーーーー */

.commutation {
    border: #ccc solid 1px;
    margin: 0 0 1em 0;
    padding: 10px 10px 0 10px;
}

.commutation p strong {
    color: #909;
    font-size: 108%;
}

.commutation p {
    padding: 0 0 10px 0;
}

/* ーーーーーーーーーーーーーーーー
更新ラベル
ーーーーーーーーーーーーーーーー */
.update {
    margin: 0;
    padding: 0;
    border: 0;
    border-style: solid;
    border-width: 1px;
    padding: 2px 5px 2px 5px;
    color: #FF6600 ;
    font-size: 95%;
    font-weight: bold;
    background-color: #FFE7DB;
}

/* --------------------------------
エクセルのアイコンのスタイル
ーーーーーーーーーーーーーーーーーーー */
img {
    vertical-align: middle;
}

.squareBorder {
    border: #CCCCCC solid 1px;
    margin: 0 0 1em 0;
    padding: 1em;
}

.archiveNavigation {
    border: 1px solid #CCCCCC;
    margin: 10px 0 0 0;
    padding: 10px 20px 20px;
    display: block;
}

.archiveNavigation ul {
    display: block;
}

.archiveNavigation ul li {
    background: url(../ja/campuslife/guide/case/internet/file/pin.gif) left no-repeat;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0 20px 0 15px;
    white-space: nowrap;
}

/* ----------------------------------------
画像のスタイル
ーーーーーーーーーーーーーーーーーーーーーーーー */
.rf {
    float: right;
    margin: 0 0 0 15px;
}

.lf {
    float: left;
    margin: 0 15px 0 0;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーー
文字色変更
ーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.attention {
    color: #b70000;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ページナビゲーション
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

.pagenavi {
    padding: 0 0 15px 0;
}

.pagenavi ul {
    display: flex;
    justify-content: flex-end;
}

.pagenavi ul li{
    background: #256CAE;
    margin-right: 10px;
}

.pagenavi ul li a{
    color: #fff;
    padding: 5px;
}

/* 東日本大震災ページスライドショー */
.out{
    position: relative;
	float:left;
	width:75%;
}
.in img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .5s;
    z-index: 0;
}
.out img{
    display: block;
    width: 100%;
    height: auto;
}

#next_main h2.pagetitle{
	background: no-repeat;
	border: none;
	padding: 0 0 10px 0;
	font-size: 120%;
	color: #191970;
	font-size: 30px;
	font-weight: bold;
}
.monthlybox{
	float: right;
	width: 22%;
	text-align: center;
	border: 1px solid;
}
.monthlybox .monthlylbl{
	font-weight: bold;
	color: #FFFFFF;
	background-color: #348dd0;
	border-bottom: solid 1px #333;
	margin-bottom: 5px;
}


/*
input{
    display: none;
}
*/
.in{
    display: flex;
    justify-content: center;
}
label span{
    display: block;
    width: 15px;
    height: 15px;
    padding: 7px;
    margin: -40px 0 0;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
label span::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #4287f5;
    opacity: 0.5;
    border-radius: 100%;
}            
input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before,
input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before{
    background: #000;
    opacity: 1;
}
label span::before{
    animation: slidebutton 14s infinite;
}
@keyframes slidebutton{
    0%{opacity: 0.5;background: #4287f5;}
    3.5%{opacity: 1;background: #000;}/* b÷x×100=y */
    25%{opacity: 1;background: #000;}/* 100÷c=z */
    28.5%{opacity: 0.5;background: #4287f5;}/* y+z */
}            
label:nth-of-type(2) span::before,label:nth-of-type(2) img{
    animation-delay: 3.5s;
}            
label:nth-of-type(3) span::before,label:nth-of-type(3) img{
    animation-delay: 7s;
}            
label:nth-of-type(4) span::before,label:nth-of-type(4) img{
    animation-delay: 10.5s;
}            
input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img,
input:nth-of-type(4):checked ~ .in label:nth-of-type(4) img{
    opacity: 1;
    z-index: 1;
}
.in img{
    animation: slide 14s infinite;/* (a+b)×c=x */
    opacity: 0;
}
@keyframes slide{
    0%{opacity: 0;}
    3.5%{opacity: 1;z-index: 1;}/* b÷x×100=y */
    25%{opacity: 1;}/* 100÷c=z */
    28.5%{opacity: 0;z-index: 0;}/* y+z */
}
input:checked ~ .in img,input:checked ~ .in span::before{
    animation: none;
}
.in:hover img,.in:hover span::before{
    animation-play-state:paused;/* マウスを載せると一時停止 */
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* 学長挨拶 */
#directorphoto {
    float: right;
    padding: 0 0 10px 10px;
    max-width: 200px;
}

.cf, #directorphoto {
    display: block;
    position: relative;
}

/* ---------------------------------------------------------
画像サイズ
--------------------------------------------------------- */
.class_room{
	box-sizing: border-box;
}
.class_room td{
	width:33%;
	padding: 10px;
	text-align:center;
}


/* スマホ */
@media screen and (max-width: 640px) {
/*****************************

          東日本大震災・支援活動

*****************************/
	.lf,
	.rf{
		float:none;
		margin:0;
	}
	.colSingle{
		padding-bottom:10px;
	}
	.out,
	.monthlybox{
		float:none;
		width:100%;
	}
	.out{
		margin-bottom:20px;
	}
	.iconImg{
		width:auto !important;
	}

}