@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.article .student-feature-section {
    background-color: #a4ffff;
    position: relative;
    padding: 200px 20px;
    z-index: 1;
}

.article .student-feature-section .column-wrap {
	max-width: 1300px;
	
}

.student-feature-section .column-left {
    transform: translateY(50px);
}

.student-feature-section .column-right {
    transform: translateY(-50px);
}

.main .chart {
    display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
    background: white;
    width: 95%;
    max-width: 550px;
    padding: 25px;
	margin: 0 auto;
	
}

.main .article .student-feature-section .chart-area{
	position: relative;
	width:50%;
	max-width: 350px;
	height:300px;
	margin-right: 10px;
}

.legend1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.legend1 .legend-color {
  width: 20px;
  height: 10px;
  margin-right: 5px;
  background-color: #52A8FF;
}

.legend2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.legend2 .legend-color {
  width: 20px;
  height: 10px;
  margin-right: 5px;
  background-color: #FF99FF;

}

.legend-text {
  font-size: 12px;

}

.legend3 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.legend4 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.chart02-legend .legend1 .legend-color {
  width: 20px;
  height: 10px;
  margin-right: 5px;
  background-color: #0071C2;
  
}
.chart02-legend .legend2 .legend-color {
  width: 20px;
  height: 10px;
  margin-right: 5px;
  background-color: #52A8FF;

}
.chart02-legend .legend3 .legend-color {
  width: 20px;
  height: 10px;
  margin-right: 5px;
  background-color: #D1EDFF;

}
.chart02-legend .legend4 .legend-color {
  width: 20px;
  height: 10px;
  margin-right: 5px;
  background-color: #AAAAAA;

}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
	main.main {
		padding: 0;
		
	}
	
	.student-feature-section .column-left {
    transform: none;
}

.student-feature-section .column-right {
    transform: none;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.main .chart {
	  flex-direction: column-reverse
		
	}
	
	.main .article .student-feature-section .chart-area{
	position: relative;
	width:70%;
	max-width: 350px;
	height:235px;
	margin-right: 0;
	margin-bottom: 20px;
}
	
}