/*---------------------------------
	pannelLayout start
---------------------------------*/
.pannelLayout{
	--cols: 3;
	--gapX: 2em;
	--gapY: 3em;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--gapY) var(--gapX);
	width: 100%;
}

.pannelLayoutItem{
	display: flex;
	flex-direction: column;
	gap: 1em 0;
	width: calc((100% - (var(--gapX) * (var(--cols) - 1))) / var(--cols));
}

.pannelLayoutItemImageWrapper{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1em var(--gapX);
}

.pannelLayoutItemImage{
	width: 100%;
	display: block;
	position: relative;
	overflow: hidden;
}

@media(min-width: 1025px){
	.pannelLayoutItem--col2{
		width: calc(((100% - (var(--gapX) * (var(--cols) - 1))) / var(--cols) * 2) + var(--gapX));
	}
	.pannelLayoutItem--col3{
		width: 100%;
	}
	.pannelLayoutItem--col2 .pannelLayoutItemImage{
		width: calc((100% - var(--gapX)) / 2);
	}
	.pannelLayoutItem--col3 .pannelLayoutItemImage{
		width: calc((100% - (var(--gapX) * 2)) / 3);
	}
}

@media(max-width: 1024px){
	.pannelLayoutItem--col2,
	.pannelLayoutItem--col3{
		width: 100%;
	}
	.pannelLayoutItem--col2 .pannelLayoutItemImage,
	.pannelLayoutItem--col3 .pannelLayoutItemImage{
		width: calc((100% - var(--gapX)) / 2);
	}
}

@media(max-width: 600px){
	.pannelLayoutItem--col2 .pannelLayoutItemImage,
	.pannelLayoutItem--col3 .pannelLayoutItemImage{
		width: 100%;
	}
}

.pannelLayoutItemImage:before{
	content: "";
	display: block;
	padding-top: 61.8%;
}

.pannelLayoutItemImage img{
	display: block;
	width: 100%;
	height 100%;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
}

.pannelLayoutItemContent{
	display: flex;
	flex-direction: column;
	gap: 0.5em 0;
	width: 100%;
}

.pannelLayoutItemTitle{
	width: 100%;
	font-weight: var(--fontWeightBold);
	font-size: 112.5%;
	margin: 0;
}

.pannelLayoutItemText{
	width: 100%;
	margin: 0;
}


@media(max-width: 1024px){
	.pannelLayout{
		--cols: 2;
	}
}

@media(max-width: 600px){
	.pannelLayout{
		--cols: 1;
		--gapY: 5em;
	}
}

/*---------------------------------
	floorMapLayout end
---------------------------------*/

/*---------------------------------
	feeTablesLayout start
---------------------------------*/
.feeTablesLayout{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.feeTablesLayout_item{
	width: calc(100% / 2 - 2%);
}

@media(max-width: 1024px){
	.feeTablesLayout{
		flex-direction: column;
		align-items: center;
	}

	.feeTablesLayout_item{
		width: 100%;
		max-width: 30em;
		margin-bottom: 2em;
	}
}

/*---------------------------------
	feeTablesLayout end
---------------------------------*/

/*---------------------------------
	infomationTableLayout start
---------------------------------*/
.infomationTableLayout{
	width: 90%;
	max-width: 45em;
	margin: 2em auto;
}

/*---------------------------------
	infomationTableLayout end
---------------------------------*/

/*---------------------------------
	basicTable--infomation start
---------------------------------*/

.basicTable--infomation > tbody > tr > th{
	width: 25%;
	font-weight: var(--fontWeightBold);
}

.basicTable--infomation > tbody > tr:first-of-type{
	border-top: none;
}

/*
.basicTable--infomation > tbody > tr:last-of-type{
	border-bottom: none;
}
*/

@media(max-width: 600px){
	.basicTable--infomation > tbody > tr > th{
		display: block;
		width: 100%;
		padding: 1em 1em 0.5em;
	}
	.basicTable--infomation > tbody > tr > td{
		display: block;
		width: 100%;
		padding: 0 1em 1em;
	}
}

/*---------------------------------
	basicTable--infomation end
---------------------------------*/

/*---------------------------------
	gmap--infomationAccess start
---------------------------------*/
.gmap--infomationAccess{
	padding-top: 25em;
}

/*---------------------------------
	gmap--infomationAccess end
---------------------------------*/

/*---------------------------------
	accessLayout start
---------------------------------*/
.accessLayout{
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
}

.accessLayout_map{
	flex-grow: 0;
	flex-shrink: 0;
	width: 30%;
	margin-right: 5%;
	margin-bottom: 2em;
}

.accessLayout_content{
	flex-grow: 1;
	flex-shrink: 1;
	margin-bottom: 2em;
}


@media(max-width: 1024px){
	.accessLayout{
		flex-direction: column;
		align-items: center;
	}

	.accessLayout_map{
		width: 100%;
		max-width: 20em;
	}

	.accessLayout_content{
		width: 100%;
		margin: 0;
	}
}

/*---------------------------------
	accessLayout end
---------------------------------*/

/*---------------------------------
	blogLayoutWrapper start
---------------------------------*/
.blogLayoutWrapper{
	padding: 3em 3em;
	background-color: #FFF;
	border: 2px solid #CCC;
}

@media(max-width: 1024px){
	.blogLayoutWrapper{
		padding: 2em 2em;
	}
}

@media(max-width: 600px){
	.blogLayoutWrapper{
		padding: 1em 1em;
	}
}

/*---------------------------------
	blogLayoutWrapper end
---------------------------------*/

/*---------------------------------
	contactTel start
---------------------------------*/
.contactTel{
	display: flex;
	justify-content: center;
}

.contactTel_inner{
	width: 100%;
	max-width: 40em;
	padding: 2.5em;
	background-color: var(--mainColor02_hex);
}

/*---------------------------------
	contactTel end
---------------------------------*/

/*---------------------------------
	basicTable--recruitApplication start
---------------------------------*/
.basicTable--recruitApplication th{
	width: 25%;
}

/*---------------------------------
	basicTable--recruitApplication end
---------------------------------*/

/*---------------------------------
	blogGall start
---------------------------------*/

.blogGall{
	--buttonColor: #223880;
	color: #FFF12B;
	font-size: 125%;
}

.blogGallButton{
	font-size: 125%;
}

/*---------------------------------
	blogGall end
---------------------------------*/