@charset "utf-8";

/* ======================================================
 * family/about - about.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
	------------------------------------------------------ */
	/* --- about-character --- */
	.about-character {
		display: flex;
		margin: 45px auto 0;
	}
	.about-character .character_item {
		width: calc((100% - (24px * 2)) / 3);
		margin: 24px 0 0 24px;
		padding: 12px 22px;
		border-radius: 8px;
		background: var(--sub-color);
	}
	.about-character .character_item:nth-of-type(-n+3) {
		margin-top: 0;
	}
	.about-character .character_item:nth-of-type(3n+1) {
		margin-left: 0;
	}
	.about-character .character_item .item_head > *:first-child,
	.about-character .character_item .item_body > *:first-child {
		margin-top: 0;
	}
	.about-character .character_item .item_head {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.about-character .character_item .item_head::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 176px;
		height: 176px;
		border-radius: 50%;
		background: var(--bg-color);
		transform: translate(-50%,-50%);
		z-index: 1;
	}
	.about-character .character_item .character_image {
		position: relative;
		width: 176px;
		z-index: 2;
	}
	.about-character .character_item .item_body {
		margin-top: 16px;
	}
	.about-character .character_item .character_name {
		color: var(--text-color);
		font-size: 22px;
		font-weight: 500;
		line-height: 1.4;
		text-align: center;
	}
	.about-character .character_item .character_description {
		margin-top: 12px;
		color: var(--text-color);
		font-size: 15px;
		line-height: 2;
	}
	.about-character .character_item .character_description rt {
		font-size: 10px;
	}

	/* --- about-description --- */
	.about-description {
		margin: 60px 0 0;
	}
	.about-description .description_list {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.about-description .description_list > :first-child {
		margin-top: 0!important;
	}
	.about-description .description_list > li {
		display: flex;
		align-items: flex-start;
		margin-top: 16px;
		padding-bottom: 16px;
		border-bottom: 2px solid var(--sub-color8);
	}
	.about-description .description_list > li .description_head > :first-child,
	.about-description .description_list > li .description_body > :first-child {
		margin-top: 0!important;
	}
	.about-description .description_list > li .description_head {
		flex-shrink: 0;
		width: 16.4%;
		margin-right: 24px;
	}
	.about-description .description_list > li .description_body {
		width: 100%;
	}
	.about-description .description_title {
		color: var(--text-color);
		font-size: 15px;
		font-weight: bold;
		line-height: 1.6;
	}
	.about-description .description_text {
	}
	.about-description .description_person {
		display: flex;
		align-items: flex-start;
	}
	.about-description .description_person .person_name {
		flex-shrink: 0;
		width: 10%;
		margin-right: 12px;
	}
	.about-description .description_person .person_detail {
		width: 100%;
	}
	.about-description .description_note {
		margin: 16px 0 0;
		padding: 0;
		list-style: none;
	}
	.about-description .description_note > :first-child {
		margin-top: 0!important;
	}
	.about-description .description_note > li {
		position: relative;
		margin: .5em 0 0;
		padding-left: 1.23em;
		font-size: 13px;
	}
	.about-description .description_note > li > .note_mark {
		position: absolute;
		top: 0;
		left: 0;
	}

}



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

/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width: 767px) {
	/* ------------------------------------------------------
	 * Override
	------------------------------------------------------ */

	/* ------------------------------------------------------
	 * PageComponent
	------------------------------------------------------ */
	/* --- about-character --- */
	.about-character {
		margin: 31px auto 0;
	}
	.about-character .character_item {
		width: 100%;
		margin: 20px 0 0;
		padding: 15px 18px;
		border-radius: 8px;
		background: var(--sub-color);
	}
	.about-character .character_item:first-child {
		margin-top: 0;
	}
	.about-character .character_item .item_head > *:first-child,
	.about-character .character_item .item_body > *:first-child {
		margin-top: 0;
	}
	.about-character .character_item .item_head {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.about-character .character_item .item_head::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 158px;
		height: 158px;
		border-radius: 50%;
		background: var(--bg-color);
		transform: translate(-50%,-50%);
		z-index: 1;
	}
	.about-character .character_item .character_image {
		position: relative;
		width: 158px;
		z-index: 2;
	}
	.about-character .character_item .item_body {
		margin-top: 18px;
	}
	.about-character .character_item .character_name {
		color: var(--text-color);
		font-size: 16px;
		font-weight: 500;
		line-height: 1.2;
		text-align: center;
	}
	.about-character .character_item .character_description {
		margin-top: 8px;
		color: var(--text-color);
		font-size: 14px;
		line-height: 2;
	}
	.about-character .character_item .character_description rt {
		font-size: 10px;
	}

	/* --- about-description --- */
	.about-description {
		margin: 32px 0 0;
	}
	.about-description .description_list {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.about-description .description_list > :first-child {
		margin-top: 0!important;
	}
	.about-description .description_list > li {
		margin-top: 14px;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--sub-color8);
	}
	.about-description .description_list > li .description_head > :first-child,
	.about-description .description_list > li .description_body > :first-child {
		margin-top: 0!important;
	}
	.about-description .description_list > li .description_head {
		margin-bottom: 4px;
	}
	.about-description .description_list > li .description_body {
	}
	.about-description .description_title {
		color: var(--text-color);
		font-size: 14px;
		font-weight: bold;
		line-height: 1.6;
	}
	.about-description .description_text {
	}
	.about-description .description_person {
		display: flex;
		align-items: flex-start;
	}
	.about-description .description_person + .description_person {
		margin-top: 5px;
	}
	.about-description .description_person .person_name {
		flex-shrink: 0;
		width: 25.4%;
		margin-right: 12px;
	}
	.about-description .description_person .person_detail {
		width: 100%;
	}
	.about-description .description_note {
		margin: 5px 0 0;
		padding: 0;
		list-style: none;
	}
	.about-description .description_note > :first-child {
		margin-top: 0!important;
	}
	.about-description .description_note > li {
		position: relative;
		margin: .5em 0 0;
		padding-left: 14px;
		font-size: 12px;
	}
	.about-description .description_note > li > .note_mark {
		position: absolute;
		top: 0;
		left: 0;
	}

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

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