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

#main {
	margin-top:20px;
}
/* タイトル */
#main h2.t-dec01 {
	border-bottom:#a89990 2px solid;
	margin-bottom:1em;
}
#main h3.t-dec02 {
	padding: 0.2em 0.5em;
	background: #DED8D4;
	margin-bottom: 20px;
	font-weight: 500;
}
/* 共通 */
.txtIndent {
	padding-left:1em;
	text-indent:-1em;
}
/* 詳細説明  */
.description {
	margin-top: 15px;
	margin-bottom: 2em;
}
.description .text {
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 1.5;
}
.description .Img img, .description .appBox img, .rcont .Img img {
	max-width:100%;
	width:auto;
}
/* linkAr */

.linkAr a {
	background: none;
	padding: 0;
	position: relative;
	padding-left: 1em;
}
.linkAr a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f105";
	color: #000;
	display: inline-block;
	font-size: 1.2em;
	line-height: 1;
	position: absolute;
	top: 11px;
	left: 0;
	margin-top: -0.4em;
}
.linkAr a:hover {
	text-decoration: underline !important;
}
.appBox a:hover {
	opacity: 0.8;
}
/* 注釈 */
.noteList {
	margin-top: 15px;
}
.noteList li {
	padding-left:2em;
	text-indent:-2em;
}
.noteList .note {
	line-height: 1.5;
}
.note {
	font-size: 14px;
}
span.sup {
	vertical-align: super;
	font-size: 10px;
}
/* ボタン */
.brownBtn .btn {
	width: 175px;
	display: block;
	text-align: center;
	border:#a89990 2px solid;
	padding: 20px 5px 20px 45px;
	border-radius: 5px;
	box-sizing: border-box;
	font-weight: 400;
}
.brownBtn .btn:hover {
	text-decoration: none;
	opacity: 0.8;
}
.brownBtn .btn._app {
	background: url(/support/pci_hair/app/images/icon_app2.png) no-repeat 5px center;
	background-size: 40px;
}
.brownBtn .btn._faq {
	background: url(/support/pci_hair/app/images/icon_faq2.png) no-repeat 7px center;
	background-size: 40px;
}
.brownBtn .btn._product {
	background: url(/support/pci_hair/app/images/icon_product2.png) no-repeat 8px center;
	background-size: 44px;
}
.brownBtn .btn._guide {
	background: url(/support/pci_hair/app/images/icon_guide2.png) no-repeat 8px center;
	background-size: 40px;
}
/* レイアウト */
.column2 .lcont {
	float: left;
	width: 50%;
}
.column2 .rcont {
	float: right;
	width: 50%;
}
.column2 .rcont .Img {
	margin-right:20px;
	text-align:right;
}
 @media only screen and (max-width: 767px) {
.column2 .lcont,  .column2 .rcont {
	float: none;
	width: 100%;
}
.column2 .rcont .Img {
	margin-top:20px;
	margin-right:0px;
	text-align:center;
}
}