@charset "utf-8";

/* ======================================================
 * family - index.css
 * ------------------------------------------------------
 * @media print, screen and (min-width: 768px)
 * - Override
 * - PageComponent
 * PC Media Queries
 * @media only screen and (max-width: 767px)
 * - Override
 * - PageComponent
 * SP Media Queries
 * Print
====================================================== */

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width: 768px) {
	/* ------------------------------------------------------
	 * Override
	------------------------------------------------------ */

	/* ------------------------------------------------------
	 * PageComponent
	------------------------------------------------------ */
		/* --- family-index-header --- */
		.family-index-header {
			position: relative;
			width: 100%;
			margin: 0 auto;
		}
		.family-index-header .header_head {
			position: relative;
			width: 100%;
			background: linear-gradient(0deg, rgb(213,237,255) 6%, rgb(86,186,234) 64%, rgb(30,172,229) 100%);
			z-index: 1;
		}
		.family-index-header .header_head .head_image {
			position: relative;
			left: 50%;
			width: 1920px;
			transform: translateX(-50%);
		}
		.family-index-header .header_head .header_button {
			position: absolute;
			top: 135px;
			left: 50%;
			transform: translateX(-50%);
		}
		.family-index-header .header_head .header_button > [class*="button_link"] {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 8px 65px;
			border-radius: 22px;
			border: 2px solid var(--sub-color7);
			background: var(--bg-color);
			color: var(--text-color);
			font-size: 15px;
			font-weight: 500;
		}
		.family-index-header .header_head .header_button > [class*="button_link"]:hover {
			border-color: var(--main-color);
			color: var(--main-color);
		}
		.family-index-header .header_head .header_button > .button_link-back::before {
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			left: 21px;
			width: 21px;
			height: 15px;
			background: url("/extlib/family/img/cmn_ic_001_01.svg") no-repeat 0 0;
			background-size: contain;
			background-blend-mode: multiply;
			-webkit-mask: url("/extlib/family/img/cmn_ic_001_01.svg") no-repeat 0 0;
			mask: url("/extlib/family/img/cmn_ic_001_01.svg") no-repeat 0 0;
			background-color: var(--main-color);
			transform-origin: center;
			transform: translateY(-50%) rotate(180deg);
		}
		.family-index-header .header_body {
			position: relative;
			width: 1200px;
			margin: -50px auto 0;
			z-index: 2;
		}

		/* --- family-index-lnav --- */
		.family-index-lnav {
			width: 100%;
		}
		.family-index-lnav .lnav_list {
			display: flex;
		}
		.family-index-lnav .lnav_list > li {
			position: relative;
			width: calc((100% - (24px * 4))/5);
			margin: 0 0 0 24px;
		}
		.family-index-lnav .lnav_list > li:first-child {
			margin-left: 0;
		}
		.family-index-lnav .lnav_list > li > [class*="list_button"] {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			padding: 8px 5px 98px;
			border-radius: 8px;
			border: 2px solid var(--main-color);
			background: var(--main-color);
			color: var(--bright-color);
			font-size: 20px;
			font-weight: 500;
			line-height: 1.6;
			text-align: center;
		}
		.family-index-lnav .lnav_list > li > [class*="list_button"]:hover {
			border-color: var(--hover-color);
			background: var(--hover-color);
		}
		.family-index-lnav .lnav_list > li > .list_button-blank .button_label::before {
			content: "";
			display: inline-block;
			position: relative;
			width: 13px;
			height: 12px;
			margin-right: 7px;
			background: url("/extlib/family/img/cmn_ic_001_02.svg") no-repeat 0 0;
			background-size: contain;
		}
		.family-index-lnav .lnav_list > li > [class*="list_button"] .button_icon {
			display: inline-block;
			position: absolute;
			bottom: 26px;
			left: 50%;
			width: 70px;
			height: 68px;
			transform: translateX(-50%);
		}
		.family-index-lnav .lnav_list > li > [class*="list_button"] .button_icon > img {
			object-fit: contain;
		}
		.family-index-lnav .lnav_list > li.is-current > [class*="list_button"]:not(:hover) {
			background: var(--bg-color);
			color: var(--main-color);
		}
		.family-index-lnav .lnav_list > li.is-current > .list_button-blank:not(:hover) .button_label::before {
			background-blend-mode: multiply;
			-webkit-mask: url("/extlib/family/img/cmn_ic_001_02.svg") no-repeat 0 0;
			mask: url("/extlib/family/img/cmn_ic_001_02.svg") no-repeat 0 0;
			background-color: var(--accent-color);
		}
		.family-index-lnav .lnav_list > li.has-nest::after {
			content: "";
			display: none;
			position: absolute;
			top: calc(100% + 6px);
			left: 50%;
			border-style: solid;
			border-width: 0 18px 19px;
			border-color: transparent transparent var(--sub-color);
			transform: translateX(-50%);
		}
		.family-index-lnav .lnav_list > li.has-nest.is-current::after {
			display: block;
		}
		.family-index-lnav .lnav_nest {
			display: none;
			width: 100%;
			margin: 24px 0 0;
			padding: 15px 36px;
			border-radius: 8px;
			background: var(--sub-color);
		}
		.family-index-lnav .lnav_nest .nest_list {
			display: flex;
			flex-flow: row wrap;
		}
		.family-index-lnav .lnav_nest .nest_list > li {
			width: calc((100% - (36px * 2))/3);
			margin: 15px 0 0 36px;
		}
		.family-index-lnav .lnav_nest .nest_list > li:nth-of-type(-n+3) {
			margin-top: 0;
		}
		.family-index-lnav .lnav_nest .nest_list > li:nth-of-type(3n+1) {
			margin-left: 0;
		}
		.family-index-lnav .lnav_nest .nest_list > li > [class*="nest_button"] {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			padding: 8px;
			border-radius: 22px;
			border: 2px solid var(--main-color);
			background: var(--main-color);
			color: var(--bright-color);
			font-size: 15px;
			font-weight: 500;
			line-height: 1.6;
			text-align: center;
		}
		.family-index-lnav .lnav_nest .nest_list > li > [class*="nest_button"]:hover {
			border-color: var(--hover-color);
			background: var(--hover-color);
		}
		.family-index-lnav .lnav_nest .nest_list > li.is-current > [class*="nest_button"]:not(:hover) {
			background: var(--bg-color);
			color: var(--main-color);
		}

}



/* ======================================================
 * PC Media Queries
====================================================== */
@media screen and (min-width: 768px) and (max-width: 1224px) {
}

/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width: 767px) {
	/* ------------------------------------------------------
	 * Override
	------------------------------------------------------ */
	.family-Main_content {
		padding-bottom: 0;
	}

	/* ------------------------------------------------------
	 * PageComponent
	------------------------------------------------------ */
	/* --- family-index-header --- */
	.family-index-header {
		position: relative;
		width: 100%;
		margin: 0 auto;
	}
	.family-index-header .header_head {
		position: relative;
		width: 100%;
		background: linear-gradient(0deg, rgb(157,213,245) 0%, rgb(86,186,234) 54%, rgb(30,172,229) 100%);
		z-index: 1;
	}
	.family-index-header .header_head .head_image {
		position: relative;
		text-align: center;
	}
	.family-index-header .header_head .header_button {
		position: absolute;
		top: 30.4vw;
		left: 50%;
		transform: translateX(-50%);
	}
	.family-index-header .header_head .header_button > [class*="button_link"] {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px 26px;
		border-radius: 18px;
		border: 1px solid var(--sub-color7);
		background: var(--bg-color);
		color: var(--text-color);
		font-size: 14px;
		font-weight: 500;
	}
	.family-index-header .header_head .header_button > .button_link-back {
		padding-left: 41px;
	}
	.family-index-header .header_head .header_button > .button_link-back::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 14px;
		width: 16px;
		height: 12px;
		background: url("/extlib/family/img/cmn_ic_001_01.svg") no-repeat 0 0;
		background-size: contain;
		background-blend-mode: multiply;
		-webkit-mask: url("/extlib/family/img/cmn_ic_001_01.svg") no-repeat 0 0;
		mask: url("/extlib/family/img/cmn_ic_001_01.svg") no-repeat 0 0;
		background-color: var(--main-color);
		transform-origin: center;
		transform: translateY(-50%) rotate(180deg);
	}
	.family-index-header .header_body {
	}

	/* --- family-index-lnav --- */
	.family-index-lnav {
		width: 100%;
	}
	.family-index-lnav .lnav_list {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		width: 100%;
		height: 70px;
		border-radius: 8px 8px 0 0;
		background: var(--bg-color);
		overflow: hidden;
		z-index: 101;
	}
	.family-index-lnav .lnav_list > li {
		position: relative;
		width: calc((100% - (1px * 4))/5);
		height: 100%;
		margin: 0 0 0 1px;
	}
	.family-index-lnav .lnav_list > li:first-child {
		margin-left: 0;
	}
	.family-index-lnav .lnav_list > li > [class*="list_button"] {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 3px 5px 36px;
		background: var(--main-color);
		color: var(--bright-color);
		font-size: 10px;
		font-weight: 500;
		line-height: 1.4;
		text-align: center;
	}
	.family-index-lnav .lnav_list > li > .list_button-blank .button_label::before {
		content: "";
		display: inline-block;
		position: relative;
		width: 9px;
		height: 8px;
		margin-right: 3px;
		background: url("/extlib/family/img/cmn_ic_001_02.svg") no-repeat 0 0;
		background-size: contain;
	}
	.family-index-lnav .lnav_list > li > [class*="list_button"] .button_icon {
		position: absolute;
		bottom: 4px;
		left: 50%;
		width: 31px;
		height: 30px;
		transform: translateX(-50%);
	}
	.family-index-lnav .lnav_list > li > [class*="list_button"] .button_icon > img {
		object-fit: contain;
	}
	.family-index-lnav .lnav_nest {
		display: none;
		width: 100%;
		padding: 10px 15px;
		background: var(--sub-color);
	}
	.family-index-lnav .lnav_nest .nest_list {
		display: flex;
		flex-flow: row wrap;
	}
	.family-index-lnav .lnav_nest .nest_list > li {
		width: calc((100% - (5px * 2))/3);
		margin: 5px 0 0 5px;
	}
	.family-index-lnav .lnav_nest .nest_list > li:nth-of-type(-n+3) {
		margin-top: 0;
	}
	.family-index-lnav .lnav_nest .nest_list > li:nth-of-type(3n+1) {
		margin-left: 0;
	}
	.family-index-lnav .lnav_nest .nest_list > li > [class*="nest_button"] {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 12px 5px;
		border-radius: 8px;
		border: 1px solid var(--main-color);
		background: var(--main-color);
		color: var(--bright-color);
		font-size: 12px;
		font-weight: 500;
		line-height: 1.4;
		text-align: center;
	}
	.family-index-lnav .lnav_nest .nest_list > li.is-current > [class*="nest_button"] {
		background: var(--bg-color);
		color: var(--main-color);
	}


}
/* ======================================================
 * SP Media Queries
====================================================== */
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 375px) {
}

/* ======================================================
 * Print
====================================================== */
@media print {
}