@charset "utf-8";
/* CSS Document */

/* 医療用一覧 */
#att_koe {margin-top: 3%;}
#att_koe dl {margin-bottom: 5%;}
#att_koe dl dt div.icon {float: left; width: 15%; padding-right: 1%;}
#att_koe dl dt div.icon img {width: 100%; max-width: 100px;}
#att_koe dl dt div.icon_detail {float: right; width: 85%; line-height: 1.5; margin-top: 3%;}
#att_koe dl dt div.icon_detail span {color: #e0b25c; display: block;}
#att_koe dl dd {background-color: #fee7ef; margin: 1% 2%; padding: 2%; border-radius: 8px;}
.cg_rank .sysContent .cg_dtltxt {
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	padding: 3% 2%;
}

/* 提携サロンコンテンツ */
.Check_p {margin-bottom: 3%;}
.Check_p li {
	font-size: 15px; padding: 3% 3% 3% 8%; margin-bottom: 3%;
	background: url("https://www.brightlele.jp/img/salon/check.webp") no-repeat 30px 27px;
	background-color: #f8efe6;
	background-size: 18px 18px;
}
.txt_right {text-align: right;}

/* 初めてでも安心して使えるウィッグ/ウィッグから地毛への切り替えにはこちら/持っていると便利なウィッグのお役立ちグッズ */
#begi_ner, #chang_n_hair, #convenient_goods {margin: 5% auto 6%;}	
.prem_rec_item .prem_item_list {
	display: -webkit-flex;
	display: flex;
	justify-content: flex-start;
	width: 100%;
	flex-wrap: wrap;
	gap: 30px 20px;
	padding: 2% 0;
	box-sizing: border-box;
}
.prem_rec_item .prem_item_list li {
	width: calc(100% / 4 - 20px);
    max-width: 100%;
}
.prem_rec_item .prem_item_list li img {width: 100%;}
.prem_rec_item .prem_item_list li .ItemName a {text-decoration: none!important;}
.prem_rec_item .prem_item_list li .Item_price {font-weight: bold;}

/*================================================
 *  PC向けデザイン
 ================================================*/
@media print, screen and (min-width:980px) {
	#att_koe dl dt div.icon_detail {font-size: 18px;}
	#att_koe dl dt div.icon_detail span {font-size: 25px;}
	#att_koe dl dd {font-size: 14px;}
	.font_s {font-size: 12px;}
	/* 提携サロンコンテンツ */
	.page_area p {padding: 2% 3% 3%; font-size: 15px; line-height: 1.8; margin-bottom: 15px;}
}
/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (min-width:768px) and ( max-width:979px) {
	#att_koe dl dt div.icon_detail {font-size: 16px;}
	#att_koe dl dt div.icon_detail span {font-size: 23px;}
	#att_koe dl dd {font-size: 14px;}
	.cg_rank .sysContent .cg_dtltxt {font-size: 12px;}
	.font_s {font-size: 11px;}
	/* 提携サロンコンテンツ */
	.page_area p {padding: 3%; font-size: 16px; line-height: 1.8; margin-bottom: 15px;}
	.Check_p {padding: 0 2%;}
}
/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
	#att_koe dl dt div.icon {width: 20%;}
	#att_koe dl dt div.icon img {width: 100%; max-width: 200px;}
	#att_koe dl dt div.icon_detail {float: right; width: 79%; font-size: 14px;}
	#att_koe dl dt div.icon_detail span {font-size: 20px;}
	#att_koe dl dd {font-size: 12px;}
	.cg_rank .sysContent .cg_dtltxt {font-size: 12px;}
	.font_s {font-size: 10px;}
	/* 提携サロンコンテンツ */
	.page_area p {padding: 2% 3% 3%; font-size: 13px; line-height: 1.8; margin-bottom: 15px;}
	.Check_p {padding: 0 1%;}
	.Check_p li {font-size: 13px; background-position: 3% 15px;	background-size: 14px 14px;}
	/* 初めてでも安心して使えるウィッグ/ウィッグから地毛への切り替えにはこちら */
	.prem_rec_item .prem_item_list {
		padding: 2%;
		gap: 20px 10px;
	}
	.prem_rec_item .prem_item_list li {
		width: calc(100% / 2 - 10px);
		max-width: 100%;
	}
	.prem_rec_item .prem_item_list li .ItemName {line-height: 1.5;}
	.prem_rec_item .prem_item_list li .ItemName a {font-size: 11px;}
	.prem_rec_item .prem_item_list li .Item_cat {font-size: 9px;}
}