.herofaqpage {
	text-align:center;
	width:80%;
	margin:0 auto;
}

.herofaqpage h1{
	text-align:left;
	padding-bottom:0.1em;
	border-bottom:2px solid #333;
	margin:0 auto;
}

.herofaqpage h2 {
	text-align:left;
	margin:1em auto;
	padding:0.2em 0.5em;
	background-color:#eee;
	border:none;
	color:#333;
}

#herofaqhead{
	width:100%;
	margin:4em auto 3em auto;
	border:2px solid #ddd;
	border-radius:5px;
	background-color:white;
}
#herofaqhead h2, #herofaqhead h3 {
	border:none;
	margin-top:1em;
}
#herofaqhead ul li{
	list-style:none;
}
#herofaqhead table {
	margin:0 auto;
	border:none;
	width:auto;
}
#herofaqhead table td {
	border:none;
	padding:unset;
	min-width:unset;
	text-align:left;
}
#herofaqbox{
	text-align:center;
}
#herofaqbox h2{
	text-align:left;
	margin:2em auto 1em auto;
	padding:0.2em 0.5em;
	background-color:#eee;
	color:#333;
}

#herocategorybox{
	background-color: white;
	padding:1em;
	margin:2em auto;
	text-align:center;
}

#herocategorybox h3{
	border:none;
}
#herocategorybox ul{
	display:flex;
	justify-content: space-between;
    align-items: center;
    flex-direction: column;
	margin-left:0;
	padding-left:0;
}
#herocategorybox ul li{
	list-style:none;
	width:80%;
	margin-bottom:20px;
	padding:0.5em 1em;
}
#herocategorybox ul li:first-child{
	margin-left:0;
}
#herocategorybox a, #herocategorybox a:link {
	display:block;
	text-decoration: none;
	color:#333;
	background-color:white;
	padding:0.5em 0;
	border: 1px solid #333;
	border-radius:10px;
	width:100%;
}
#herocategorybox a:hover {
	font-weight:800;
	background-color:#333;
	color:white;
	border-radius:10px;
}

#herofaq {
	margin: auto;
	text-align: center;
}

#herofaq .faq {
    margin: 0 auto 5px auto;
    border-bottom: 2px solid #d6dde3;
	text-align:left;
}

#herofaq .faq summary {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

#herofaq .faq summary::before {
    position: absolute;
    left: 0.2rem;
	top:0.7rem;
    font-weight: 600;
    font-size: 1.3em;
}

#herofaq .faq div.ans::before {
    position: absolute;
    left: 0.2rem;
	top:0.1rem;
    font-weight: 600;
    font-size: 1.3em;
	padding-top:0.6rem;
}

#herofaq .faq summary::before {
    color: #333;
    content: url(https://hem.co.jp/wp/wp-content/uploads/q-mark.png);
	vertical-align: middle;
	margin-right: 50px;
	margin-bottom:5px;
	transform:scale(1);
}

#herofaq .faq summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

#herofaq .faq[open] summary::after {
    transform: rotate(225deg);
}

#herofaq .faq div.ans {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    text-align:left;
    color: #333;
    transition: transform .5s, opacity .5s;
}

#herofaq .faq p {
    margin: 0;
}

#herofaq .faq a {
	text-decoration:none;
}

#herofaq .faq .caution {
	color:red;
	font-weight:800;
}
#herofaq .faq[open] div.ans {
    transform: none;
    opacity: 1;
	background-color:#f7f7f7;
	padding-top:1rem;
	margin-bottom:1rem;
}

#herofaq .faq div.ans::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: url(https://hem.co.jp/wp/wp-content/uploads/a-mark.png);
}

hr.dotted {
    border: none;
    border-top: 2px dotted #333;
	margin:2em auto 2em auto;
}

#heroinq a.iq {
	color:white;
	background-color:#0a44aa;
	border-radius: 1px;
	text-decoration: none;
	padding:24px 0;
	min-width:90%;
	text-align:center;
	display:inline-block;
	position:relative;
}

#heroinq a.iq:hover {
	background-color:#0c66cc;
	border-radius:5px
}

#heroinq a.iq::before {
    color: white;
    content: url(https://hem.co.jp/wp/wp-content/uploads/tri.png);
	position:absolute;
	transform:scale(0.8) translateX(-20px) translateY(3px);
}

#heroinq{
	margin:3em auto;
	padding:1em;
	border:2px solid #333;
	border-radius:2px;
}
#heroinq h3 {
	border:none;
}
#heroinq ul {
	text-align:left;
	list-style: none;
	width:90%;
	margin:2em auto 1em auto;
	padding-left:1.2em;
}
#heroinq ul li {
	text-indent: -1.2em;
}
#heroinq li::before {
	content:'※';
	padding-right:5px;
	display:inline;
}

#herogbtn a.gbtn {
	font-size:larger;
	color:white;
	background-color:#333;
	border-radius: 1px;
	text-decoration: none;
	padding:30px 0;
	margin:2em 0;
	width:100%;
	text-align:center;
	display:inline-block;
	position:relative;
}

#herogbtn a.gbtn:hover {
	background-color:#666;
	border-radius:5px
}

#herogbtn a.gbtn::before {
    color: white;
    content: url(https://hem.co.jp/wp/wp-content/uploads/tri.png);
	position:absolute;
	transform:scale(0.8) translateX(-20px) translateY(3px);
}

@media (min-width: 768px) {
	#herocategorybox ul{
		display:flex;
		justify-content: center;
		flex-direction: row;
		margin-left:0;
		padding-left:0;
	}

	#herocategorybox ul li{
		list-style:none;
		margin-left:20px;
		padding:0.5em 1em;
		width:30%;
	}

	#heroinq a.iq {
		padding:24px 0;
		min-width:400px;
	}
	
	.spcr {
		display:none;
	}
}

@media (min-width: 1024px) {
	#herocategorybox ul{
		display:flex;
		justify-content: center;
		flex-direction: row;
		margin-left:0;
		padding-left:0;
	}

	#herocategorybox ul li{
		list-style:none;
		margin-left:20px;
		padding:0.5em 1em;
		width:30%;
	}
	
}