@charset "utf-8";

/* ---------------------------
	20220804 
	guide/cleaning/index.css
-----------------------------*/

#contents h1.title{
	border-bottom: 2px solid #6b6b6b;
	font-size: 1.846rem;
	padding-left: 13px;
	padding-bottom: 5px;
	margin-bottom: 2em;
}

#contents .singleBtn {
    margin-top: 1.5em;
}

@media (min-width: 641px){
	#contents .indexArea{
		margin-left: 2px;
	}
	#contents .imageArea {
		width: 54%;
	}
	#contents .flex.rightImage {
		margin-left: 1em;
		justify-content: space-between;
		flex-direction: row-reverse;
	}
	#contents .imageArea.w80 {
		width: 76%;
		margin: 0 auto;
	}
	#contents .flex.rightImage .txt > .singleBtn{
		margin-left: 0;
	}
	#contents .advice_box {
		padding: 8px;
	}
}

@media (max-width: 640px){
	#contents h1.title{
		font-size: 1.385rem;
		padding-left: 5px;
	}
	#contents .indexArea{
		margin-left: 0;
	}

	#contents .imageArea .flex {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
	}
	#contents .imageArea .flex img {
		margin: 1em;
		height: 128px;
		width: auto;
	}
	#contents .imageArea.w80 .flex img {
		width: 60%;
		height: auto;
	}
	#contents .flex.rightImage .txt > p{
		margin-top: 2em;
	}
	
}

@media (max-width: 360px){
	#contents .imageArea.w80 .flex img {
		min-width: 180px;
	}
}

/* 2023/01/27 */
#contents ul.list{
	display: flex;
	flex-wrap: wrap;
	gap: 4.5em;
}

#contents ul.list li{
	width: 45%;
}

@media (max-width: 640px){
	#contents ul.list{
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
	
	#contents ul.list li{
		width: 100%;
		max-width: 300px;
		margin-bottom: 2em;
	}
	
	#contents ul.list li:last-child{
		margin-bottom: 0;
	}
	
	#contents ul.list li img{
		width: 100%;
		max-width: 300px;
	}
	
	#contents ul.list span.textLink{
		display: block;
	}
}