@charset "UTF-8";

/*
	================================================================================================
		/support/headphone/howto/dialogue/top.css
	================================================================================================
*/

/*
	====================================
		dialogue 
	====================================
*/
#contents .balloon {
	max-width: 780px;
	margin: 30px auto;
}

#contents div.girl_comment, #contents div.teacher_comment {
    padding: 0 10px;
}

@media screen and (max-width: 900px) {
	 .balloon .faceicon img, .balloon .teacher_faceicon img {
        width: 50%;
    }
	
	.balloon.index_comment .teacher_faceicon {
        margin-right: -78px;
    }
	
	 #contents div.index_comment div.teacher_comment {
        width: auto;
        margin-right: 100px;
        margin-top: 0;
        font-size: 1rem;
    }

	
/*
	====================================
		teacher
	====================================
*/

	.balloon .teacher_faceicon {
		margin-right: -40px;
	}

	#contents div.teacher_comment {
		margin-right: 60px;
		margin-left: auto;
	}

	#contents div.teacher{
		border: solid 3px #e6e4e5;
		width: auto;
		height: auto;
		padding: 10px;
	}
	#contents div.index_comment div.teacher_comment {
		width: auto;
		margin-right: 100px;
		margin-top: 0
	}
	.balloon.index_comment .teacher_faceicon {
		margin-right: -78px;
	}

	.teacher_comment ol p{
		color: #555;
		margin: 10px 0px;
	}	

}


/*
	====================================
		dialogue 
	====================================
*/
#contents .dialoguelist li img {
    vertical-align: middle;
}


#contents .dialoguelist li {
	margin: 10px;
	display: inline-block;
}

@media screen and (max-width: 640px) {
	#contents .dialoguelist {
		padding-left: 0;
	}
	
	#contents .dialoguelist li img {
		max-width: 100%;
		width: auto;
		height: auto;
	}
}

/* 2024/07/01追記 */
nav.info ul {
    margin: 3em 0;
	padding: 0;
	display: flex;	
	justify-content: center;
}

nav.info ul li {
    margin: 0 1em;
	flex-basis: 32.88%;
}

nav.info ul li a {
	display: block;
    text-align: center;
	border-radius: 15px;
	border: #d2d2d2 1px solid;
	padding: 0.8em;
	font-weight: bold;
	background: url(/support/share/images/bg_mod-linkButton.jpg) repeat-x scroll left center;
}

@media screen and (max-width: 640px) {
	nav.info ul {
		flex-direction: column;
	}
	
	nav.info ul li {
		margin: 0 0 0.5em;
	}
	
	nav.info ul li a {
		padding: 0.5em;
	}
}