@charset "utf-8";

/*mainブロック内のh2タグに下線を引くための指定。*/
h2 {
	clear: both;
	display: inline-block;
	border-bottom: 4px solid #e85298;	/*下線の幅、線種、色。アクセントカラーです。上のmain h2と数字を合わせておく。*/
	font-size: 120%;
	bottom: -5px;		/*下からの配置場所指定。上にある２つのborder-bottomと重ねる為の指定なので、数字を合わせてから冒頭にマイナスをつけて下さい。*/
	padding: 0 5px;	/*上下、左右への余白。テキストの両脇に少し余裕をもって線を引くためです。*/
}


/*製品FAQ
---------------------------------------------------------------------------*/
/*FAQボックス全体*/
.faq {
	padding: 0 5px;	/*上下、左右へのボックス内の余白*/
}

/*質問*/
.faq dt {
	border-radius: 10px;	/*枠を角丸にする指定*/
	margin-top: 20px;	/*上に空けるスペース*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	background: linear-gradient(#fff, #f7f7f7);	/*背景グラデーション*/
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態の事。*/
	text-indent: -1.5em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
	font-weight: bold;
}

/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f059";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #e85298;			/*アイコンの色*/
	padding-right: 0.5em;		/*アイコンとテキストの間の余白*/
}

/*回答*/
.faq dd {
	padding: 2px 1em 5px 3em;		/*ボックス内の余白**/
	line-height: 1.3;
}
.faq dd::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f582";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #0e65d5;			/*アイコンの色*/
	padding-right: 0.5em;		/*アイコンとテキストの間の余白*/
}


/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

.faq dt span {text-indent: 0;}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.3);	/*背景色。0,0,0は黒の事で0.3は色が30%出た状態。*/
	width: 2em;			/*幅*/
	line-height: 2em;	/*高さ*/
}

/*マウスオン時*/
.pagetop a:hover {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒の事で0.8は色が80%出た状態。*/
}