@charset "utf-8";

/*
	================================================================================================
		support walkman dialogue 008 css index.css
	================================================================================================
*/
#contents .balloon{
	margin: 2em 0;
}

#contents div.teacher_comment {
	width: 540px;
	margin: 0 9em;
    padding: 1em 0 0;
}

#contents div.attentionArea  {
    margin: 1em;
	padding: 0.8em;
}

#contents ul.annotation {
	margin-left: 1em;
}

#contents ul.annotation li{
	margin-left: 0;
	color: #333;
}

#contents ul.Disc {
	margin: 0 0 0 1.5em;
}

#contents ul.Disc li {
	margin-left: 0;
}

#contents .flex {
    display: flex;
    justify-content: space-between;
    margin: 2em auto;
    align-items: center;
}

#contents .img280{
	width: 280px;
}

#contents .mq-320{
	width: 490px;
}

#contents ul.anchorlink li {
    background: url(/support/share/images/arrow_underline.gif) no-repeat left 0.4em;
}

#contents a.textLink {
    display: inline-block;
    margin: 0.3em 0 0 0.5em;
}

@media screen and (max-width: 640px) {
	#contents div.teacher_comment {
		width: auto;
		margin-right: 60px;
		margin-left: auto;
		padding: 1em 0.5em 0;
	}
	
	#contents ul.annotation {
		margin-left: 0;
	}
	
	#contents div.attentionArea  {
		margin: 1em 0;
	}
	
	#contents div.notice_gray_b   {
		margin-right: 0;
	}
	
	#contents .flex {
		flex-direction: column;
		align-items: center;
	}
	
	#contents img.pc_arrow1 {
		transform: rotate(90deg);
		display: block;
		margin: 1em auto;
	}
	
	#contents .img_size{
		width: 100%;
		max-width: 200px;
	}
	
	#contents .img280{
		width: 100%;
		max-width: 280px;
	}
	
	#contents .bnr_area img {
		width: 100%;
		max-width: 360px;
	}
	
	#contents ul.anchorlink {
		margin-left: 0!important;
	}
}