@charset "UTF-8";

/* --------------------------------------------
POLICY
--------------------------------------------- */
#policy h3{
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 700;
	line-height : 1.3;
	color : var( --color01 );
	letter-spacing : .05em;
}
#policy p{
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#policy{
		padding-block : calc( 50 var( --remBase ) );
	}
	#policy p{
		font-size : 1.4rem;
	}
	#policy h3{
		font-size : 3.2rem;
	}
	#policy p + h3{
		margin-top : calc( 24 var( --remBase ) );
	}
	#policy h3 + p{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#policy{
		padding-block : calc( 50 var( --remBase ) );
	}
	#policy p{
		font-size : 2rem;
	}
	#policy h3{
		font-size : 3.2rem;
	}
	#policy p + h3{
		margin-top : calc( 24 var( --remBase ) );
	}
	#policy h3 + p{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1960px ) , print{
	#policy{
		padding-inline : calc( 200 var( --percentBase ) );
	}
}
@media screen and ( width >= 1960px ){
	#policy{
		padding-inline : calc( ( 100% - 1560px ) / 2 );
	}
}

/* --------------------------------------------
SCHOOL
--------------------------------------------- */
#school .tablist button{
	display : grid;
	place-items : center;
	height : 100%;
}
#school .tablist button[aria-selected="true"]{
	color : white;
	background-color : var( --color0102 );
}
#school .tablist button[aria-selected="false"]{
	color : var( --base );
	background-color : var( --color0102 );
	background-color : #f1f2ed;
}
#school .tabpanels h2{
	display : grid;
	place-items : center;
	font-weight : 500;
	line-height : 1.3;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : var( --color01 );
}
#school .tabpanels h3{
	font-weight : 500;
	line-height : 1.3;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#school .tabpanels li li li{
	line-height : 1.5;
}
@media screen and ( width <= 750px ){
	#school{
		padding-block : calc( 50 var( --remBase ) );
	}
	#school .tablist{
		display : grid;
		grid-template-columns : repeat( 2 , 50% );
		grid-auto-rows : calc( 40 var( --remBase ) );
	}
	#school .tablist li{
		width : 100%;
		height : 100%;
	}
	#school .tablist button{
		width : 100%;
		font-size : 1.4rem;
		line-height : 1.7;
	}
	#school .tabpanels{
		margin-top : calc( 80 var( --remBase ) );
	}
	#school .tabpanels h2{
		height : calc( 74 var( --remBase ) );
		font-size : 3.2rem;
	}
	#school .tabpanels > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#school .tabpanels > li > ul{
		margin-top : calc( 40 var( --remBase ) );
	}
	#school .tabpanels > li > ul > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#school .tabpanels h3{
		font-size : 4.8rem;
	}
	#school .tabpanels ul ul{
		margin-top : calc( 32 var( --remBase ) );
	}
	#school .tabpanels li li li{
		font-size : 1.4rem;
	}
	#school .tabpanels li li li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#school{
		padding-block : calc( 50 var( --remBase ) );
	}
	#school .tablist{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 12 var( --percentBase ) );
		justify-content : center;
	}
	#school .tablist li{
		height : calc( 40 var( --remBase ) );
	}
	#school .tablist button{
		padding-inline : calc( 2 / 1.6em );
		font-size : 2rem;
		line-height : 1.5;
	}
	#school .tabpanels{
		margin-top : calc( 80 var( --remBase ) );
	}
	#school .tabpanels h2{
		height : calc( 120 var( --remBase ) );
		font-size : 4.8rem;
	}
	#school .tabpanels > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#school .tabpanels > li > ul{
		margin-top : calc( 40 var( --remBase ) );
	}
	#school .tabpanels > li > ul > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#school .tabpanels h3{
		font-size : 4.8rem;
	}
	#school .tabpanels ul ul{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 440 var( --percentBase ) ) );
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
	#school .tabpanels li li li{
		font-size : 2rem;
	}
	#school .tabpanels .column02{
		grid-column : span 2;
	}
}
@media ( hover : hover ){
	#school .tablist button[aria-selected="false"]:hover{
		color : white;
		background-color : var( --color01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#school .tablist button{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}

/*---------------*/
.contents-body p , .contents-body li {
	line-height: 2.0;
}
@media screen and ( width <= 750px ){
	.contents-body p , .contents-body li {
		font-size: 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	.contents-body p , .contents-body li {
		font-size: 2rem;
	}
}


/* --------------------------------------------
corporate
--------------------------------------------- */
#company-section01 , #company-section03 {
	background: var( --color0103 );
}

@media screen and ( width <= 750px ){
	#company section {
		padding-top: calc( 40 var( --remBase ) );
	}
	#company-section01 {
		margin-top: calc( 40 var( --remBase ) );
		padding-top: calc( 40 var( --remBase ) );
		padding-bottom: calc( 40 var( --remBase ) );
	}
	#company .title01 {
		margin-bottom: calc( 24 var( --remBase ) );
		text-align: center;
	}
	#company .sec-inner {
		max-width: 1440px;
		margin: auto;
	}
	#company .title02 {
		
	}
	#company .title02 {
		font-size: 2.2rem;
		margin-bottom: calc( 8 var( --remBase ) );
		margin-top: calc( 40 var( --remBase ) );
		color: var( --color01 );
	}
		.title02 span {
			font-size: 1.6rem;
		}
	#effort {
	}
		#effort .title01 {
		}
		#effort .title01 {
		}
	.company-info {
	}
		.company-info .title01 {
			text-align: left;
		}
		.company-info li:nth-of-type(1) {
			margin-bottom: calc( 40 var( --remBase ) );
		}
		.company-info li:nth-of-type(2) {
		}
	.datalist01 div {
		display: flex;
		border-bottom: 1px solid #ececec;
		padding-bottom: calc( 8 var( --remBase ) );
		margin-bottom: calc( 8 var( --remBase ) );
	}
		.datalist01 div dt {
			width: 8em;
		}
		.datalist01 div dd {
			width: calc(100 - 9em);
		}
	.message-box {
	}
		.message-box p {
			margin-bottom: 1em;
			
		}
		.message-box picture img {
			width: 100%;
			height: auto;
		}
	.message-box {
	}
	#company-section03  {
		margin-top: calc( 40 var( --remBase ) );
		padding-top: calc( 40 var( --remBase ) );
		padding-bottom: calc( 40 var( --remBase ) );
	}
	#company-section03 .list {
		display: flex;
		flex-wrap: wrap;
		column-gap: 1em;
		grid-row-gap: 1em;
	}
		#company-section03 .list li {
			min-width: calc(50% - .5em);
		}
	.pc-text-center {
	}
}
@media screen and ( width > 750px ) , print{
	#company section {
		padding-top: calc( 80 var( --remBase ) );
	}
	#company-section01 {
		margin-top: calc( 120 var( --remBase ) );
		padding-top: calc( 120 var( --remBase ) );
		padding-bottom: calc( 120 var( --remBase ) );
	}
	#company .title01 {
		margin-bottom: calc( 24 var( --remBase ) );
		text-align: center;
	}
	#company .sec-inner {
		max-width: 1440px;
		margin: auto;
	}
	#company .title02 {
		
	}
	#company .title02 {
		font-size: 2.8rem;
		margin-bottom: calc( 16 var( --remBase ) );
		margin-top: calc( 40 var( --remBase ) );
		color: var( --color01 );
	}
		.title02 span {
			font-size: 2.0rem;
		}
	#effort {
		display: flex;
		column-gap: calc( 40 var( --remBase ) );
	}
		#effort .title01 {
			width: calc(50% - calc( 40 var( --remBase ) ));
		}
		#effort .title01 {
			display: flex;
			width: 50%;
		}
	.company-info {
		display: flex;
		column-gap: calc( 40 var( --remBase ) );
	}
		.company-info .title01 {
			text-align: left;
		}
		.company-info li:nth-of-type(1) {
			width:  calc(50% - calc( 20 var( --remBase ) ));
		}
		.company-info li:nth-of-type(2) {
			width:  calc(50% - calc( 20 var( --remBase ) ));
		}
	.datalist01 div {
		display: flex;
		border-bottom: 1px solid #ececec;
		padding-bottom: calc( 8 var( --remBase ) );
		margin-bottom: calc( 8 var( --remBase ) );
	}
		.datalist01 div dt {
			width: 8em;
		}
		.datalist01 div dd {
			width: calc(100 - 9em);
		}
	.message-box {
		display: flex;
		column-gap: calc( 24 var( --remBase ) );
		align-items: center;
	}
		.message-box p:nth-of-type(1) {
			margin-bottom: 1em;
			
		}
		.message-box picture img {
			width: calc( 300 var( --remBase ) );
			height: auto;
		}
	.message-box {
	}
	#company-section03  {
		margin-top: calc( 120 var( --remBase ) );
		padding-top: calc( 120 var( --remBase ) );
		padding-bottom: calc( 120 var( --remBase ) );
	}
	#company-section03 .list {
		display: flex;
		flex-wrap: wrap;
		column-gap: 2em;
		grid-row-gap: 1em;
	}
		#company-section03 .list li {
			width: 18em;
		}
	.pc-text-center {
		text-align: center;
	}
}

.error-inner {
	min-height: 40vh;
	padding: 0 0 4em 0 ;
	margin: auto;
	max-width: 1200px;

	a {
		text-decoration: underline;
	}
}

.sitemap-contents {
	display: flex;
	column-gap: calc( 40 var( --remBase ) );
	grid-row-gap: calc( 40 var( --remBase ) );
}

@media screen and ( width <= 750px ){
	.sitemap-contents {
		flex-direction: column;
		padding: calc( 40 var( --remBase ) ) 0 ;
	}
	h3  {
		font-size: 2rem;
		font-weight: 400;
		margin-bottom: calc( 16 var( --remBase ) );
		border-bottom: 2px solid var( --color01 );
		padding-bottom: calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.sitemap-contents {
		justify-content: space-between;
		padding: calc( 80 var( --remBase ) ) 0 ;
	}
	h3  {
		font-size: 2.8rem;
		font-weight: 400;
		margin-bottom: calc( 16 var( --remBase ) );
		border-bottom: 2px solid var( --color01 );
		padding-bottom: calc( 16 var( --remBase ) );
	}
}