@charset "utf-8";
/*******************************************************
mescius -http://www.mescius.jp/
Copyright(c)
by mescius GCTeam
*******************************************************/
/*** Form normalizing style  ***/
/* Base for label styling */

.attribute-selector {
	position: relative;
	width: 90%;
	max-width: 300px;
	background: #fff;
}

.attribute-selector::after {
	position: absolute;
	top: 2px;
	bottom: 2px;
	right: 2px;
	display: flex;
	content: "\f063";
	width: 55px;
	justify-content: center;
	align-items: center;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	background: #fff;
	color: #036db7;
}

.sort-category {
	position: relative;
	z-index: 5;
	width: 100%;
	appearance: none; 
	padding: 0.7em 1em;
	background: transparent;
	border: solid 2px #036db7;
}

.sort--img-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	/*width: 30%;*/
	height: 100%;
	height: fit-content;
	min-width: 420px;
	margin-right: 5%;
	padding: 20px;
	background: #fff;
	border: solid 1px #c0c0c0;
}

.sort--img {
	width: 100%;
	max-width: 400px;
}

.sort--info-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 65%;
}

.sort--title {
	font-size: 24px;
	margin-bottom: 1.5rem;
}

.sort--detail {
	color: #666;
	line-height: 2em;
	margin-bottom: 2rem;
}

.main-visual {
	display: flex;
	width: 80%;
	object-fit: contain;
	margin: 5rem auto 3rem;
	padding: 1em !important;
}

.case--two-culumns {
	display: flex;
	margin-bottom: 4rem;
}

.case--column-left {
	width: 60%;
	margin-right: auto;
}

.case--column-right {
	width: 35%;
	text-align: center;
}

.img--interview {
	width: 100%;
	max-width: 400px;
	height: auto !important;
	margin-bottom: 0.8rem;
	padding: 0.6em !important;
}
.img--interview_ss {
	width: 100%;
	max-width: 300px;
	margin-bottom: 1.5rem;
    padding: 1em;
    border: solid 1px #ccc;
    background: #fff;
}
.text--interview {
	font-size: 14px;
	line-height: 1.6em;
	color: #646464;
	text-align: center;
}

.case--point {
	width: 100%;
	padding: 2em;
	background: #c0d5e0;
}

.case--point_ul {
	margin: 0;
	padding-left: 20px;
}

.figure--case {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto 3rem;
}

.figure--case-img {
	width: auto;
	width: 70%;
    max-height: 450px;
    /* object-fit: contain; */
    margin: auto;
    padding: 2em !important;
    border: solid 1px #ccc;
    background: #fff;
}

.figure--case-caption {
	margin-top: 1rem;
	font-size: 14px;
	text-align: center;
}

.section--case-info {
	margin-top: 50px;
}

.case--info-img {
	max-width: 100%;
    margin-bottom: 2rem;
    padding: 1em 2em;
	border: solid 1px #ccc;
	background: #fff;
}
.table--case {
	width: 100%;
	border: solid 1px #999;
}

.table--case-th {
	width: 30%;
	padding: 15px 2rem;
	font-weight: bold;
	background: #b1d5e1;
}

.table--case-tr {
	border-bottom: solid 1px #999;
}

.table--case-td {
	padding: 15px 2rem;
}

.table--case-ul {
	margin: 0;
	padding-left: 20px;
}

.section--case-partner {
	background: #d7e0c0;
	padding: 2em;
}

.block--case-parter_wrap {
	display: flex;
	flex-wrap: wrap;
	margin-top: 3rem;
}

.block--case-parter_img {
	min-width: 220px;
	margin: 0 2rem 1rem 0;
}

.block--case-parter_p {
	width: calc(100% - (220px + 3rem));
}


@media only screen and (max-width : 960px) {
.case-file_block {
	flex-direction: column;
	align-items: center;
	}

.sort--img-wrap {
	width: 100%;
	max-width: 350px;
	margin: 0 0 2rem;
	}

.sort--info-wrap {
	width: 100%;
	align-items: center;
	text-align: center;
	}
}
@media only screen and (max-width : 640px) {
.main-visual {
	width: 100%;
	margin: 2.5rem auto 1.5rem;
	}
.case--two-culumns {
	flex-direction: column;
	align-items: center;
	margin-bottom: 3rem;
}

.case--column-left, .case--column-right {
	width: 100%;
	margin-bottom: 1.5rem;
	}

.block--case-parter_wrap {
	flex-direction: column;
	}

.block--case-parter_img {
	margin: 0 0 2rem;
	}

.block--case-parter_p {
	width: 100%;
	}
}

@media only screen and (max-width : 480px) {
	.table--case { min-width: 100%; }
	tr {
		display: flex;
		flex-direction: column;
	}
	.table--case-th { width:100%; }
	.table--case-td { width:100%; }
	.table--case-tr:last-child { border-bottom:0; }
}