@charset "utf-8";

/*========= バー表示のためのCSS ===============*/

/*タイムライン全体の設定*/
.timeline{
	max-width: 600px;
	width:100%;
	margin:0 auto;
}

.timeline li{
    /*線の起点とするためrelativeを設定*/
    position: relative;
	list-style: none;
	padding-bottom: 70px;/*線の高さ確保*/
}

.timeline dl{
	margin:0 0 20px 12rem;/* テキスト下空間とボーダー分左空間*/
}

.timeline dt{
	color: #427bbf;
    font-weight: bold;
}

.timeline dd strong{
	display: block;
	padding:10px 0;
}

/*線    絶対配置で線を設定*/
.border-line {		z-index: -1;/*◯内の文字表示のため*/
    /*線の位置*/
	position: absolute;
	left:3.5rem; /*◯との位置関係*/
	top:1rem;    /*◯上部の開始位置下げる（◯のサイズ内 元は0）*/
	width:3rem;/*線の太さ*/
	height:0;/*はじめは高さを0に*/
}

/*◯    タイムラインの見出し横の丸の位置と形状*/
.timeline li::after{	z-index: -1;/*◯内の文字表示のため*/
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10rem; /*◯大きさ*/
    height: 10rem;
    border-radius: 50%;
}
/*◯　　内テキスト*/
.timeline p{
    position: relative;
    top: 3.5rem;
    left: 3.5rem;
    color: #fff;
    font-size: 1.4rem;
	font-weight: bold;
}

/*--------------専門課程----------------*/

/*線色　１年*/
.grade01 .border-line {
	background:#6795c6;
}
/*◯色　１年*/
.grade01 li::after{
    background-color: #6795c6;
}
/*線色　１年　後期*/
.grade01_B .border-line {
  background:  #427bbf;
}



/*線色　２年*/
.grade02 .border-line {	
  background:#346298;
}
/*◯色　２年*/
.grade02 li::after{
    background-color: #346298;
}
/*線色　2年　後期*/
.grade02_B .border-line {
  background:  #274972;
}



/*--------------卒業or就職----------------*/



/*線色　*/
.workor .border-line {	
	background: #71C7D1;
	background: linear-gradient(0deg, rgba(113, 199, 209, 1) 0%, rgba(39, 73, 114, 1) 50%);/*応用へ繋ぐ*/
	/*線の位置*/
	left: 11rem; /*◯との位置関係*/
}

/*◯色　*/
.workor li::after{
    background-color: #ff6b6b;
    border: 10px solid #274972;
}
.workor dl{
	margin:0 0 20px 20rem;/*ボーダー分左空間*/
}
.workor dt{
    color: #274972;
    font-weight: bold;
}
	/*◯　形状*/
.workor li::after{	z-index: -1;/*◯内の文字表示のため*/
    width: 18rem; /*◯大きさ*/
	height: 10rem;
    border-radius: 50px;
}
	/*◯内テキストカスタマイズ*/
.workor p{
	top:3.5rem;
    left: 5rem;
    color: #fff;
    font-size: 1.4rem;
	font-weight: bold;
}



/*--------------応用課程----------------*/

/*タイムライン全体の設定　　応用課程カスタマイズ*/
.grade3-4 .timeline{
	max-width: 600px;/*右寄分縮小*/
}

.grade3-4 li::after
{
    left:8rem; /*線との位置関係*/
}
/*◯　　内テキスト*/
.grade3-4 p{
    left: 11rem;
}
/*線   絶対配置で線を設定*/
.grade3-4 .border-line {
    /*線の位置*/
	left: 11.5rem; /*◯との位置関係.workor .border-lineと同値*/
}
.grade3-4 dl{
	margin:0 0 20px 20rem;/* テキスト下空間とボーダー分左空間*/
}
.grade3-4 dt{
	color: #369aa6;
	font-weight: bold;
}



/*線色　3年*/
.grade03 .border-line {	
  background:#71c7d1;
}
/*◯色　3年*/
.grade03 li::after{
    background-color: #71c7d1;
}
/*線色　3年　後期*/
.grade03_B .border-line {
  background:  #4abbca;
}


/*線色　4年*/
.grade04 .border-line {	
  background:#369aa6;
}
/*◯色　4年*/
.grade04 li::after{
    background-color: #369aa6;
}
/*線色　4年　後期*/
.grade04_B .border-line {
  background:  #29767f;
}


/*線色　卒業*/
.graduation .border-line {	
  background:#369aa6;
}
/*◯色　卒業*/
.graduation li::after{
    background-color: #29767f;
}




/*========= レイアウトのためのCSS ===============*/










h2{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 30px 0;
}


/*
ul {
	border: solid 1px red;
}*/