@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=RocknRoll+One&display=swap');

:root {
	--color-main: #31b09e;
	--color-link: #31b09e;
	--section-gap: 60px;
	--section-gap-s: 40px;
	--extra-font: "RocknRoll One";
}

@media screen and (min-width: 768px) {
	:root {
		--section-gap: 80px;
		--section-gap-s: 50px;
	}
}

@media screen and (min-width: 1280px) {
	:root {
		--section-gap: 100px;
	}
}



#lower-image {
	background: url(../../../images/main_image.jpg) center -150px;
	background-size: cover;
}

#main-contents {
	overflow: visible;
}



/* ----------------------------------------------------------------------- */

.PageHeader {
	width: 100%;
	margin-top: 20px;
	
	& .PageHeader__ttl {
		display: block;
		height: auto !important;
		position: relative;
		min-height: 245px;
		border: none;
		background: url(../images/main_image.jpg) center center;
		background-size: cover;
		text-align: center;
		
		& img {
			width: 100%;
			margin-top: 20px;
		}
	}
}

@media screen and (min-width: 768px) {
	.PageHeader {
		& .PageHeader__ttl {
			min-height: 500px;
			
			& img {
				margin: 40px 0;
			}
		
		}
	}
}

@media screen and (min-width: 1280px) {
	.PageHeader {
		width: calc(100% - 40px);
		
		& .PageHeader__ttl {
			height: 65vh !important;
		}
	}
}

/* ----------------------------------------------------------------------- */

.PageBody {
	margin-top: var(--section-gap);
	color: color-mix(in srgb, #333 60%, var(--color-main));
	
	& a {
		color: currentColor;
	}
}

/* ----------------------------------------------------------------------- */

.link-button {
	display: block !important;
	margin: 30px 0 0 !important;
	
	& li {
		width: 100%;
		margin: 0 !important;
	}
}

/* ----------------------------------------------------------------------- */


:where(.lower-contents .main-contents) h2 {
	&::before {
		background-image: url(../images/h_bg2.png);
		background-repeat: no-repeat;
		background-size: contain;
		border: none;
		transform: scale(1.3);
	}

}

:where(.lower-contents .main-contents) h2,
:where(.lower-contents .main-contents) h3 {
	margin-bottom: 1.5em;
	color: var(--color-main);
	font-weight: bold;
	font-size: 1.8rem;
}

@media screen and (min-width: 1280px) {
	:where(.contents-area) section h2,
	:where(.contents-area) section h3 {
		font-size: 2rem;
	}
}

#main-contents h2::before {
	border-color: currentColor;
}


/* ----------------------------------------------------------------------- */
/* section */

#lower-contents #main-contents section {
	margin-bottom: var(--section-gap);
	
	&:last-child {
		margin-bottom: 0;
	}
	
	& > *:last-child {
		margin-bottom: 0;
	}
}

/* ----------------------------------------------------------------------- */
/* sub-section */

#lower-contents #main-contents .sub-section {
	margin-bottom: var(--section-gap-s);
	
	&:last-child {
		margin-bottom: 0;
	}
	
	& > *:last-child {
		margin-bottom: 0;
	}
}

/* ----------------------------------------------------------------------- */
/* Utility */

.color-main {
	color: var(--color-main) !important;
}

.color-important {
	color: red !important;
}

.t-right {
	text-align: right !important;
}

.small {
	font-size: 1.15rem;
	line-height: 1.6;
	margin: 10px 0;
}

.btn {
	border-radius: 100px;
	&::before {
		border-radius: 100px;
	}
}

.disc-list {
	& > li {
		color: currentColor;
		font-size: inherit;
	}
}

.order-list {
	& > li {
		color: currentColor;
		font-size: inherit;
	}
}

.flex-list {
	display: flex;
	flex-direction: column;
	gap: 1em 20px;
	font-feature-settings: "palt";
	
	& li {
		margin-top: 0 !important;
	}
}

@media screen and (min-width: 1280px) {
	.flex-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	}
}

.section-ttl {
	position: relative;
	margin-bottom: 20px;
	padding-left: 1.7em;
	font-size: 1.75rem;
	font-weight: bold;
	color: var(--section-color) !important;
	
	&::before {
		position: absolute;
		content: "";
		left: 0;
		top: 0.2em;
		width: 1em;
		height: 1em;
		margin: auto;
		border: 0.25em solid var(--section-color, var(--color-main));
		border-radius: 50%;
		box-sizing: border-box;
	}
}

.section-subttl {
	margin-bottom: 20px;
	font-size: 1.5rem;
	font-weight: bold;
	color: currentColor;
}

@media screen and (min-width: 1280px) {
	.section-ttl {
		font-size: 2rem;
	}
	
	.section-subttl {
		font-size: 1.6rem;
	}
}


/*------------------------------------------------------------------------------------------------*/


.sectionHeader {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: calc(100% + 50px);
	margin: 0 -25px 50px;
	padding-block: 140px 60px;
	padding-inline: 25px;
	
	background-image: url(../images/h_bg1-1.jpg);
	background-repeat: repeat-x;
	background-position: top center;
	background-size: auto 30px;
}

@media screen and (min-width: 768px) {
	.sectionHeader {
		padding-block: 170px 80px;
		background-size: auto 40px;
	}
}

@media screen and (min-width: 1280px) {
	.sectionHeader {
		padding-block: 200px 100px;
		background-size: auto 50px;
	}
}


.sectionHeader__ttl {
	position: relative;
	font-size: 1.3rem;
	font-weight: bold;
	z-index: 2;
	color: var(--color-main);
	
	& > * {
		margin: 0;
	}
	
	& b {
		text-emphasis: "・" currentColor;
		text-emphasis-style: filled sesame;
	}
	
	& .subttl {
		
	}
	
	& .ttl {
		padding: 0;
		font-size: 180%;
		
		&::before {
			display: none;
		}
	}
}

@media screen and (min-width: 768px) {
	.sectionHeader__ttl {
		& .ttl {
			font-size: 240%;
		}
	}
}

@media screen and (min-width: 1280px) {
	.sectionHeader__ttl {
		& .ttl {
			font-size: 300%;
		}
	}
}


/* --------------------------------- */


.l-sbsStickyHeader {
	--section-color: var(--color-main);
	
	display: flex;
	flex-direction: column;
	gap: 30px;
	
	padding: 30px 0 0 30px;
	border-top: 1px solid var(--section-color);
	border-left: 1px solid var(--section-color);
	border-top-left-radius: 20px;
	text-align: justify;
	
	& h2 {
		font-size: 1.6rem !important;
		font-weight: 600;
		color: var(--section-color) !important;
		margin-bottom: 35px;
		padding: 0 !important;
		
		&::before {
			content: none !important;
		}
	}
	
	& img {
		display: block;
		width: 100%;
	}
	
	& .l-sbsStickyHeader__header {
		
		& > * {
			margin-bottom: 0;
		}
		
		& .ttl {
			display: flex;
			gap: 0.5em;
			
			& small {
				font-size: 1.2rem;
			}
		}
		
		& .num {
			border-inline-end: 1px solid;
			padding-inline-end: 1em;
			font-family: "Roboto", sans-serif;
			text-combine-upright: all;
		}
	}
	
	& .l-sbsStickyHeader__body {
		
	}
}

@media screen and (min-width: 768px) {
	.l-sbsStickyHeader {
		flex-direction: row;
		gap: 40px;
		padding: 40px 0 0 40px;
		border-top-left-radius: 30px;
		
		& .l-sbsStickyHeader__header {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			width: 3em;
			flex-shrink: 0;
			
			& .ttl {
				position: sticky;
				top: 2em;
				writing-mode: vertical-rl;
				font-feature-settings: "vpal";
				font-size: 2rem !important;
				text-orientation: upright;
				align-items: center;
			
				& small {
					font-size: 1.4rem;
				}
			}
			
			& .num {
				text-orientation: upright;
			}
		}
		
		& .l-sbsStickyHeader__body {
			flex-grow: 1;
		}
	}
}

@media screen and (min-width: 1280px) {
	.l-sbsStickyHeader {
		padding: 60px 0 0 30px;
		gap: 60px;
		
		& .l-sbsStickyHeader__header {
			& .ttl {
				font-size: 2.5rem !important;
			}
		}
	}
}


/*------------------------------------------------------------------------------------------------*/


.l-sbs {
	--gap: 20px;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	container-type: inline-size;
}

.l-sbs__img {
	margin-bottom: 10px;
	
	& img {
		display: block;
		width: 100%;
		border-radius: 5px;
	}
	
	& > *:first-child {
		margin-top: 0;
	}
	
	& > *:last-child {
		margin-bottom: 0;
	}
}

.l-sbs__txt {
	gap: 30px;
	
	& > *:first-child {
		margin-top: 0;
	}
	
	& > *:last-child {
		margin-bottom: 0;
	}
	
}


@media screen and (min-width: 500px) {
	
	.l-sbs {
		--gap: 30px;
		flex-direction: row;
		justify-content: space-between;
		flex-direction: row;
	}
	
	.l-sbs__img {
		width: calc(50% - var(--gap) / 2);
		margin: 0;
	}
	
	.l-sbs__txt {
		width: calc(50% - var(--gap) / 2);
	}
}

@media screen and (min-width: 768px) {
	
	.l-sbs {
		--gap: 40px;
	}
}

@media screen and (min-width: 1280px) {
	
	.l-sbs {
		--gap: 60px;
	}
}


/*------------------------------------------------------------------------------------------------*/


.sbsDescription {
	container-type: inline-size;
	
	& .sbsDescription__item {
		display: flex;
		flex-direction: column;
		gap: 1em;
		border-top: 1px solid rgba(0,0,0,0.2);
		padding-block: 1.5em;
	}
	
	& .sbsDescription__dt {
		& > *:first-child {
			margin-top: 0;
		}
		
		& > *:last-child {
			margin-bottom: 0;
		}
	}
	
	& .sbsDescription__dd {
		& > *:first-child {
			margin-top: 0;
		}
		
		& > *:last-child {
			margin-bottom: 0;
		}
	}
}

@container (min-width: 500px) {
	.sbsDescription {
		& .sbsDescription__item {
			flex-direction: row;
		}
		
		& .sbsDescription__dt {
			width: 30%;
			flex-shrink: 0;
		}
		
		& .sbsDescription__dd {
			flex-grow: 1;
		}
	}
}



/*------------------------------------------------------------------------------------------------*/
/* method */

.method {
	--basecolor: #ffca00;
	--section-color-assessment: color-mix(in srgb, var(--basecolor) 60%, var(--color-main));
	--section-color-stepup    : color-mix(in srgb, var(--basecolor) 30%, var(--color-main));
	--section-color-training  : color-mix(in srgb, var(--basecolor) 0%, var(--color-main));
}

.methodActivities {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(240px, 1fr));
	margin-bottom: var(--section-gap-s);
	gap: 40px;
	padding: 0;
	font-feature-settings: "palt";
	
	& .methodActivities__item {
		padding: 20px 0 0 20px;
		border-top: 1px solid rgba(0,0,0,0.2);
		border-left: 1px solid rgba(0,0,0,0.2);
		border-top-left-radius: 20px;
	}

	& dt {
		color: var(--color-main);
		font-size: 120%;
		font-weight: bold;
	}

	& dd {
		font-size: 95%;
	}
}

@media screen and (min-width: 1280px) {
	.methodActivities {
		
		& .methodActivities__item {
			padding: 30px 0 0 30px;
		}
	}
}

.methodKtPhase {
	&.-assessment, & .-assessment { --section-color: var(--section-color-assessment); }
	&.-stepup,     & .-stepup     { --section-color: var(--section-color-stepup); }
	&.-training,   & .-training   { --section-color: var(--section-color-training); }
	color: color-mix(in srgb, #333 80%, var(--section-color));
}

.methodKtPhaseFlow-outer {
	overflow-x: auto;
	margin-left: -25px;
	margin-right: -25px;
	
	& .methodKtPhaseFlow {
		display: -webkit-flex;
		display: flex;
		width: calc((100% - 50px) * 2);
		margin-left: 25px;
	
		&::after {
			position: absolute;
			content: '';
			width: calc(100% - 50px);
			height: 100%;
			top: 0;
			right: -25px;
		}
	}
	
	& .methodKtPhaseFlow__item {
		width: calc(100% - 50px);
		list-style-type: none !important;
		margin: 0 !important;
	}
}

@media screen and (min-width: 768px) {
	
	.methodKtPhaseFlow-outer {
		margin: 0;
	
		& .methodKtPhaseFlow {
			width: 100%;
			margin-left: 0;
		
			&::after {
				content: none;
			}
		}
	}
}


/* --------------------------------- */

.methodKtPhaseFlow {
	
	position: relative;
	gap: 20px;
	
	& .methodKtPhaseFlow__item {
		color: var(--section-color);
		border-radius: 10px;
		position: relative;
		list-style-type: none !important;
		margin: 0 !important;
		border: 1px solid var(--section-color);
		display: none;
		container-type: inline-size;
		
		&::before {
			position: absolute;
			content: "";
			width: 15px;
			height: 15px;
			border-style: solid;
			border-width: 1px 1px 0 0;
			position: absolute;
			right: -14px;
			top: calc(50% - 10px);
			z-index: 2;
			border-color: var(--section-color);
			border-radius: 0 4px 0 0;
			background-color: #fff;
			transform: translateX(-5px) rotate(45deg);
		}
		
		&.-disable { --section-color: #ccc; }
		
		.step &::before {
			display: none;
		}
		
		&:last-child::before {
			display: none;
		}
	}
	
	
	&.-assessment.-active { --section-color: var(--section-color-assessment); }
	&.-stepup.-active     { --section-color: var(--section-color-stepup); }
	&.-training.-active   { --section-color: var(--section-color-training); }
	
	& .methodKtPhaseFlow__item.-active {
		display: block;
		opacity: 1;
		background-color: color-mix(in srgb, var(--section-color) 100%, white);
		border-width: 2px;
		color: #fff;
		
		&::before {
			border-width: 2px 2px 0 0;
			right: -15px;
			background-color: var(--section-color);
		}
		
		&.-no-bg {
			background-color: transparent;
			color: var(--section-color);
			&::before {
				background-color: #fff;
			}
		}
	}
	
	& .title {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 5em;
		padding: 20px 15px 10px;
		text-align: center;
	
		& h3 {
			margin: 0 0 0.25em !important;
			font-size: 1.6rem !important;
			color: currentColor;
			font-feature-settings: "palt";
		}
		
		& p {
			font-size: 1.2rem !important;
			font-weight: 600;
			text-align: center !important;
			color: currentColor;
			line-height: 1.5 !important;
			font-feature-settings: "palt";
		}
	}
	
	& .detail {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 10px;
		padding: 0 10px 10px 10px;
		
		& li {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-grow: 1;
			font-size: 1.2rem !important;
			line-height: 1.3 !important;
			margin: 0 !important;
			padding: 10px;
			box-sizing: border-box;
			color: currentColor;
			text-align: center;
			font-weight: bold;
			border-radius: 25px;
			list-style-type: none !important;
			
			&::before {
				position: absolute;
				inset: auto auto 0;
				content: "";
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 3px 0 3px 12px;
				z-index: 2;
				transform: rotate(90deg) translateX(50%);
				border-color: transparent transparent transparent currentColor;
			}
			
			&:last-child::before {
				content: none;
			}
		}
	
		& strong {
			font-size: 110%;
			font-style: italic;
		}
	}
}

@media screen and (min-width: 1024px) {
	.methodKtPhaseFlow {
		display: flex;
		
		& .title {
			min-height: 6em;
			padding-top: 30px;
		}
		
		& .methodKtPhaseFlow__item {
			display: block;
			width: calc(100% / 3);
			
			.step &:not(:last-child)::before {
				display: block;
			}
		}
	}
}

@media screen and (min-width: 1280px) {
	.methodKtPhaseFlow {
		& .title h3 {
			font-size: 2.0rem !important;
		}
		
		& .title p {
			font-size: 1.4rem !important;
		}
	}
}

@container (min-width: 300px) {
	.methodKtPhaseFlow {
		& .detail {
			flex-direction: row;
			justify-content: space-between;
			gap: 10px;
			padding: 0 10px 10px 10px;
			
			& li {
				min-height: 50px;
				width: calc(33.3% - 5px);
				
				&::before {
					right: -9px;
					top: calc(50% - 3px);
					transform: rotate(0deg);
				}
			}
		}
	}
}


/* --------------------------------- */


.methodAssessmentSummary {
	margin: 25px 0;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 10px;
	
	& .methodAssessmentSummary__item {
		padding: 30px;
		
		&:last-child {
			margin-bottom: 0;
		}
	
		& dt {
			color: #fff;
			font-size: 1.6rem;
			font-weight: 600;
			text-align: center;
			line-height: 1;
			margin-bottom: 0 !important;
			padding: 0 15px 15px;
			color: var(--section-color);
		}
	
		& dd {
			line-height: 1.5;
			text-align: center;
			padding: 0 15px;
		}
	
		&:first-child {
			position: relative;
	
			&::before,
			&::after {
				content: "";
				display: block;
				width: 2px;
				height: 30px;
				background-color: #999;
				position: absolute;
				bottom: -15px;
				right: 0;
				left: 0;
				margin: auto;
			}
		
			&::after {
				transform: rotate(90deg);
			}
		}
	}
}

@media screen and (min-width: 768px) {
	
	.methodAssessmentSummary {
		display: flex;
		justify-content: space-between;
		
		& .methodAssessmentSummary__item {
			width: calc(50% - 40px);
		
			&:first-child:before,
			&:first-child:after {
				top: calc(50% - 15px);
				bottom: auto;
				right: 0;
				left: auto;
			}
		}
	}
}

/* --------------------------------- */

.ktbc {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 20px;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 10px;
	container-type: inline-size;
	
	.ktbc__ttl {
		font-weight: bold;
	}
	
	.ktbc__main {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}
	
	.ktbc__img {
		
	}
	
	.ktbc__txt {
		& .section {
			display: flex;
			flex-direction: column;
			gap: 0.5em;
			margin-bottom: 1em;
			line-height: 2;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
		
		& hr {
			margin-block: 1em 1.5em;
		}
		
		& .ttl {
			font-weight: bold;
		}
		
		& .-a { --ktbc-color: #E18383;}
		& .-b { --ktbc-color: #D0A67F;}
		& .-c { --ktbc-color: #9DBD6B;}
		& .-d { --ktbc-color: #6EBDA9;}
		
		/*& .-a { --ktbc-color: color-mix(in srgb, #333 80%, var(--section-color));}
		& .-b { --ktbc-color: color-mix(in srgb, #333 80%, var(--section-color));}
		& .-c { --ktbc-color: color-mix(in srgb, #333 80%, var(--section-color));}
		& .-d { --ktbc-color: color-mix(in srgb, #333 80%, var(--section-color));}*/
		
		& .circle {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 1.7em;
			height: 1.7em;
			border-radius: 20px;
			background-color: var(--ktbc-color);
			color: #fff;
			font-family: "Roboto", sans-serif;
			font-weight: bold;
			font-size: 80%;
		}
		
		& ul {
			list-style: disc;
			padding-left: 1.5em;
		}
	}
	
	& cite {
		display: block;
		font-size: 1.1rem;
		line-height: 1.6;
	}
}

@media screen and (min-width: 768px) {
	.ktbc {
		padding: 30px;
	}
}

@media screen and (min-width: 1024px) {
	.ktbc {
	}
}

@container (min-width: 900px) {
	.ktbc {
		
		& .ktbc__main {
			flex-direction: row;
			align-items: flex-end;
			gap: 30px;
		}
		
		& .ktbc__img {
			width: 70%;
		}
		
		& .ktbc__txt {
			width: 30%;
		}
	}
}
/* --------------------------------- */

.methodKtPhase.-stepup {
	
	& h5 {
		font-weight: 600;
	}
	
	& .stepupSkill {
		display: flex;
		flex-direction: column;
		gap: 30px;
		counter-reset: skillnum;
	}
	
	& .stepupSkill__item {
		counter-increment: skillnum;
		display: flex;
		flex-direction: column;
		gap: 20px;
		border-top: 1px solid rgba(0,0,0,0.2);
		border-left: 1px solid rgba(0,0,0,0.2);
		border-top-left-radius: 20px;
		padding: 30px 0 0 30px;
	}
	
	& .stepupSkill__img {
		
	}
	
	& .stepupSkill__header {
		display: flex;
		flex-direction: column;
		gap: 5px;
		
		& > * {
			margin: 0;
		}
	}
	
	& .stepupSkill__num {
		display: flex;
		align-items: baseline;
		gap: 0.25em;
		font-weight: bold;
		font-size: 90%;
		
		&::before {
			display: block;
			content: "クチタベスキル";
			color: var(--section-color);
		}
		
		&::after {
			display: block;
			content: counter(skillnum);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 1.7em;
			height: 1.7em;
			border-radius: 20px;
			background-color: var(--section-color);
			color: #fff;
			font-family: "Roboto", sans-serif;
			font-weight: bold;
			font-size: 80%;
		}
	}
	
	& .stepupSkill__ttl {
		font-size: 140%;
	}
	
	& .stepupSkill__subttl {
		
	}
	
	& .stepupSkill__txt {
		text-align: justify;
	}
}

@media screen and (min-width: 768px) {
	.methodKtPhase.-stepup {
		& .stepupSkill {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
			gap: 30px;
		}
	}
}

@media screen and (min-width: 1280px) {
	.methodKtPhase.-stepup {
		& .stepupSkill {
			gap: 40px;
		}
	}
}


/*------------------------------------------------------------------------------------------------*/



.wrapContentBlock {
	display: flex;
	flex-direction: column;
	gap: 30px;
	counter-reset: skillnum;
	
	& .wrapContentBlock__item {
		counter-increment: skillnum;
		display: flex;
		flex-direction: column;
		gap: 20px;
		border-top: 1px solid rgba(0,0,0,0.2);
		border-left: 1px solid rgba(0,0,0,0.2);
		border-top-left-radius: 20px;
		padding: 30px 0 0 30px;
		
		& > * {
			margin: 0;
		}
	}
	
	& .wrapContentBlock__img {
		
	}
	
	& .wrapContentBlock__ttl {
		position: relative;
		font-weight: bold;
		font-size: 120%;
		
		& .num {
			position: absolute;
			right: 0;
			top: 0;
			display: block;
			font-size: 250%;
			font-weight: 100;
			font-family: "Roboto", sans-serif;
			line-height: 1;
			color: var(--color-main);
			opacity: 0.75;
		}
		
		& .sub {
			color: var(--color-main);
			display: block;
			font-size: 1.3rem;
			
			&::after {
				content: "──";
			}
		}
		
		& .main {
			display: block;
		}
	}
}

@media screen and (min-width: 768px) {
	.wrapContentBlock {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
		gap: 30px;
		
		&.-nowrap {
			display: flex;
		}
		
		& .wrapContentBlock__ttl {
			font-size: 150%;
		}
	}
}

@media screen and (min-width: 1280px) {
	.wrapContentBlock {
		gap: 40px;
		
		& .wrapContentBlock__ttl {
			font-size: 180%;
		}
	}
}


/*------------------------------------------------------------------------------------------------*/


.innnerLinkBlock {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	
	& .innnerLinkBlock__item {
		flex-grow: 1;
		font-size: 120%;
		font-weight: bold;
		
		& a {
			display: flex;
			gap: 0.5em;
			align-items: center;
			padding: 0.5em 1em;
			text-decoration: none;
			border-radius: 5px;
			border: 2px solid;
			color: var(--color-main);
			
			&:hover {
				color: #000;
			}
		}
		
		& svg {
			stroke-width: 2;
		}
	}
}

@media screen and (min-width: 768px) {
	.innnerLinkBlock {
		flex-direction: row;
		gap: 2em;
	}
}


/*------------------------------------------------------------------------------------------------*/


.aboutIntro {
	& .aboutIntro__ttl {
		max-width: 700px;
		margin-bottom: 1.5em;
		font-weight: normal;
		font-size: 150%;
	}
}

@media screen and (min-width: 768px) {
	.aboutIntro {
		& .aboutIntro__ttl {
			font-size: 200%;
		}
	}
}

@media screen and (min-width: 1280px) {
	.aboutIntro {
		& .aboutIntro__ttl {
			font-size: 240%;
		}
	}
}



.aboutAttempt {
	
}

.aboutAttempt__item {
	border-top: 1px solid rgba(0,0,0,0.2);
	border-left: 1px solid rgba(0,0,0,0.2);
	border-top-left-radius: 20px;
	padding: 30px 0 0 30px;
}



/*------------------------------------------------------------------------------------------------*/


.application-type {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	gap: 20px;
	
	& .type-item {
		display: flex;
		flex-direction: column;
		place-content: center;
		gap: 10px;
		padding: 30px 0 0 30px;
		border-top-left-radius: 20px;
		border-top: dotted 2px var(--color-main);
		border-left: dotted 2px var(--color-main);
		line-height: 1.5;
		
		& dt {
			font-size: 1.7rem;
			font-weight: 600;
			text-align: center;
			margin: 0;
		}
		
		& dd {
			display: flex;
			flex-direction: column;
			gap: 10px;
			
			& > * {
				margin-bottom: 0;
			}
		}
		
		& p {
			text-align: center;
		}
	}
	
	& .phone-number {
		font-size: 2.4rem;
		font-weight: bold;
		font-family: "Roboto", sans-serif;
		line-height: 1;
		color: var(--color-main);
	}
}

@media screen and (min-width: 768px) {
	.application-type {
		justify-content: space-between;
		flex-direction: row;
		gap: 40px;
		
		& .type-item {
			width: calc(50% - 10px);
			margin-bottom: 0;
		}
		
		& .phone-number {
			font-size: 3rem;
		}
	}
}


/* ------------------------------------------------------------------------*/


#flow {
	
	& .flow-item {
		margin-bottom: 0;
		padding-top: 30px;
		padding-bottom: 30px;
		
		&::after {
			width: 30px;
			height: 30px;
			bottom: -24px;
			padding: 10px;
			background-color: #fff;
			filter: hue-rotate(-35deg);
			z-index: 1;
			background-size: 50%;
			background-position: center;
		}
	}
	
	& .flow-item__ttl {
		display: flex;
		align-items: center;
		gap: 0.5em;
		
		& .num {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 1.7em;
			height: 1.7em;
			color: #fff;
			font-family: "Roboto", sans-serif;
			font-weight: bold;
			font-size: 80%;
			
			background-image: url(../images/h_bg2.png);
			background-repeat: no-repeat;
			background-size: contain;
			border: none;
			padding: 3px;
		}
		
		& .lbl {
			font-size: 1.6rem;
		}
	}
}

@media screen and (min-width: 768px) {
	#flow {
		& .type-item {
			padding-top: 50px;
			padding-bottom: 50px;
		}
		
		& .flow-item__ttl {
			& .lbl {
				font-size: 1.6rem;
			}
		}
	}
}


/* ------------------------------------------------------------------------*/


.resultOutline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	text-align: center;
	gap: 20px;
	width: 100%;
	flex-direction: row;
	justify-content: space-around;
	color: var(--color-main);
	
	& .resultOutline__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1 0;
		gap: 10px;
		border-top: 1px solid rgba(0,0,0,0.2);
		border-left: 1px solid rgba(0,0,0,0.2);
		border-top-left-radius: 20px;
		padding-top: 40px;
	}
	
	& .resultOutline__img {
		display: grid;
		place-items: center;
		width: 100%;
		max-width: 60px;
		
		& img {
			width: 100%;
			height: auto;
		}
	}
	
	& .resultOutline__ttl {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 0;
		line-height: 1.4;
		font-weight: bold;
	}
	
	& .resultOutline__num {
		display: flex;
		justify-content: center;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 0;
		line-height: 1.2;
		font-feature-settings: "palt";
		font-family: "Roboto",'Yu Gothic','YuGothic','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
		font-weight: bold;
		
		& .num {
			font-size: 200%;
			letter-spacing: -0.05em;
		}
		
		& .ext {
			font-size: 140%;
		}
		
		& .sub {
			font-size: 90%;
		}
	}
}

@media screen and (min-width: 500px) {
	.resultOutline {
		
		& .resultOutline__ttl {
			height: auto;
			font-size: 120%;
		}
	}
}

@media screen and (min-width: 768px) {
	.resultOutline {
		
		& .resultOutline__num {
			& .num {
				font-size: 350%;
			}
		
			& .ext {
				font-size: 180%;
			}
			
			& .sub {
				font-size: 110%;
			}
		}
	}
}

@media screen and (min-width: 1024px) {
	.resultOutline {
		gap: 20px;
		
		& .resultOutline__num {
			& .num {
				font-size: 500%;
			}
		
			& .ext {
				font-size: 220%;
			}
			
			& .sub {
				font-size: 140%;
			}
		}
	}
}




.resultGraph__ttl {
	font-weight: bold;
}

.resultGraph__outro {
	& > * {
		margin: 0;
	}
	
	& p {
		margin-inline: auto;
		font-size: 130%;
		font-feature-settings: "palt";
		text-align: center;
	}
	
	& b {
		display: inline-block;
		font-size: 200%;
		line-height: 1.4;
	}
	
	& .bg {
		position: relative;
		
		&::before {
			position: absolute;
			inset: auto 0 -0.3em;
			display: block;
			content: "";
			width: 100%;
			height: 0.3em;
			background-image: url(../images/h_bg1-1.jpg);
			background-position: center bottom;
			background-size: auto 100%;
			background-repeat: repeat-x;
			mix-blend-mode: multiply;
		}
	}
}

@media screen and (min-width: 768px) {
	.resultGraph__outro {
		font-size: 160%;
		font-family: var(--extra-font), serif;
		font-weight: 700;
		font-style: normal;
		
		& b {
			font-size: 240%;
		}
	}
}

.resultGraph {
	
	& .resultGraph__table {
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin: 0;
		padding: 0;
		font-size: 1.2rem;
	}
	
	& .resultGraph__row {
		position: relative;
		display: flex;
		align-items: baseline;
		line-height: 1.4;
		
		&::before {
			content: "";
			position: absolute;
			display: block;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			border-bottom: 1px solid rgba(0,0,0,0.2);
			z-index: 1;
		}
		
		&:nth-child(1) { --mix: 0%; }
		&:nth-child(2) { --mix: 20%; }
		&:nth-child(3) { --mix: 40%; }
		&:nth-child(4) { --mix: 60%; }
		&:nth-child(5) { --mix: 80%; }
		&:nth-child(6) { --mix: 100%; }
		&:nth-child(7) { --mix: 100%; }
		&:nth-child(8) { --mix: 100%; }
		
		&.disabled .resultGraph__bar {
			background-color: rgba(0,0,0,0.2);
		}
		&.disabled .resultGraph__img {
			& img {
				opacity: 0.3;
			}
		}
	}

	& .resultGraph__img {
		position: relative;
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
		flex-grow: 1;
		gap: 5px;
		
		&::before {
			position: absolute;
			inset: 0;
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			background-color: color-mix(in srgb, #41668e var(--mix), var(--color-main));
			mix-blend-mode: screen;
		}
		
		& img {
			width: 13px;
			height: auto;
		}
	}
	
	& .resultGraph__val {
		flex-shrink: 0;
		text-align: left;
		font-weight: bold;
		font-family: "Roboto",'Yu Gothic','YuGothic','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
		line-height: 1;
		
		& .num {
			font-size: 160%;
			letter-spacing: -0.05em;
		}
	}
	
	& dt {
		position: relative;
		width: 140px;
		margin: 0;
		padding: 0;
		text-align: left;
		z-index: 2;
		font-weight: bold;
		font-size: 1.3rem;
	}
	
	& .strong {
		& dt {
			font-size: 1.8rem;
		}
		
		& .num {
			font-size: 240%;
		}
	}
	
	& dd {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		margin: 0;
		padding: 0;
		font-size: 120%;
	}
}

@media screen and (min-width: 768px) {
	.resultGraph {
		
		& .resultGraph__table {
			gap: 20px;
		}
		
		& dt {
			width: 160px;
			flex-shrink: 0;
		}
		
		& dd {
			flex-direction: row;
		}
		
		& .strong {
			& dt {
				font-size: 2rem;
			}
			
			& .resultGraph__val .num {
				font-size: 400%;
			}
		}
		
		& .resultGraph__img {
			& img {
				width: 1.25%;
				height: auto;
			}
		}
		
		& .resultGraph__val {
			width: 160px;
		}
	}
}





/* ------------------------------------------------------------------------*/

.staffList {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 20px;
	margin-bottom: var(--section-gap-s);
	
	.staffList__item {
		display: flex;
		gap: 20px;
		border-top: 1px solid rgba(0,0,0,0.2);
		border-left: 1px solid rgba(0,0,0,0.2);
		border-top-left-radius: 20px;
		padding-top: 20px;
		padding-left: 20px;
	}
	
	.staffList__img  {
		width: 100px;
		
		& img {
			width: 100%;
			height: auto;
			max-width: 120px;
			border-radius: 5px;
		}
	}
	
	.staffList__txt {
		width: calc(100% - 100px);
		text-align: justify;
	}
	
	.staffList__name {
		display: flex;
		align-items: baseline;
		flex-direction: column;
		gap: 5px;
		margin-bottom: 1.5em;
		line-height: 1.2;
		
		& .ttl {
			font-size: 80%;
			font-weight: normal;
		}
		
		& .name {
			font-size: 120%;
			font-weight: bold;
		}
	}
	
	.staffList__des {
		font-feature-settings: "palt";
	}
}

@media screen and (min-width: 1024px) {
	.staffList {
		flex-direction: row;
		justify-content: space-between;
		gap: 40px;
		
		& .staffList__item {
			width: calc(33.333% - 30px);
			padding-top: 30px;
			padding-left: 30px;
		}
	}
}


.staffTeam {
	position: relative;
	
	& .img {
		display: block;
		width: 40px;
		margin: 0 auto;
		filter: drop-shadow(8px 8px 8px rgba(0,0,0,0.2));
	}
	
	& .caption {
		min-height: 2.8em;
		margin-block: 0.75em 0;
		font-size: 1.1rem;
		font-weight: bold;
		line-height: 1.4;
		text-align: center;
	}
	
	& .staffTeam__jobs {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px 0;
		padding: 40px 0 0;
		
		&::before {
			position: absolute;
			inset: 0;
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			background-color: var(--color-main);
			opacity: 0.15;
			z-index: 0;
			border-radius: 50%;
		}
	}
		
	& .staffTeam__job {
		width: 20%;
	}
	
	& .staffTeam__user {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 20%;
		margin: 0 auto;
	}
	
	& .staffTeam__icon {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
		
		& svg {
			width: 60px;
			height: 60px;
			transition: all 0.5s ease-in-out;
		}
	}
}

@media screen and (min-width: 768px) {
	.staffTeam {
		& .img {
			display: block;
			width: 50%;
			max-width: 80px;
		}
			
		& .caption {
			font-size: 1.3rem;
		}
		
		& .staffTeam__jobs {
			
		}
		
		& .staffTeam__job {
			width: 12%;
		}
	}
}

@media screen and (min-width: 1280px) {
	.staffTeam {
		display: flex;
		gap: 20px;
		
		& .staffTeam__jobs {
			padding: 60px 0;
			gap: 40px 10px;
		}
		
		& .staffTeam__icon {
			display: flex;
			flex-direction: column;
			width: fit-content;
			margin: 0;
			
			& svg {
				width: 90px;
				height: 90px;
				transform: rotate(-90deg);
			}
		}
		
		& .staffTeam__user {
			width: fit-content;
			min-width: 120px;
			
			.img {
				width: 100%;
				max-width: 100px;
			}
		}
	}
}


/* ----------------------------------------------------------------------- */


.kuchikara-list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	width: 100%;
	box-sizing: border-box;

	& li {
		display: block;
		width: 100%;
		box-sizing: border-box;
		margin: 0;
		
		&:nth-child(n+7) {
			display: none;
		}
	}
	
	& a {
		position: relative;
		display: grid;
		grid-template-columns: 120px 1fr;
		gap: 0 15px;
		padding: 20px;
		border-top: 1px solid rgba(0,0,0,0.2);
		border-left: 1px solid rgba(0,0,0,0.2);
		border-top-left-radius: 20px;
		padding: 30px 0 0 30px;
		text-decoration: none;
		transition: all 0.5s ease-out;
		
		&:hover {
			color: var(--color-main);
			border-color: var(--color-main);
			transition-duration: 0.15s;
			
			& img {
				opacity: 0.7;
			}
		}
	}
	
	& figure {
		grid-row: 1 / 3;
		position: relative;
		overflow: hidden;
		
		& img {
			display: block;
			transition: all 0.2s ease-out;
			width: 100% !important;
			height: auto !important;
			border-radius: 5px;
		}
	}
	
	& .ttl {
		grid-column: 2 / -1;
		grid-row: 2;
		position: relative;
		vertical-align: top;
		overflow: hidden;
		font-weight: bold;
		font-feature-settings: "palt";
	}
	
	& time {
		grid-column: 2;
		grid-row: 1;
		display: block;
		color: currentColor;
		font-weight: bold;
		font-size: 1.2rem;
	}
}

@media screen and (min-width: 1280px) {
	.kuchikara-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
		
		& a {
			grid-template-columns: 160px 1fr;
			gap: 0 25px;
		}
	}
}