@charset "UTF-8";
/* AIO対策で追加するスタイル。既存CSSは変更せず、_aio ページ・souzoku.html からのみ読み込む */

/* 別ウィンドウで開くリンクの表示 */
.ext{
	display : inline-block;
	width : 1em;
	height : 1em;
	margin-left : .5em;
	background : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14L21 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sr-only{
	position : absolute;
	width : 1px;
	height : 1px;
	margin : -1px;
	padding : 0;
	overflow : hidden;
	clip : rect( 0 , 0 , 0 , 0 );
	white-space : nowrap;
	border : 0;
}

/*--------------------------------------------
HOME: サービスメニュー内の相続カード（#menu .list の既存デザインに合わせる）
---------------------------------------------*/

#menu .list.souzoku{
	display : block;
	margin-top : 60px;
}

#menu .list.souzoku > li{
	width : 100%;
	min-height : 0;
	background-color : #e3f3dc;
}

#menu .list.souzoku > li:before{
	content : none;
}

#menu .list.souzoku > li .header{
	background-color : #5fae45;
}

#menu .list.souzoku > li ul{
	width : 520px;
	margin-left : auto;
	margin-right : auto;
}

#menu .list.souzoku > li li:before{
	color : #5fae45;
}

#menu .list.souzoku .inner{
	display : flex;
	align-items : flex-start;
	justify-content : center;
	margin-top : 10px;
}

#menu .list.souzoku .body{
	width : 618px;
	margin-left : 12px;
}

#menu .list.souzoku .illust{
	position : relative;
	z-index : 1;
	width : 400px;
	height : auto;
	margin-top : -30px;
	margin-left : 20px;
}

#menu .list.souzoku .highlights{
	display : flex;
	justify-content : center;
	width : auto;
	gap : 12px;
	margin-top : 24px;
}

#menu .list.souzoku .highlights li{
	display : block;
	flex : 1;
	margin : 0;
	padding : 16px 0 14px;
	text-align : center;
	line-height : 1.4;
	background-color : #ffe97a;
}

#menu .list.souzoku .highlights li:before{
	content : none;
}

#menu .list.souzoku .highlights .label{
	display : block;
	font-size : 14px;
}

#menu .list.souzoku .highlights .num{
	display : block;
	margin-top : 4px;
	font-family : "Lato", sans-serif;
	font-size : 36px;
	font-weight : 700;
	line-height : 1.2;
	color : #2f7d1f;
}

#menu .list.souzoku .highlights .num small{
	margin-left : 2px;
	font-family : var( --fontFamily );
	font-size : 16px;
}

#menu .list.souzoku .highlights .num.txt{
	font-family : var( --fontFamily );
	font-size : 26px;
	line-height : 1.4;
}

/* 「サービス一覧」ボタン */
#menu .wrap > a{
	background-color : #64c424;
}

#menu .list.souzoku .body h4{
	text-align : left;
}

#menu .list.souzoku .catch{
	margin-top : 18px;
	font-size : 22px;
	font-weight : 700;
	line-height : 1.6;
	letter-spacing : 0;
	text-align : left;
}

#menu .list.souzoku .catch .line{
	display : block;
}

#menu .list.souzoku .catch em{
	font-style : normal;
	font-size : 1.45em;
	color : #2f7d1f;
	background : linear-gradient( transparent 62% , #ffe97a 62% );
}

#menu .list.souzoku .fn{
	font-family : var( --fontFamily );
	font-size : 12px;
	font-weight : 400;
	color : #333;
	margin-left : 2px;
	vertical-align : top;
}

#menu .list.souzoku .catch .fn{
	font-size : 13px;
}

#menu .list.souzoku .notes{
	margin-top : 14px;
	font-size : 12px;
	line-height : 1.6;
	color : #555;
}

#menu .list.souzoku .links{
	display : flex;
	justify-content : center;
	gap : 12px;
	margin-top : 30px;
}

#menu .list.souzoku .links a{
	flex : 1;
	width : auto;
	margin : 0;
	background-color : #64c424;
}

#menu .list.souzoku .links a:after{
	left : auto;
	right : 16px;
}

#menu .list.souzoku .links a + a{
	color : #5fae45;
	background-color : #fff;
	border : solid 2px #5fae45;
}

#menu .list.souzoku .links a + a:after{
	display : none;
}

/*--------------------------------------------
SOUZOKU
---------------------------------------------*/

#souzoku #section01 {
	position: relative;
	z-index: 1;
	margin-top: 60px;
	background-color: #f1fcd8;
}

#souzoku #section01 .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 56px;
	padding-bottom: 56px;
}

#souzoku #section01 .text {
	width: 660px;
}

#souzoku #section01 h3 {
	font-size: 26px;
	line-height: 1.5;
	letter-spacing: 0;
}

#souzoku #section01 p {
	margin-top: 24px;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0;
}

#souzoku #section01 .illust {
	width: 380px;
	height: auto;
	margin-top: -20px;
	margin-bottom: -90px;
}

#souzoku .fn {
	font-family: var(--fontFamily);
	font-size: 12px;
	font-weight: 400;
	margin-left: 2px;
	color: #333;
	vertical-align: top;
}

#souzoku #section01 .catch {
	margin: 0 0 22px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

#souzoku #section01 .catch .line {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	padding: 12px 70px 12px 20px;
	background-color: #ffe400;
}

#souzoku #section01 .catch .line + .line {
	margin-top: 14px;
}

#souzoku #section01 .catch em {
	font-style: normal;
	font-size: 2.1em;
	color: #1a1a1a;
}

#souzoku #section01 .catch .fn {
	position: absolute;
	top: 12px;
	right: 16px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: #333;
}

#souzoku .notes {
	margin-top: 14px;
	font-size: 12px;
	line-height: 1.6;
	color: #555;
	text-align: center;
}

#souzoku #section02 .wrap {
	padding-top: 72px;
	padding-bottom: 72px;
}

#souzoku .results {
	display: flex;
	justify-content: center;
	margin-top: 36px;
	text-align: center;
}

#souzoku .results li {
	width: 260px;
	margin: 0 15px;
	padding: 20px 0 18px;
	background-color: #ffe97a;
}

#souzoku .results .label {
	display: block;
	font-size: 14px;
	letter-spacing: 0;
}

#souzoku .results .num {
	display: block;
	margin-top: 6px;
	font-family: "Lato", sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	color: #2f7d1f;
}

#souzoku .results .num small {
	margin-left: 2px;
	font-family: var(--fontFamily);
	font-size: 18px;
}

#souzoku .results .num.txt {
	font-family: var(--fontFamily);
	font-size: 28px;
	line-height: 1.4;
}

#souzoku .services {
	display: flex;
	justify-content: space-between;
	margin-top: 44px;
}

#souzoku .services li {
	width: 350px;
	padding: 28px 24px 26px;
	background-color: #fff;
	box-shadow: 3px 3px #333;
}

#souzoku .services h4 {
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0;
}

#souzoku .services h4:after {
	content: "";
	display: block;
	height: 2px;
	margin: 12px 25px 0;
	background-color: #64c424;
}

#souzoku .services p {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0;
}

#souzoku #section03 {
	background-color: #f1fcd8;
}

#souzoku #section03 .wrap {
	padding-top: 56px;
	padding-bottom: 60px;
	text-align: center;
}

#souzoku #section03 h3 {
	font-size: 24px;
	letter-spacing: 0;
}

#souzoku #section03 .wrap > p {
	margin-top: 18px;
	font-size: 15px;
	line-height: 1.8;
	letter-spacing: 0;
}

#souzoku #section03 .wrap > p.buttons {
	margin-top: 30px;
}

#souzoku #section03 .buttons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 340px;
	height: 60px;
	margin: 0 auto;
	font-size: 16px;
	color: #fff;
	background-color: #75be5c;
}

#souzoku #section03 .tel a {
	font-family: "Lato", sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #57a026;
}
