@charset "UTF-8";

/* ======================================================
 * about_profile_group_index.css
 * ------------------------------------------------------
 * @media print, screen and (min-width: 768px)
 * - Override
 * - Common
 * - Page Component
 * PC Media Queries
 * - Override
 * - Page Component
 * @media only screen and (max-width: 767px)
 * - Override
 * - Common
 * - Page Component
====================================================== */

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width: 768px) {
	/* ------------------------------------------------------
	 * Override
	------------------------------------------------------ */
	
	/* ------------------------------------------------------
	 * Common
	------------------------------------------------------ */
	
	/* ------------------------------------------------------
	 * Page Component
	------------------------------------------------------ */
	/* ----- formation_layout ----- */
	.formation_layout {
		display: flex;
		justify-content: center;
		margin: 0;
	}
	.formation_layout_inner {
		width: 486px;
		max-width: 100%;
	}
	.formation_layout > *:last-child {
		margin-bottom: 0!important;
	}
	.formation_layout_inner > *:last-child {
		margin-bottom: 0!important;
	}
	.formation_layout_head {
		margin-bottom: 1.5rem;
		padding-right: 48px;
	}
	.formation_layout_body {
		margin-bottom: 1rem;
		padding-left: 48px;
	}
	.formation_button_wrap > *:last-child {
		margin-bottom: 0!important;
	}
	.formation_button {
		margin-bottom: 1.5rem;
	}
	.formation_button_link {
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
		border-radius: 0;
		background-color: #e4ebf5;
		width: 100%;
		color: #fff;
		line-height: 1.75;
		text-align: left;
		padding: 1.2rem 2.7rem 1.1rem;
		box-shadow: 0 3px 3px -2px rgba(0,0,0,.14),0 3px 4px 0 rgba(0,0,0,.14);
		transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
		z-index: 2;
	}
	.formation_button_link:not(.type-nolink) .formation_button_title {
		position: relative;
		padding-left: .6rem;
		text-decoration: underline;
	}
	.formation_button_link:not(.type-nolink) .formation_button_title::before {
		position: absolute;
		display: inline-block;
		top: .55em;
		left: -3px;
		transform: rotate(45deg);
		width: 8px;
		height: 8px;
		-webkit-backface-visibility: hidden;
		border-top: 1px solid #0096b4;
		border-right: 1px solid #0096b4;
		vertical-align: middle;
		content: "";
	}
	.formation_button_link.padding-type01 {
		padding: 1.4rem 2.7rem 1.2rem;
	}
	.formation_button_link:not(.type-nolink):hover {
		box-shadow: none;
	}
	.formation_button_link:not(.type-nolink):hover .formation_button_title{
		color: #014099;
		text-decoration: none;
	}
	.formation_button_link.type-nolink {
		box-shadow: none;
	}
	.formation_button_body {
		width: 100%;
	}
	.formation_button_title {
		font-size: 1rem;
		font-weight: 700;
		color: #333333;
	}
	.formation_button_note {
		margin: 0;
		position: relative;
		padding-left: 1.2rem;
		font-size: .875rem;
		line-height: 1.4;
		color: #666666;
	}
	.formation_button_note_mark {
		position: absolute;
		top: 0;
		left: 0;
	}
	.formation_layout_body .formation_button {
		position: relative;
	}
	.formation_layout_body .formation_button::before {
		position: absolute;
		top: 50%;
		right: calc(100% + 24px);
		width: 2px;
		height: 200%;
		transform: translateY(-50%);
		background-color: #4472c4;
		z-index: 1;
		content: "";
	}
	.formation_layout_body .formation_button_wrap > .formation_button:last-child::before {
		top: calc(-50% + 1px);
	}
	.formation_layout_body .formation_button::after {
		position: absolute;
		top: 50%;
		right: 100%;
		width: 25px;
		height: 2px;
		transform: translateY(-50%);
		background-color: #4472c4;
		z-index: 1;
		content: "";
	}

}

/* ======================================================
 * PC Media Queries
====================================================== */
@media screen and (min-width: 768px) and (max-width: 1280px) {
	/* ------------------------------------------------------
	 * Override
	------------------------------------------------------ */
	
	/* ------------------------------------------------------
	 * Common
	------------------------------------------------------ */
	
	/* ------------------------------------------------------
	 * Page Component
	------------------------------------------------------ */
}

/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width: 767px) {
	/* ------------------------------------------------------
	 * Override
	------------------------------------------------------ */
	
	/* ------------------------------------------------------
	 * Common
	------------------------------------------------------ */
	
	/* ------------------------------------------------------
	 * Page Component
	------------------------------------------------------ */
	/* ----- formation_layout ----- */
	.formation_layout {
		display: flex;
		justify-content: center;
		margin: 0;
	}
	.formation_layout_inner {
		width: 100%;
	}
	.formation_layout > *:last-child {
		margin-bottom: 0!important;
	}
	.formation_layout_inner > *:last-child {
		margin-bottom: 0!important;
	}
	.formation_layout_head {
		margin-bottom: 1.3125rem;
	}
	.formation_layout_body {
		margin-bottom: 1rem;
		padding-left: 48px;
	}
	.formation_button_wrap > *:last-child {
		margin-bottom: 0!important;
	}
	.formation_button {
		margin-bottom: 1.3125rem;
	}
	.formation_button_link {
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
		border-radius: 0;
		background-color: #e4ebf5;
		width: 100%;
		color: #fff;
		line-height: 1.75;
		text-align: left;
		padding: 1rem 2.3rem .8rem 2.1rem;
		box-shadow: 0 3px 3px -4px rgba(0,0,0,.14),0 3px 4px 0 rgba(0,0,0,.14);
		transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
		z-index: 2;
	}
	.formation_button_link.padding-type01 {
		padding: 1rem 2.3rem .9rem 2.1rem;
	}
	.formation_button_link:not(.type-nolink) .formation_button_title {
		position: relative;
		padding-left: .6rem;
		text-decoration: underline;
	}
	.formation_button_link:not(.type-nolink) .formation_button_title::before {
		position: absolute;
		display: inline-block;
		top: .55em;
		left: -3px;
		transform: rotate(45deg);
		width: 8px;
		height: 8px;
		-webkit-backface-visibility: hidden;
		border-top: 1px solid #0096b4;
		border-right: 1px solid #0096b4;
		vertical-align: middle;
		content: "";
	}
	.formation_button_link.type-nolink {
		box-shadow: none;
	}
	.formation_button_body {
		width: 100%;
	}
	.formation_button_title {
		font-size: .875rem;
		font-weight: 700;
		color: #333333;
	}
	.formation_button_note {
		margin: 0;
		position: relative;
		padding-left: .8rem;
		font-size: .765625rem;
		line-height: 1.5;
		color: #666666;
	}
	.formation_button_note_mark {
		position: absolute;
		top: 0;
		left: 0;
	}
	.formation_layout_body .formation_button {
		position: relative;
	}
	.formation_layout_body .formation_button::before {
		position: absolute;
		top: 50%;
		right: calc(100% + 24px);
		width: 2px;
		height: 200%;
		transform: translateY(-50%);
		background-color: #4472c4;
		z-index: 1;
		content: "";
	}
	.formation_layout_body .formation_button_wrap > .formation_button:last-child::before {
		top: calc(-50% + 1px);
	}
	.formation_layout_body .formation_button::after {
		position: absolute;
		top: 50%;
		right: 100%;
		width: 25px;
		height: 2px;
		transform: translateY(-50%);
		background-color: #4472c4;
		z-index: 1;
		content: "";
	}
}