@charset "UTF-8";
/* =========================================================
mv
========================================================= */
#mv {
	background-image: url(../img/mv-photo.jpg);
}
/* =========================================================
snav
========================================================= */
#snav {}
#snav ul {
	width: 880px;
	padding: 4em 0;
}
#snav ul:after {
	content: "";
	display: block;
	clear: both;
}
#snav ul li {
	float: left;
	padding: 0.7em 10px;
	width: 33.3333%;
}
#snav ul li a {
	position: relative;
	width: 100%;
	font-size: 90%;
	font-weight: bold;
	padding: 0.5em 0;
	letter-spacing: 0.1em;
	display: block;
	border-radius: 50px;
	background: url(/common/img/common-arw1-blue.svg) no-repeat right 12px center / 6px auto, #fff;
	text-indent: 0.1em;
}
#snav ul li a::after {
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -1px;
	right: -1px;
		background: linear-gradient(to right, #001D6E, #00A0C1) 100%;
	content: "";
	z-index: -1;
	border-radius: 50px;
}
#snav ul li a:hover {
	background: url(/common/img/common-arw1-white.svg) no-repeat right 12px center / 6px auto, none;
	color: #fff;
	transition: background 0.2s ease, color 0.2s ease;
}
/* =========================================================
list
========================================================= */
#list {
	padding: 0 0 5em;
}
#list section {
	border-top: 1px solid #ddd;
	width: 980px;
	padding: 4em 80px 4em 360px;
	text-align: justify;
	min-height: 330px;
	position: relative;
}
#list section::before {
	content: "";
	display: block;
	width: 225px;
	height: 225px;
	position: absolute;
	top: 4em;
	left: 80px;
	background: url(../img/list1.jpg) no-repeat center / cover;
	border: 1px solid #ddd;
}
#list section h2 {
	color: #001D6E;
	font-size: 115%;
	padding: 0 0 1em;
	letter-spacing: 0.2em;
}
#list section p {
	font-size: 90%;
	line-height: 2;
}
#list #inheritance::before {
	background-image: url(../img/list1.jpg);
}
#list #adult-guardianship::before {
	background-image: url(../img/list2.jpg);
}
#list #divorce::before {
	background-image: url(../img/list3.jpg);
}
#list #debt-problem::before {
	background-image: url(../img/list4.jpg);
}
#list #traffic-accident::before {
	background-image: url(../img/list5.jpg);
}
#list #real-estate-trouble::before {
	background-image: url(../img/list6.jpg);
}
#list #criminal-case::before {
	background-image: url(../img/list7.jpg);
}
#list #sme-support::before {
	background-image: url(../img/list8.jpg);
}
#list #confidence-trick::before {
	background-image: url(../img/list9.jpg);
}
#list #other {
	min-height: auto;
}
#list #other::before {
	display: none;
}
#list #other h2 {
	color: #000;
	position: absolute;
	top: 4em;
	left: 80px;
	width: 225px;
	text-align: center;
	letter-spacing: 0.4em;
	padding: 1.5em 0 0;
}
@media screen and (max-width: 768px) {
	/*============================
#contents
============================*/
	#contents {
		padding: 0 0 100px;
	}
	/*============================
#mv
============================*/
	#contents #mv {
		padding: 0 0 31%;
	}
	#contents .page-ttl {
		width: auto;
		padding: 1.5em 0 0.5em;
	}
	/*============================
#snav
============================*/
	#contents #snav {
		width: 95%;
	}
	#contents #snav ul {
		width: auto;
		padding: 2em 0;
		display: flex;
		flex-wrap: wrap;
		gap: 10px 2%;
	}
	#contents #snav ul:after {}
	#contents #snav ul li {
		width: 49%;
		padding: 0em 0;
	}
	#contents #snav ul li a {
		font-size: 85%;
		background: url(/common/img/common-arw1-blue.svg) no-repeat right 7px center / 6px auto, #fff;
		font-feature-settings: "palt";
		letter-spacing: 0;
	}
	#contents #snav ul li a::after {}
	#snav ul li a:hover {
		background: url(/common/img/common-arw1-blue.svg) no-repeat right 7px center / 6px auto, none;
		color: #000;
		transition: background 0.2s ease, color 0.2s ease;
	}
	/*============================
#list
============================*/
	#contents #list {
		padding: 0px 0 0em;
	}
	/*============================
#inheritance
============================*/
	#contents #list #inheritance {
		width: 90%;
		padding: 30px 0;
	}
	#list section::before {
		content: "";
		display: block;
		width: 200px;
		height: 200px;
		position: relative;
		top: 0;
		left: 0;
		background: url(../img/list1.jpg) no-repeat center / cover;
		border: 1px solid #ddd;
		margin: 0 auto 30px;
	}
	#list section h2 {
		font-size: 140%;
		letter-spacing: 0;
		padding: 0 0 0.5em;
	}
	#list section p {
		font-size: 100%;
		font-feature-settings: "palt";
		line-height: 1.8;
	}
	/*============================
#adult-guardianship
============================*/
	#contents #list #adult-guardianship {
		width: 90%;
		padding: 30px 0;
	}
	/*============================
#divorce
============================*/
	#contents #list #divorce {
		width: 90%;
		padding: 30px 0;
	}
	/*============================
#debt-problem
============================*/
	#contents #list #debt-problem {
		width: 90%;
		padding: 30px 0;
	}
	/*============================
#traffic-accident
============================*/
	#contents #list #traffic-accident {
		width: 90%;
		padding: 30px 0;
	}
	/*============================
#real-estate-trouble
============================*/
	#contents #list #real-estate-trouble {
		width: 90%;
		padding: 30px 0;
	}
	/*============================
#criminal-case
============================*/
	#contents #list #criminal-case {
		width: 90%;
		padding: 30px 0;
	}
	/*============================
#sme-support
============================*/
	#contents #list #sme-support {
		width: 90%;
		padding: 30px 0;
	}
	/*============================
#confidence-trick
============================*/
	#contents #list #confidence-trick {
		width: 90%;
		padding: 30px 0;
	}
	/*============================
#other
============================*/
	#contents #list #other {
		width: 90%;
		padding: 30px 0;
	}
	#list #other h2 {
		position: relative;
		top: initial;
		left: initial;
		width: auto;
		text-align: left;
		letter-spacing: 0.4em;
		padding: 0 0 1em;
	}
	#contents #list #other p {
		padding-left: 1em;
		text-indent: -1em;
	}
}