@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');

/* About Styles */


/* Greeting
------------------------------------------------------------- */

.img_portrait {
	width: 150px;
	height: auto;
	margin: 0 20px 10px 0;
	padding-top: 5px;
	float: left;
	clear: left;
}


/* Outline
------------------------------------------------------------- */

dl.outline_list {
	margin: 0 0 20px 0;
	padding: 0;
	background-color: #f9f5ed;
	border-bottom: 1px solid #d5d5d5;
}

dl.outline_list dt {
	font-weight: 500;
	width: 7em;
	padding: 6px 15px 6px 0;
	text-align: right;
	white-space: nowrap;
	float: left;
	clear: left;
	border-top: 1px solid #d5d5d5;
}

dl.outline_list dd {
	width: calc(100% - 7em);
	margin-left: 7em;
	padding: 6px 10px 6px 15px;
	background-color: #fff;
	border-top: 1px solid #d5d5d5;
}



/* History
------------------------------------------------------------- */

dl.history_list {
	margin: 0 0 20px 0;
	padding: 0;
	background-color: #f9f5ed;
	border-bottom: 1px solid #d5d5d5;
}

dl.history_list dt {
	font-weight: 500;
	width: 8.5em;
	padding: 6px 0 6px 15px;
	text-align: left;
	white-space: nowrap;
	float: left;
	clear: left;
	border-top: 1px solid #d5d5d5;
}

dl.history_list dd {
	width: calc(100% - 8.5em);
	margin-left: 8.5em;
	padding: 6px 10px 6px 15px;
	background-color: #fff;
	border-top: 1px solid #d5d5d5;
}



/* Soshiki
------------------------------------------------------------- */

.soshiki_cont {
	margin: 0 0 20px 0;
}

.soshiki_cont::after {
	content:"";
	display:block;
	clear:both;
}

.soshiki_cont .soshiki_img {
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}

.soshiki_cont .soshiki_img img {
	max-width: 100%;
}

.soshiki_cont ul.icon_list {
	width: fit-content;
	margin: 0 auto;
}



/* What's MICE
------------------------------------------------------------- */

.mice_box {
	margin: 40px auto;
	width: 100%;
	max-width: 1080px;
}

.mice_box > div {
	width: 100%;
	margin-bottom: 40px;
	padding: 15px 0 0 15px;
	position: relative;
}

.mice_box > div > h3 {
	font-family: "BIZ UDPGothic", "Noto Sans JP", "メイリオ", "Meiryo", Osaka, sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-size: 2.3rem;
	letter-spacing: -0.02em;
	line-height: 1;
	white-space: nowrap;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff;
}

.mice_box > div > h3 span:first-child {
	display: inline-block;
	font-size: 1.7em;
	padding-top: 0.2em;
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.02em;
	text-align: center;
	border-radius: 0.8em;
	border: 2px solid #fff;
}

.mice_box > div > h3 span:last-child {
	display: block;
	font-family: "Noto Sans JP", "メイリオ", "Meiryo", Osaka, sans-serif;
	font-size: 0.65em;
	white-space: nowrap;
	position: absolute;
	left: 3.9em;
	top: 3.5em;
	text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
	letter-spacing: 0.05em;
}

.mice_box > div > p {
	width: 100%;
	height: 100%;
	padding: 65px 25px 25px 25px;
	background-color: #ccc;
	border-radius: 20px;
	line-height: 1.8;
}

.mice_box > div.box_m > h3 span:first-child {
	background-color: #4d9de3;
}

.mice_box > div.box_i > h3 span:first-child {
	background-color: #ffda1f;
}

.mice_box > div.box_c > h3 span:first-child {
	background-color: #ff7a7a;
}

.mice_box > div.box_e > h3 span:first-child {
	background-color: #49c784;
}

.mice_box > div.box_m > h3 span:last-child {
	color: #4d9de3;
}

.mice_box > div.box_i > h3 span:last-child {
	color: #f5c61c;
}

.mice_box > div.box_c > h3 span:last-child {
	color: #ff7a7a;
}

.mice_box > div.box_e > h3 span:last-child {
	color: #49c784;
}

.mice_box > div.box_m > p {
	background-color: #cadbea;
}

.mice_box > div.box_i > p {
	background-color: #fff79f;
}

.mice_box > div.box_c > p {
	background-color: #ffdcdc;
}

.mice_box > div.box_e > p {
	background-color: #c7e7d6;
}





/* for SmallSize
--------------------------------------------------------------------------------- */
@media print, screen and (min-width:480px) {

	/* What's MICE
	------------------------------------------------------------- */

	.mice_box > div > h3 {
		font-size: 2.8rem;
	}

	.mice_box > div > p {
		padding: 85px 30px 30px 30px;
	}

}





/* for MiddleSize(480-)
-------------------------------------------------------------------------------- */
@media print, screen and (min-width:640px) {

	/* History
	------------------------------------------------------------- */

	dl.history_list dt {
		width: 12.5em;
		white-space: nowrap;
	}

	dl.history_list dt br {
		display: none;
	}

	dl.history_list dd {
		width: calc(100% - 12.5em);
		margin-left: 12.5em;
	}


}





/* for MiddleSize
-------------------------------------------------------------------------------- */
@media print, screen and (min-width:788px) {



}





/* for LargeSize
-------------------------------------------------------------------------------- */
@media print, screen and (min-width:980px) {

	/* Soshiki
	------------------------------------------------------------- */

	.soshiki_cont {
		display: flex;
		align-items: center;
	}

	.soshiki_cont .soshiki_img {
		width: 50%;
		max-width: 530px;
		text-align: left;
		margin-bottom: 0;
	}

	.soshiki_cont ul.icon_list {
		width: 50%;
		margin: 0;
		padding-left: 50px;
	}


	/* What's MICE
	------------------------------------------------------------- */

	.mice_box {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 40px;
	}


}





/* for LargeSize
-------------------------------------------------------------------------------- */
@media print, screen and (min-width:1080px) {



}





/* for ExtraLargeSize
-------------------------------------------------------------------------------- */
@media print, screen and (min-width:1280px) {



}





/*** Print Styles ***/

@media print {

	/* What's MICE
	------------------------------------------------------------- */

	.mice_box {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
	}

	.mice_box > div > h3 {
		font-size: 2.6rem;
	}

	.mice_box > div > p {
		font-size: 1.5rem;
		padding: 60px 20px 20px 20px;
	}


}