/* =============================================================
  よくある質問 .qanda
============================================================= */
/* 共通
-------------------------------------------*/
/* 全体
----------------------------*/
/* block */
.block {
	margin-top: 4rem;
}
.block:first-child {
	margin-top: 0;
}

/* 上マージン */
details {
	margin-top: 2rem;
}
/* summaryのデザイン */
details summary {
	font-weight: bold;
	background-color: #46a2f740;
	border-radius: 0.5rem;
	padding: 1rem 2rem;
}
/* p */
details p {
	padding: 1rem 2rem;
}
/* a */
details a {
	text-decoration: underline;
}
/* 注釈 */
details p.annotation {
	padding-top: 0;
}

/* 矢印を変更
----------------------------*/
/* 矢印を削除、左パディング追加 */
details summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding-left: 3.5rem; /* アイコン分の余白 */
  cursor: pointer;
  transition: 0.2s; /* 変化を滑らかに */
}
/* chrome safariの矢印を削除　*/
details summary::-webkit-details-marker {
  display: none; /* 矢印を消す */
}
/* 疑似要素でアイコンを表示 */
details summary:before,
details summary:after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2rem;
}
details summary:before {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #007bff;
}
details summary:after {
  left: 2.4rem;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  transition: .1s;
}
/* オープン時回転 */
details[open] summary:after {
  transform: rotate(90deg); /* 90度回転 */
  left: 2.2rem;
  top: 5px;
}

/* ホーバー時
----------------------------*/
/* デザインとカーソルを変更 */
details summary:hover {
  cursor: pointer; /* カーソルを指マークに */
  background-color: #46a2f794;
}

/* オープン時
----------------------------*/
/* デザインを変更*/
details[open] summary {  
	background-color: #46a2f794;
}
/* アニメーションを設定 */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* =============================================================
	フローティングボタン
	============================================================= */
	.floating_area{
		position:fixed;
		bottom:0;
		right:0;
		width:100%;
		padding:1.5rem 0 1.5rem;
		background:rgba(27, 27, 27, 0.8);
		z-index:9999;
	}
	.floating_area .wrapper{
		width:70%;
		margin:0 auto;
		display:flex;
		justify-content:center;
		flex-direction: row;
		align-items: center;
		gap:25px;
	}
	.floating_area a.inner{
		padding:0.8rem;
		border-radius:5px;
		flex:0.5;
	}
	.floating_area a.inner:hover{
		transition: all 0.3s; /*ゆっくり戻すため */
	}
	.floating_area a.inner p{
		font-size:1.1rem;
		font-weight:650;
		color:#fff;
		text-align:center;
	}
	a.estimate_btn{
		background:#3DC04F;
	}
	a.estimate_btn:hover{
		filter:brightness(1.1);
	}
	a.contact_btn{
		background:#3680C5;
	}
	a.contact_btn:hover{
		filter:brightness(1.2);
	}