/* ------------------------------------------------------------------------------------------


     事例紹介


------------------------------------------------------------------------------------------ */


/* ---------------------------------------
/case/index.html
--------------------------------------- */

.con_mt {
	margin-top: 30px;
}
.lead1 .h {
	margin: 0;
}
.lead1 .h p {
	margin: 0;
	font-weight: bold;
}
#side .clientprof .img {
	width: calc(100% - 2px);
	height: 240px;
	border: 1px solid #ddd;
	margin-bottom: 40px;
	position: relative;
}
#side .clientprof .img img {
	vertical-align: middle;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
#side .clientprof h3 {
	border: none;
	padding-left: 0;
}

/* searchbox */

.searchboxWrap * { box-sizing:border-box;}
.searchboxWrap { margin-top:30px; background:#eaeef2; display: none; }
.searchboxWrap .btn { display:block; padding:20px; text-align:center; }
.searchboxWrap .btn span { font-size:3.0rem; color:#222; position:relative;}
/*.searchboxWrap .btn span::after { position: absolute; 	content: ''; top: -2px; right: -80px; width: 40px; height: 40px; 	background: #063065 url("https://www.fsi.co.jp/aws/images/icon_ar_down.svg") no-repeat 50% 50%; background-size: auto 12px; border-radius: 200%;}
.searchboxWrap .btn.open span::after { background-image: url("https://www.fsi.co.jp/aws/images/icon_ar_up.svg") ;}*/
.searchbox { display: block; padding: 60px 0 0; color:#222; position:relative;}
.searchbox .cancel { position:absolute; top: 0; right: 20px; text-align: center; font-size: 1.2rem; line-height: 1; font-weight: bold; color: #049; padding: 10px 20px; display: inline-block; border: 1px solid #049; border-radius: 2em; text-decoration:none; cursor:pointer; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;	-ms-transition: all 0.3s ease;}
.searchbox .cancel:hover { background:#FFF; border: 1px solid #fff;}
.searchbox dl{ display:block; 	overflow:hidden; border-top:solid 1px #d2d4d7; padding:10px 0; }
.searchbox dl dt { float:left; width: 8%; display:block; font-size:1.4rem; font-weight: bold; padding: 10px 0;}
.searchbox dl dd { float:right; width: 92%; display:block; font-size:1.8rem; padding: 10px 0 0 0; box-sizing: border-box; }
.searchbox dl dd .inner div { display:inline-block; padding: 0 30px 15px 0;}
.searchbox dl dd .inner div:last-child {padding-right: 0;}
.searchbox input[type="radio"] { display: none; }
.searchbox input[type="radio"] + label { position: relative; display: inline-block; padding: 0 0 0 30px; cursor: pointer; }
.searchbox input[type="radio"] + label::before { position: absolute; 	content: ''; top: 0; left: 0; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; border-radius: 200%; }
.searchbox input[type="radio"] + label::after { position: absolute; 	content: ''; 	top: 4px; left: 4px; 	width: 14px; 	height: 14px; background: #95cf1a; 	border-radius: 200%; opacity: 0; -webkit-transform: scale(.5); transform: scale(.5); -webkit-transition: all .2s; transition: all .2s;}
.searchbox input[type="radio"]:checked + label::after { opacity: 1; 	-webkit-transform: scale(1); transform: scale(1);}

@media only screen and (min-width:768px) and (max-width:1360px) {
	.searchbox { padding-top: 30px; }
	.searchbox .cancel { top: -20px; }
	#mainv .contentsinner { padding-bottom: 40px; }
}
@media only screen and (max-width:767px) {
	.con_mt {
		margin: 0 auto;
		width: 90%;
	}
.searchboxWrap { margin-top:15px;}
.searchboxWrap .btn { padding:12px; text-align:left;}
.searchboxWrap .btn span { font-size:2.0rem; margin-left:8px;}
.searchboxWrap .btn span::after { top: -2px; right: -40px; width: 25px; height: 25px; background-size: auto 7px; }
.searchbox { padding: 0 20px 5px;margin-top: 6rem;}
.searchbox .cancel { top: -38px; right:12px; font-size: 1.2rem; padding: 6px 10px; }
.searchbox .cancel:hover { background: none; border: 1px solid #049;}
.searchbox dl{ padding: 0; }
.searchbox dl dt { position: relative; float: none; width: auto; font-size:1.4rem; font-weight:bold; padding: 20px 0; }
.searchbox dl dd { float: none; width: auto; font-size:1.4rem; padding: 0; border-left: none; }
.searchbox dl dd .inner div { display:inline-block; padding: 0 21px 15px 0;}
#select-industry dd .inner div:nth-child(6),
#select-service  dd .inner div:nth-child(2),
#select-service  dd .inner div:nth-child(4) { padding-right: 21px;}
#select-service  dd .inner div:nth-child(5),
#select-service  dd .inner div:nth-child(7) { padding-right:0;}
.searchbox input[type="radio"] { display: none; }
.searchbox input[type="radio"] + label { position: relative; display: inline-block; padding: 0 0 0 30px; cursor: pointer; }
.searchbox input[type="radio"] + label small { display:block;}
.searchbox input[type="radio"] + label::before { width: 16px; height: 16px;}
.searchbox input[type="radio"] + label::after { top: 3px; left: 3px; width: 12px; height: 12px; }
}


/* case panel */

.contentset1 {
	padding-top: 30px;
	opacity: 1;
	transition: opacity .2s;
}

.contentset1.hidden {
	opacity: 0;
}
.contentset1.hidden .col {
	opacity: 0;
	transform: translateY(100px);
	transition: opacity 1s ease-out, transform .3s ease-out;
}


.no-case {
	width: 100%;
	padding: 100px 0 0;
	text-align: center;
}


@media only screen and (max-width:767px) {
	
	.contentset1 {
		display: block;
		padding-top: 15px;
	}
	
	.no-case {
		width: auto;
		padding: 60px 0 40px;
	}
	
}


/* open/close button */

.searchbox dl dt button {
	display: none;
}

#all, #all + label {
	display: none;
}

@media only screen and (max-width:767px) {
	
	.searchbox dl dt button {
		display: block;
		position: absolute;
		right: 0;
		top: 50%;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		padding: 0;
		border-style: none;
		border-radius: 30px;
		overflow: hidden;
		background-color: #049;
		outline: none;
		cursor: pointer;
		appearance: none;
		text-indent: -400px;
	}
	
	.searchbox dl dt button::before {
		content: "";
		display: block;
		position: absolute;
		left: 8px;
		top: 14px;
		width: 14px;
		height: 2px;
		background-color: #fff;
	}
	
	.searchbox dl dt button::after {
		content: "";
		display: block;
		position: absolute;
		left: 8px;
		top: 14px;
		width: 14px;
		height: 2px;
		background-color: #fff;
		transform: rotate(90deg);
		transition: transform .2s;
	}
	
	.searchbox dl dt button.close::after {
		transform: rotate(0);
	}
	
	.searchbox dl dd {
		height: 0;
		overflow: hidden;
		transition: height .2s ease-out;
	}
	
	.searchbox dl dd .inner {
		padding-bottom: 10px;
	}
	
}

/* ------------------------------------------------------------------------------------------
     事例ページ下部画像と本文box
------------------------------------------------------------------------------------------ */

/* .layoutcase  テキストの左に画像 */
.layoutcase {position:relative;padding-left: 300px;margin-bottom: 40px;}
.layoutcase .layoutcaseimg { position:absolute; left:10px; top:10px; display:block; }
@media only screen and (max-width:767px) {
    #main .layoutcase { padding-left:0; }
    #main .layoutcase .layoutcaseimg { position:relative; left:auto; top:auto; margin:auto; }
}

.boxcase {background:#f6f6f6;padding:15px 25px 10px;margin:10px 0 20px;}

ul.list { margin:0 0 0 15px; text-align:left; text-indent:13px; }
ul.list li { color:#000; padding:10px 0; text-indent:-16px; }
ul.list li:before { content:'●'; color:#0078c8; font-family:'FontAwesome'; font-weight:900; margin-right:5px; vertical-align:middle; font-size:0.6em; vertical-align:middle; }

ul.list_chk { margin:0 0 0 2.4rem; }
ul.list_chk li { font-weight:bold; text-indent:-2.4rem;}
ul.list_chk li:before { content:''; color:#f18603; font-family:'FontAwesome'; font-weight:900; margin-right:5px; vertical-align:middle; font-size:2rem; vertical-align:middle; }

.content_beforeafter { color:#222; display: flex;}
.content_beforeafter .col { background:#f6f6f6; letter-spacing:normal; position:relative; width:39%; vertical-align:top;
    display:inline-block; padding:40px 4% 40px 2%; }
.content_beforeafter .col .h4 { margin-top: 0; }
.content_beforeafter .before { background:#e1e6e9; color:#666; padding:40px 2% 40px 4%; }
.content_beforeafter .after .h4 { color:#f18603; }
.content_beforeafter .arr { width:7%; padding:30px 0 30px; overflow:hidden; }
.content_beforeafter .arr:after { content:''; position:absolute; width:0; height:0; z-index:1;
    top:-100px; bottom:-100px; left:0; margin:auto 0;
    border-top:200px solid transparent;
    border-right:0 solid transparent;
    border-bottom:200px solid transparent;
    border-left:50px solid #e1e6e9;}
@media only screen and (max-width:767px) {
    .content_beforeafter { display: block; }
    .content_beforeafter .h4 { font-size: 2rem; }
    .content_beforeafter .col { width:auto; display:block; padding:30px 5vw 0; }
    .content_beforeafter .before { background:#e1e6e9; color:#666; padding-left:6%; }
    .content_beforeafter .after { padding-bottom: 20px; }
    .content_beforeafter .arr { height:40px; padding:30px 0 0; overflow:hidden; }
    .content_beforeafter .arr:after {
        left:-300px; right:-300px; top:0; margin:0 auto;
        border-top:70px solid #e1e6e9;
        border-right:300px solid transparent;
        border-bottom:0 solid transparent;
        border-left:300px solid transparent;}
    .content_beforeafter .col ul.list_chk li {
    	text-indent: 0;
    }
    ul.list_chk{margin-left:0;}
}


.pic {
    width: 280px;
    float: right;
    font-size: 12px;
    margin-bottom: 30px;
    margin-left: 30px;
}
.pic span {
    display: inline-block;
    letter-spacing: -.5px;
    margin-top: 10px;
}
.pic img {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

/* p */
p.case { line-height:1.8; margin:10px 0 20px;  } 
p.note { font-size:1.2rem; margin-bottom:10px; }

#case { padding-left:240px; }

.lead1 a:hover {
  text-decoration: none;
}
@media (min-width: 620px) {
.jirei2{
 display: flex;
 flex-direction: row-reverse;
 justify-content: space-between;
 }
}
@media (max-width: 620px) {
video {
 width: 100%;
 height: auto;
}		
}



section .h3 {
	border: none;
	padding-left: 0;
}
.imgset1 {
	margin-top: 60px;
}


@media only screen and (max-width:767px) {
	.pic {
		width: 100%;
		margin-left: 0;
		box-sizing: border-box;
		font-size: 10px;
	}
	.imgset1 {
		margin-top: 30px;
	}
	.box1 ul {
		margin: 20px 0 0;
	}
	.box1 ul li {
		line-height: 1.5;
	}
	.btnarea {
		margin-top: 30px;
		margin-bottom: 0;
	}
	aside {
		width: 100%;
	}
	.contents #side {
		margin-top: 0;
	}
	#side .clientprof {
		padding-bottom: 0;
	}
	#side .clientprof .img {
		margin-bottom: 30px;
		height: 160px;
	}
	#side .clientprof .img img {
		width: auto;
		max-height: 100%;
	}
	#side .clientprof h3 {
		font-size: 16px;
		margin-bottom: 10px;
	}
}