@charset "utf-8";
/* CSS Document */

/*事例カテゴリリスト*/
.hero_image {
	max-width: 100%;
	margin: 32px auto 0px auto;
	padding: 14.4rem 0rem 14.4rem 0rem;
	background-image: url(images/case_study/hero_img.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
@media screen and (max-width: 768px) {
	.hero_image {
		max-width: 100%;
		margin: 16px auto 0px auto;
		padding: 4.8rem 0rem 4.8rem 0rem;
	}
}
.hero_image h1 {
	max-width: 1080px;
	margin: 0px auto 0px auto;
	padding: 2rem;
	color: #FFFFFF;
	/*color: #0D47A1;*/
	font-size: 3.2rem;
	background-color:rgba(50,89,138,0.25);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
/*	border: 1px solid rgba(50,89,138, 0.2);
	border-right-color: rgba(50,89,138, 0.1);
	border-bottom-color: rgba(50,89,138, 0.1);*/
	border-radius: 5px;
	/*background-color: rgba(255,255,255,0.7);*/
}
@media screen and (max-width: 768px) {
	.hero_image h1 {
		max-width: 100%;
		padding: 0.8rem;
		font-size: 2.4rem;
		line-height: 1.5;
	}
}
.casestudy_list {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 768px) {
	.casestudy_list {
		max-width: 100%;
	}
}
.casestudy_list h2 {
	width: 1040px;
	margin: 24px 8px 8px 8px;
	padding: 0.8rem 0rem 0.8rem 0rem;
	clear: both;
	/*color: #1E88E5;*/
	color: #32598A;
	font-size: 2.4rem;
	/*border-left: 6px solid #1E88E5;*/
}
@media screen and (max-width: 768px) {
	.casestudy_list h2 {
		width: 100%;
		margin: 24px 0px 8px 0px;
		padding: 0.8rem;
		font-size: 2rem;
	}
}
.casestudy_list　h3 {
	
}
.h1_doc {
	margin: 16px 0px 0px 0px;
	padding: 1.6rem 0rem 0rem 0rem;
	display: inline-block;
	color: #FFFFFF;
	/*color: #0D47A1;*/
	font-size: 2rem;
	line-height: 1.5;
	border-top: 3px double #9E9E9E;
}
.h2_doc {
	margin: 16px 0px 0px 0px;
	padding: 0rem 0rem 0rem 0rem;
	display: inline-block;
	color: #424242;
	font-size: 1.6rem;
	line-height: 1.5;
}
/*-----*/
.cate-anchor ul {
	width: 1080px;
	padding: 2.4rem 0rem 2.4rem 0rem;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}
.cate-anchor li a {
	width: 250px;
	margin: 10px;
	padding: 1.6rem 0rem 1.6rem 0rem;
	display: block;
	/*color: #1E88E5;*/
	color: #424242;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	background-color: #FAFAFA;
	border: 1px solid #EEEEEE;
	border-radius: 3px;
}
.cate-anchor li a:hover {
	color: #FFFFFF;
	/*background-color: #1E88E5;*/
	background-color: #0D47A1;
}
h2 .anchor {
	display: block;
	margin-top:-120px;
	padding-top:120px;
}
@media screen and (max-width: 768px) {
	.cate-anchor {
	}
	.cate-anchor ul {
		width: 100%;
		display: grid;
		grid-template-columns: 50% 50%;
	}
	.cate-anchor li {
		padding: 0.25rem;
	}
	.cate-anchor li a {
		width: 100%;
		margin: 0px;
	}
}
/*-----*/
.case_list {
	margin: 0px 0px 56px 0px;
	padding: 0rem 0rem 5.6rem 0rem;
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px dotted #9E9E9E;
}
.case_box {
	width: 250px;
	height: auto;
	margin: 10px;
	padding: 0rem;
	display: block;
	background-color:rgba(50,89,138,1.00);
	border: 2px solid rgba(50,89,138,1.00);
	text-decoration: none;
	border-radius: 6px;
}
.case_box .case_eyecatch {
	width: 246px;
	height: auto;
	background-color:rgba(50,89,138,1.00);
	vertical-align: middle;
	overflow: hidden;
	text-align: center;
}
.case_box .case_eyecatch img {
	width: 100%;
	max-height: auto;
	border-radius: 4px 4px 0px 0px;
}
.case_box h3 {
	height: 58px;
	padding: 0.8rem;
	color: #FFFFFF;
	font-size: 1.6rem;
	line-height: 1.5;
	/*background-color: #1E88E5;*/
	background-color:rgba(50,89,138,1.00);
	border-radius: 0px 0px 4px 4px;
}
@media screen and (max-width: 768px) {
	.case_list {
		width: 100%;
		display: grid;
		grid-template-columns: 50% 50%;
	}
	.case_box {
		width: calc(100% - 10px);
		height: auto;
		margin: 5px;
	}
	.case_box .case_eyecatch {
		width: 100%;
	}
	.case_box .case_eyecatch img {
		width: 100%;
	}
	.case_box h3 {
		height: auto;
	}
}

/*事例ページ*/
.casestudy {
	width: 1080px;
	margin-left: auto;
	margin-right: auto;
}
.casestudy img {
	width: auto;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
}
/*-----*/
.case_header {
	max-width: 1080px;
	margin: 40px auto 40px auto;
	padding: 1.6rem;
	background-color: #FFFFFF;
	/*background-color: #FAFAFA;*/
	border: 1px solid #EEEEEE;
	/*border: 1px solid #EEEEEE;*/
}
.case_header h1 {
	width: 100%;
	padding: 2.4rem 2.4rem 0.8rem 2.4rem;
	border-top: 3px double #32598A;
}
.case_header h1 a {
	color: #32598A;
	/*color: #424242;*/
	font-size: 3.2rem;
	line-height: 1.5;
	text-decoration: none;
}
.case_header h2 {
	margin: 0px 0px 0px 24px;
	color: #32598A;
	font-size: 2.4rem;
	line-height: 1.5;
}
.case_header .case_description {
	margin: 0px 0px 32px 0px;
	padding: 0rem 2.4rem 2.4rem 2.4rem;
	color: #212121;
	/*color: #424242;*/
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
	border-bottom: 3px double #32598A;
}
.case_info {
	display: flex;
}
.case_info img {
	max-width: 340px;
	border-radius: 6px;
}
.case_info_doc { 
	padding: 1.6rem 0rem 0rem 0rem;
}
.case_info .doc { 
	margin: 8px 24px 24px 24px;
	font-size: 1.6rem;
	line-height: 1.5;
}
.case_info .doc p{ 
	margin: 0px 0px 16px 0px;
	font-size: 1.6rem;
	line-height: 1.5;
}
.case_header .case_difficulty { 
	margin: 0px 0px 0px 24px;
	color: #32598A;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 2;
}
.case_header .case_difficulty>span {
	color: #F9A825;
	font-size: 4.8rem!important;
}
@media screen and (max-width: 768px) {
	.casestudy {
		width: 100%;
	}
	.case_header h1 {
		width: 100%;
		padding: 2.4rem 0rem 1.6rem 0rem;
		border-top: 3px double #424242;
	}
	.case_header h1 a {
		font-size: 2.4rem;
	}

	.case_header .case_description {
		padding: 0rem 0rem 2.4rem 0rem;
	}
	.case_info {
		display: block;
	}
	.case_info img {
		margin: 0px 0px 16px 0px;
	}
	.case_header h2 { 
		margin: 0px 0px 0px 0px;
		font-size: 2rem;
	}
	.case_header .doc { 
		margin: 8px 0px 24px 0px;
	}
	.case_header {
		max-width: 100%;
	}
	.case_header .case_difficulty { 
		margin: 0px 0px 0px 0px;
		font-size: 2rem;
	}
	.case_header .case_difficulty>span { 
		font-size: 3.2rem!important;
	}
}
/*-----*/
.case_doc {
	max-width: 1080px;
	margin: 0px auto 48px auto;
	padding: 1.6rem;
}
.case_doc p a {
	padding: 0.8rem;
	display: inline-block;
	text-align: center;
	color: #1976D2;
	font-weight: bold;
	text-decoration: none;
	border: 2px solid #1976D2;
	border-radius: 3px;
}
.case_doc p a:hover {
	color: #FFFFFF;
	background-color: #1976D2;
}
.case_doc img {
	margin: 24px 0px 8px 0px;
	border-radius: 6px;
}
.case_doc h2 {
	margin: 0px 0px 32px 0px;
	padding: 0rem 2.4rem 0.8rem 2.4rem;
	color: #32598A;
	font-size: 2.4rem;
	line-height: 1.5;
	border-bottom: 2px dotted #32598A;
}
.case_doc h3 {
	margin: 24px 0px 0px 0px;
	padding: 0rem 2.4rem 0.8rem 2.4rem;
	color: #32598A;
	font-size: 2.4rem;
	line-height: 1.5;
}
.case_doc .doc {
	margin-bottom: 56px;
}
.case_doc .doc p {
	margin: 0px 0px 16px 0px;
	padding: 0rem 2.4rem 0rem 2.4rem;
	font-size: 1.6rem;
	line-height: 1.5;
}
.case_doc .doc ul,.case_doc .doc ol {
	margin: 0px 0px 24px 0px;
	padding: 0rem 2.4rem 0rem 4.8rem;
}
.case_doc .doc li {
	margin: 0px 0px 16px 0px;
	font-size: 1.6rem;
	line-height: 1.5;
}
.price_box {
	width: 94%;
	margin: 32px auto 0px auto ;
	padding: 1.6rem;
	border: 2px solid #00796B;
	border-radius: 6px;
}
.price_box h3{
	margin: 0px 0px 24px 0px;
	color: #00796B;
	font-size: 2.4rem;
	line-height: 1.5;
	border-bottom: 2px solid #00796B;
}
/*.case_doc .doc p:last-child,.case_doc .doc li:last-child {
	margin: 0px 0px 0px 0px;	
}*/
@media screen and (max-width: 768px) {
	.case_doc h2 {
		font-size: 2rem;
		padding: 0rem 2.4rem 0.8rem 0rem;
	}
	.case_doc .doc {
		margin-bottom: 48px;
	}
	.case_doc .doc p {
		padding: 0rem 0rem 0rem 0rem;
	}
	.case_doc .doc ul,.case_doc .doc ol {
		padding: 0rem 0rem 0rem 1.6rem;
	}
	.price_box {
		width: 96%;
	}
}
/*-----*/
.case_data {
	max-width: 1080px;
	margin: 40px auto 40px auto;
	padding: 1.6rem;
	/*background-color: #F1F8E9;*/
	border-top: 8px solid #00796B;
	border-bottom: 2px solid #00796B;
	border-left: 2px solid #00796B;
	border-right: 2px solid #00796B;
	border-radius: 3px;
}
.case_data h2 {
	margin: 0px 0px 16px 0px;
	padding: 0rem 0rem 0.8rem 1.6rem;
	color: #00796B;
	font-size: 2.4rem;
	line-height: 1.5;
	border-bottom: 3px double #00796B;
}
.case_data dl {
	display: flex;
	flex-wrap: wrap;
}
.case_data dt {
	width: 30%;
	padding: 1.6rem;
	color: #00796B;
	font-size: 1.8rem;
	font-weight: bold;
}
.case_data dd {
	width: 70%;
	padding: 1.6rem;
	font-size: 1.8rem;
	font-weight: bold;
}
.case_data dd .big_price {
	color: #E91E63;
	font-size: 3.2rem;
}
.case_data p {
	padding: 1.6rem;
	font-size: 1.6rem;
	line-height: 1.5;
}
@media screen and (max-width: 768px) {
	.case_data h2 {
		padding: 0rem 0rem 0.8rem 0rem;
	}
	.case_data dt {
		width: 45%;
		margin: 0px 0px 8px 0px;
		padding: 0.4rem;
		font-size: 1.6rem;
		font-weight: bold;
		line-height: 1.5;
		border-right: 1px dotted #424242;
	}
	.case_data dd {
		width: 55%;
		padding: 0.4rem 0.4rem 0.4rem 0.8rem;
		font-size: 1.6rem;
		font-weight: bold;
		line-height: 1.5;
	}
}
/*-----*/
.client_info {
	max-width: 1080px;
	margin: 40px auto 40px auto;
	padding: 1.6rem;
	/*background-color: #E1F5FE;*/
	border-top: 8px solid #0277BD;
	border-bottom: 2px solid #0277BD;
	border-left: 2px solid #0277BD;
	border-right: 2px solid #0277BD;
	border-radius: 3px;
	border-radius: 6px;
}
.client_info h2 {
	margin: 0px 0px 16px 0px;
	padding: 0.4rem 0rem 0.4rem 1.6rem;
	color: #0277BD;
	font-size: 2.4rem;
	line-height: 1.5;
	border-bottom: 3px double #0277BD;
}
.client_info dl {
	display: flex;
	flex-wrap: wrap;
}
.client_info dt {
	width: 30%;
	margin: 0px 0px 8px 0px;
	padding: 0.8rem 0.8rem 0.8rem 1.6rem;
	color: #0277BD;
	font-size: 1.8rem;
	font-weight: bold;
}
.client_info dd {
	width: 70%;
	padding: 1.6rem;
	font-size: 1.8rem;
	font-weight: bold;
}
@media screen and (max-width: 768px) {
	.client_info h2 {
		padding: 0rem 0rem 0.8rem 0rem;
	}
	.client_info dt {
		width: 45%;
		margin: 0px 0px 8px 0px;
		padding: 0.4rem;
		font-size: 1.6rem;
		font-weight: bold;
		line-height: 1.5;
		border-right: 1px dotted #424242;
	}
	.client_info dd {
		width: 55%;
		padding: 0.4rem 0.4rem 0.4rem 0.8rem;
		font-size: 1.6rem;
		font-weight: bold;
		line-height: 1.5;
	}
}