/*----------------------------------------------------------------------------*/
/* 	テックサービスサイト 整備事例									  CSS    */
/*----------------------------------------------------------------------------*/

/* ■ MainConents .casestudy  */

.casestudy {
	margin: 0 auto 0 auto;
	width: 100%;
	padding-bottom: 0px;
}

#airc {
	/* □ 固定ヘッダ アンカー位置差分変更 */
	margin-top: -50px;
	padding-top: 50px;
}

#elec {
	/* □ 固定ヘッダ アンカー位置差分変更 */
	margin-top: -50px;
	padding-top: 50px;
}

.casestudy h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

.sec {
	margin: 0 auto 0 auto;
	width: 100%;
	padding-bottom: 20px;
	position: relative;
	background: linear-gradient(180deg, white 0%, white 40%, #F5F5F5 40%, #F5F5F5 100%);
	/* ★bluek deep blue */
}

.casestudy h2 {
	display: block;
	margin: 0 auto 0 auto;
	width: 100%;
	font-weight: bold;
	font-size: 14px;
	color: #444;
	padding-top: 20px;
	padding-left: 30px;
}

.sec .h2line {
	margin: 10px auto 0 auto;
	width: 90%;
	height: 1px;
	text-indent: -99999px;
	/* テキスト非表示 */
	background: linear-gradient(90deg, #BDC3C7 0%, #BDC3C7 97%, #BF0122 97%, #BF0122 100%);
	/* ★ */
}

/* □ List sort item field  */

:focus {
	/* FORM フォーカス時の邪魔な枠線を消す ◆ */
	outline: none;
}

#sortslt {
	margin: 20px auto 20px auto;
	width: 100%;
}

#sortslt #form01 {
	/* ◆FORM item -------------------*/
	margin: 0 auto 0 auto;
	width: 100%;
}

#sortslt #form01 dl {
	margin: 0px auto 10px auto;
	width: 90%;
	text-align: center;
}

#sortslt #form01 dt {
	margin: 0 auto 10px auto;
	width: 55%;
	padding-left: 10px;
	padding-bottom: 10px;
	color: #333;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	color: #333;
	padding-top: 13px;
}

#sortslt #form01 dt.dtex {
	width: 100%;
	font-size: 11px;
	color: #333;
}

#sortslt #form01 dd {
	margin: -30px auto 0 auto;
	width: 100%;
	padding-left: 0px;
	padding-bottom: 0;
	color: #333;
	font-size: 12px;
	color: #333;
	/* gold02 */
}

#sortslt #form01 dd .rcline {
	margin-left: 10px;
	padding-top: 20px;
}

#sortslt #form01 dd.labelWrap02 {
	padding-top: 15px;
}

#sortslt #btn {
	margin: 10px auto 30px auto;
	text-align: center;
	padding-bottom: 0px;
}

#sortslt select {
	width: 90%;
	height: 30px;
	color: #555;
	font-size: 12px;
	line-height: 1.7em;
	text-align: center;
	text-align: left;
	color: #333;
	padding-top: 3px;
	padding-bottom: 10px;
	padding-left: 5%;
	background-color: #FFF;
}

#sortslt #btn {
	margin: 10px auto 0 0;
	text-align: center;
	padding-bottom: 0px;
}

#sortslt .btn {
	display: block;
	margin: 10px auto 20px auto;
	width: 150px;
	padding: 7px 0;
	text-align: center;
	font-size: 12px;
	color: #FFF;
	border: none;
	background: url("../images/icon/btn-sym01.png") no-repeat;
	background-size: 8px 8px;
	background-position: 8px 9px;
	background-color: #333;
	border: 1px solid #333;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#sortslt .btn:hover {
	color: #007CB5;
	/* Realone-blue */
	background: url("../images/icon/btn-sym04.png") no-repeat;
	background-size: 8px 8px;
	background-position: 120px 9px;
	background-color: #F5F5F5;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.sec ul {
	margin: 20px auto 0 auto;
	width: 100%;
	padding-bottom: 100px;
	padding-bottom: 0px;
}

.sec li {
	margin: 0 auto 20px auto;
	width: 70%;
	/*		height: 300px;*/
	position: relative;
	padding-bottom: 10px;
	padding-bottom: 50px;
	/*		background-color:#FFF;*/
	background-color: rgba(255, 255, 255, 0.95);
	/*  White  透過95% */
	box-shadow: 0px 1px 3px 1px #aaa;
	-webkit-box-shadow: 0px 1px 3px 1px #aaa;
	-moz-box-shadow: 0px 1px 3px 1px #aaa;
	position: relative;
}

.sec li .secimg {
	margin: 0 auto 0 auto;
	width: 100%;
}

.sec li .secimg img a {
	display: block;
	margin: 0 auto 0 auto;
	width: 100%;
}

.sec dl,
dt,
dd {
	display: block;
}

.sec li dl {
	margin: 0 auto 0 auto;
	width: 100%;
	color: #333;
}

.sec li dt {
	margin: 0 auto 10px auto;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	color: #FFF;
	line-height: 19px;
	padding: 5px;
	background-color: #A4966A;
	/* Gold01 */
}

.sec li dd.txtt {
	margin: 0 auto 0 auto;
	font-size: 13px;
	padding-left: 20px;
	padding-bottom: 0px;
	text-weight: bold;
}

.sec li dd.txtt2 {
	margin: 0 auto 0 auto;
	font-size: 13px;
	padding-left: 20px;
	padding-bottom: 0px;
	text-weight: bold;
}

.sec li dd.txtt3 {
	margin: 0 auto 0 auto;
	font-size: 13px;
	padding-left: 20px;
	padding-bottom: 0px;
	text-weight: bold;
}

.sec li dd.txtd {
	margin: 0 auto 0 auto;
	font-size: 12px;
	line-height: 1.6em;
	padding-left: 20px;
	padding-bottom: 0px;
	color: #A4966A;
	/* Gold01 */
	color: #333;
}

.sec li dd.txt01 {
	margin: 0 auto 0 auto;
	font-size: 13px;
	line-height: 1.7em;
	padding-left: 20px;
	padding-bottom: 0px;
}

.sec li .detail-btn02 {
	display: block;
	margin: 10px auto 0 45%;
	width: 130px;
	height: 30px;
}

.sec .secrind {
	display: none;
}

@media only screen and (max-width: 360px) {}

@media only screen and (min-width:768px) {

	.casestudy {
		margin: 10px auto 0 auto;
		width: 100%;
		padding-bottom: 30px;
		background-color: #FFF;
		background: linear-gradient(90deg, white 0%, white 58%, #F5F5F5 58%, #F5F5F5 90%, white 90%, white 100%);
	}

	#airc {
		/* □ 固定ヘッダ アンカー位置差分変更 */
		margin-top: -50px;
		padding-top: 50px;
	}

	#elec {
		/* □ 固定ヘッダ アンカー位置差分変更 */
		margin-top: -50px;
		padding-top: 50px;
	}

	.sec {
		margin: 0 auto 30px auto;
		width: 100%;
		padding-bottom: 0;
		padding-top: 20px;
		background: linear-gradient(90deg, white 0%, white 21%, #F5F5F5 58%, #1515159c 90%, white 90%, white 100%);

		background-size: contain;
		background-position: left 0 top 35%;
		background-repeat: no-repeat;
		position: relative;
	}

	.casestudy h2 {
		display: block;
		margin: 10px auto 0 auto;
		width: 100%;
		font-weight: normal;
		font-size: 28px;
		font-family: "NotoSansCJKjp-Bold";
		letter-spacing: 4px;
		color: #555;
		padding-top: 0;
		padding-left: 280px;
	}

	.sec .h2line {
		margin: 20px auto 50px auto;
		width: 70%;
		height: 1.25px;
		text-indent: -99999px;
		/* テキスト非表示 */
		background: linear-gradient(90deg, #BDC3C7 0%, #BDC3C7 97%, #BF0122 98%, #BF0122 100%);
		/* ★ */
	}

	/* □ List sort item field  */
	#sortslt {
		margin: -30px auto 30px auto;
		width: 100%;
		padding-top: 0px;
	}

	#sortslt #form01 {
		/* ◆ FORM item -------------*/
		margin: 0 auto 0 12.5%;
		width: 50%;
		position: relative;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	#sortslt #form01 dl,
	dt,
	dd {
		display: block;
	}

	#sortslt #form01 dl {
		display: block;
		margin: 0 auto 0 auto;
		width: 15%;
		padding: 10px;
	}

	#sortslt #form01 dt {
		display: block;
		margin: 0 auto 0 auto;
		width: 100%;
		text-align: left;
		font-size: 15px;
		line-height: 2.0em;
		color: #444;
		font-weight: normal;
		font-family: "NotoSansCJKjp-Medium";
		padding-top: 0;
		padding-left: 0;
	}

	#sortslt #form01 dt.dtex {
		width: 100%;
		font-size: 14px;
		color: #333;
	}

	#sortslt #form01 dd {
		display: block;
		margin: -20px 30px 0 auto;
		width: 90%;
		padding-bottom: 15px;
		color: #333;
		text-align: left;
		font-size: 14px;
	}

	#sortslt select {
		margin: 0 auto 0 auto;
		height: 35px;
		line-height: 1em;
		font-size: 13px;
		padding-left: 10px;
		padding-bottom: 5px;
	}

	#sortslt .btn {
		margin: 33px auto 0 75px;
		margin: 40px auto 0 75px;
		width: 150px;
		height: 35px;
		color: white;
		font-size: 14px;
		text-align: center;
		font-family: "NotoSansCJKjp-Medium";
		padding-top: 4px;
		background: url("../images/icon/btn-sym01.png") no-repeat;
		background-size: 8px 8px;
		background-position: 10px 12px;
		background-color: #333;
		z-index: 9;
	}

	#sortslt .btn:hover {
		display: block;
		width: 150px;
		height: 35px;
		color: #333;
		background: url("../images/icon/btn-sym02.png") no-repeat;
		background-size: 8px 8px;
		background-position: 125px 12px;
		background-color: #BBB;
	}

	#sortslt .sec01fline {
		margin: -40px auto 50px 30%;
		width: 60%;
		height: 1px;
		text-indent: -99999px;
		/* テキスト非表示 */
		background: linear-gradient(90deg, #CCCCCC 0%, #CCCCCC 97%, #E50038 97%, #E50038 100%);
		/* ★odsr-red  */
		z-index: 3;
	}

	/*  List sort item field □ */
	.sec ul {
		margin: 0 auto 0 auto;
		width: 1120px;
		padding-top: 0;
		padding-bottom: 10px;
		padding-left: 40px;
	}

	.sec li {
		display: block;
		float: left;
		margin: 0px;
		margin-top: 0px;
		margin-bottom: 40px;
		margin-right: 40px;
		width: 320px;
		height: 430px;
		/*◆card block高さ調整 */
		padding-bottom: 30px;
		background-color: rgba(255, 255, 255, 0.98);
		/*  White  透過98% */
		box-shadow: 0px 1px 3px 1px #aaa;
		-webkit-box-shadow: 0px 1px 3px 1px #aaa;
		-moz-box-shadow: 0px 1px 3px 1px #aaa;
		position: relative;
	}

	.sec #menber {
		display: block;
		float: left;
		margin: 0px;
		margin-top: 0px;
		margin-bottom: 40px;
		margin-right: 40px;
		width: 320px;
		height: 500px;
		padding-bottom: 30px;
		background-color: rgba(255, 255, 255, 0.98);
		box-shadow: 0px 1px 3px 1px #aaa;
		-webkit-box-shadow: 0px 1px 3px 1px #aaa;
		-moz-box-shadow: 0px 1px 3px 1px #aaa;
		position: relative;
	}


	.sec li .sec02img a {
		display: block;
		margin: 0 auto 0 auto;
		overflow: hidden;
		/*拡大時にはみ出た部分を隠す*/
		width: 100%;
	}

	.sec li .sec02img a img {
		display: block;
		transition-duration: 0.3s;
		transition: 0.8s ease-in-out;
		-webkit-transition: 0.8s ease-in-out;
		/* Ease in-out */
		-moz-transition: 0.8s ease-in-out;
		-o-transition: 0.8s ease-in-out;
	}

	.sec li .sec02img a img:hover {
		transform: scale(1.2);
		/*画像の拡大率*/
		transition-duration: 0.3s;
		transition: 0.8s ease-in-out;
		-webkit-transition: 0.8s ease-in-out;
		/* Ease in-out */
		-moz-transition: 0.8s ease-in-out;
		-o-transition: 0.8s ease-in-out;
	}

	.sec li dl {
		margin: 0 auto 0 auto;
		width: 100%;
		color: #444;
		z-index: 2;
	}

	.sec li dt {
		margin: 10px auto 10px 10px;
		width: 87%;
		font-size: 14px;
		text-align: center;
		font-weight: normal;
		color: #FFF;
		font-family: "NotoSansCJKjp-Medium";
		padding: 6px;
	}

	.sec li dd.txtt {
		margin: 0 auto 0 auto;
		width: 80%;
		font-size: 14px;
		text-weight: normal;
		font-family: "NotoSansCJKjp-Medium";
		line-height: 1.7em;
		padding-left: 0px;
		padding-bottom: 0px;
	}

	.sec li dd.txtt2 {
		margin: 0 auto 0 auto;
		width: 80%;
		font-size: 14px;
		text-weight: normal;
		font-family: "NotoSansCJKjp-Medium";
		line-height: 1.7em;
		padding-left: 0px;
		padding-bottom: 0px;
	}

	.sec li dd.txtt3 {
		margin: 0 auto 0 auto;
		width: 80%;
		font-size: 14px;
		text-weight: normal;
		font-family: "NotoSansCJKjp-Medium";
		line-height: 1.7em;
		padding-left: 0px;
		padding-bottom: 0px;
	}

	.sec li dd.txtd {
		margin: 0 auto 0 auto;
		width: 80%;
		font-size: 14px;
		font-family: "NotoSansCJKjp-Regular";
		padding-left: 0px;
		padding-bottom: 0px;
	}

	.sec li dd.txt01 {
		margin: 0 auto 0 auto;
		width: 80%;
		font-size: 14px;
		font-family: "NotoSansCJKjp-Regular";
		line-height: 1.7em;
		padding-left: 0px;
		padding-bottom: 0px;
	}

	.sec li .detail-btn02 {
		display: block;
		position: absolute;
		top: 90%;
		right: 10px;
		margin: 0 auto 0 auto;
		width: 150px;
		height: 30px;
	}

	.sec .secrind {
		position: absolute;
		top: 70px;
		right: 13%;
		display: block;
	}
}

/* Tablet Layout ◇ */
@media only screen and (min-width: 768px) and (max-width: 992px) {

	.casestudy {
		margin: 0 auto 0 auto;
		width: 100%;
		padding-bottom: 0px;
		background-color: #FFF;
	}

	.casestudy h2 {
		display: block;
		margin: 10px auto 0 auto;
		width: 100%;
		font-weight: bold;
		font-size: 20px;
		letter-spacing: 5px;
		padding-top: 0;
		padding-left: 12%;
	}

	.sec .h2line {
		margin: 20px auto 0px 5%;
		width: 90%;
		height: 1.25px;
		text-indent: -99999px;
		/* テキスト非表示 */
		background: linear-gradient(90deg, #BDC3C7 0%, #BDC3C7 97%, #BF0122 97%, #BF0122 100%);
		/* ★ */
	}

	.sec {
		margin: 0 auto 0 auto;
		width: 100%;
		padding-bottom: 50px;
		position: relative;
	}

	.sec ul {
		margin: 0px auto 0 5%;
		width: 90%;
	}

	.sec li {
		display: block;
		float: left;
		margin: 0px;
		margin-top: 30px;
		margin-right: 20px;
		width: 300px;
		height: 480px;
		padding-bottom: 0;
		padding-bottom: 20px;
	}

	.sec li dt {
		margin: 10px auto 10px 10px;
		width: 88%;
		font-size: 13px;
		text-align: center;
		font-weight: bold;
		padding: 6px;
	}

	.sec li .detail-btn02 {
		display: block;
		position: absolute;
		top: 90%;
		right: 15px;
		width: 150px;
		height: 30px;
	}
}

/* ■ MainConents .casestudy detail  */

#casestsection {
	margin: 0 auto 0 auto;
	width: 100%;
	padding-bottom: 20px;
	background: linear-gradient(90deg, white 0%, white 7%, #F5F5F5 7%, #F5F5F5 35%, white 35%, white 100%);
	/* ★ */
	border-Top: 1px solid #DDD;
}

#casestsection h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

#casestsec {
	margin: 0 auto 0 auto;
	width: 100%;
	padding-bottom: 10px;
}

#casestsec #casestsecsym01 {
	display: none;
}

#casestsection #casestsectitle01 {
	margin: 0 auto 0 auto;
	width: 90%;
}

#casestsection #casestsectitle01 h1 {
	display: block;
	font-size: 16px;
	font-weight: bold;
	color: #333;
	padding-top: 20px;
	padding-left: 15px;
}

#casestsection #casestsectitle01 p {
	width: 100%;
	font-size: 12px;
	color: #333;
	line-height: 22px;
	padding-top: 10px;
	padding-left: 20px;
}

#casestsec #casest01 {
	margin: 0 auto 0 auto;
	width: 90%;
	padding-top: 20px;
	padding-bottom: 0px;
}

#casestsec #casest01 .category01 {
	/* NEWS & RELEASE カテゴリー */
	margin: 10px auto 10px auto;
	width: 40%;
	font-size: 12px;
	text-align: center;
	font-weight: bold;
	font-family: "NotoSansCJKjp-Medium";
	color: #FFF;
	padding: 7px;
	background-color: #2E6193;
	/* sec-blue01 */
}

#casestsec #casest01 h2 {
	display: block;
	margin: 20px auto 10px auto;
	width: 90%;
	font-size: 13px;
	font-weight: bold;
	font-family: "NotoSansCJKjp-Medium";
	color: #333;
	line-height: 18px;
	padding-left: 10px;
	padding-bottom: 5px;
	border-left: 5px solid #333;
	border-bottom: 1px solid #BDC3C7;
	/* Siver */
}

#casestsec #casest01 dl,
dt,
dd {
	display: block;
}

#casestsec #casest01 dl.casestitem {
	margin: 0 auto 0 auto;
	width: 100%;
	padding-bottom: 10px;
}

#casestsec #casest01 dl.casestitem dt {
	margin: 0 auto 0 auto;
	width: 90%;
	font-size: 12px;
	font-weight: bold;
	padding-top: 10px;
	padding-left: 15px;
	color: #444;
	line-height: 18px;
	background: url("../images/icon/arrow01.png") no-repeat;
	background-size: 9px 10px;
	background-position: left 0 top 14px;
}

#casestsec #casest01 dl.casestitem dd {
	margin: 0 auto 0 auto;
	width: 90%;
	font-size: 12px;
	line-height: 17px;
	padding: 0px;
	padding-top: 10px;
	padding-left: 0px;
}

#casestsec #casest01 dl.casestitem dd.ext {
	color: #A4966A;
	/* Gold01 */
	padding-bottom: 5px;
}

#casestsec #casest01 {
	margin: 0 auto 0 auto;
	width: 90%;
	padding-top: 20px;
	padding-bottom: 0px;
}

#casestsec #casest02 {
	margin: 15px auto 0 auto;
	width: 100%;
	padding-bottom: 15px;
}

#casestsec #casest02 .bfat {
	margin: 0 auto 15px auto;
	width: 75%;
	font-size: 13px;
	text-align: center;
	font-weight: bold;
	color: #FFF;
	padding: 5px;
	padding-bottom: 5px;
	background-color: #2E6193;
	/* sec-blue01 */
}

#casestsec #casest02 ul {
	margin: 10px auto 0 auto;
	width: 100%;
}

#casestsec #casest02 li {
	margin: 0 auto 0 auto;
	width: 100%;
	padding-bottom: 20px;
}

#casestsec #casest02 li img {
	display: block;
	margin: 0 auto 5px auto;
	width: 75%;
}

#casestsec #casest02 li .cmnt01 {
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	color: #A4966A;
	/* Gold01 */
	padding-top: 8px;
	padding-left: 12.5%;
}

#casestsec .listbk {
	/* 一覧に戻る */
	display: block;
	margin: 0 auto 0 40%;
	width: 180px;
	height: 30px;
}

.txtt button {
	/* ここにスタイルを追加 */
	background-color: #555;
	/* 背景色を透明に */
	color: #fff;
	/* 文字色を継承 */
	border: none;
	/* 枠線なし */
	padding: 2px 5px;
	/* 内側の余白なし */
	text-align: left;
	/* 文字を左寄せ */
	display: inline;
	/* インライン要素として表示 */
	width: auto;
	/* 幅を自動に */
	box-sizing: border-box;
	/* ボックスサイズの計算方法を変更 */
	margin-right: 10px;
	margin-bottom: 14px;

}

.txtt2 button {
	/* ここにスタイルを追加 */
	background-color: #e00000;
	/* 背景色を透明に */
	color: #fff;
	/* 文字色を継承 */
	border: none;
	/* 枠線なし */
	padding: 2px 5px;
	/* 内側の余白なし */
	text-align: left;
	/* 文字を左寄せ */
	display: inline;
	/* インライン要素として表示 */
	width: auto;
	/* 幅を自動に */
	box-sizing: border-box;
	/* ボックスサイズの計算方法を変更 */
	margin-right: 10px;
	margin-bottom: 5px;

}

.txtt3 button {
	/* ここにスタイルを追加 */
	background-color: #3359ff;
	/* 背景色を透明に */
	color: #fff;
	/* 文字色を継承 */
	border: none;
	/* 枠線なし */
	padding: 2px 5px;
	/* 内側の余白なし */
	text-align: left;
	/* 文字を左寄せ */
	display: inline;
	/* インライン要素として表示 */
	width: auto;
	/* 幅を自動に */
	box-sizing: border-box;
	/* ボックスサイズの計算方法を変更 */
	margin-right: 10px;
	margin-bottom: 5px;

}



@media only screen and (max-width: 360px) {}

@media only screen and (min-width:768px) {

	#casestsection {
		margin: 0 auto 0 auto;
		width: 100%;
		padding-bottom: 0px;
		background: linear-gradient(90deg, white 0%, white 10%, #F5F5F5 10%, #F5F5F5 40%, white 40%, white 100%);
		/* ★ */
		border-Top: 2px solid #BDC3C7;
		/* Silver */
		border-Top: 2px solid #DDD;
	}

	#casestsec {
		margin: 120px auto 0 auto;
		width: 100%;
		padding-bottom: 50px;
		position: relative;
	}

	#casestsec #casestsecsym01 {
		display: block;
		position: absolute;
		top: 0px;
		right: 50px;
		z-index: 9;
	}

	#casestsection #casestsectitle01 {
		margin: 70px auto 0 17%;
		width: 80%;
		padding-bottom: 0px;
	}

	#casestsection #casestsectitle01 h1 {
		font-size: 34px;
		font-family: "NotoSansCJKjp-Bold";
		color: #444;
		padding-left: 5.5%;
		padding-bottom: 30px;
	}

	#casestsection #casestsectitle01 p {
		width: 100%;
		font-size: 16px;
		color: #555;
		line-height: 30px;
		padding-bottom: 20px;
		padding-left: 80px;
	}

	#casestsec #casest {
		margin: 30px auto 0 15%;
		width: 70%;
		padding-top: 30px;
		padding-bottom: 30px;
		background-color: rgba(255, 255, 255, 0.90);
		/*  White  透過95% */
		position: relative;
	}

	#casestsec #casest01 {
		margin: 30px auto 0 15%;
		width: 70%;
		padding-top: 30px;
		padding-bottom: 30px;
		background-color: rgba(255, 255, 255, 0.90);
		/*  White  透過95% */
		border: solid 1px #DDD;
	}

	#casestsec #casest:after {
		/* ■入れ子を使って2重線 */
		content: "";
		border: solid 1px #DDD;
		position: absolute;
		top: 5px;
		left: 5px;
		width: calc(100% - 10px);
		height: calc(100% - 10px);
	}

	#casestsec #casest p.category01 {
		/* NEWS & RELEASE カテゴリー */
		margin: 20px auto 30px 10%;
		width: 20%;
		font-size: 16px;
		text-align: center;
		font-weight: normal;
		font-family: "NotoSansCJKjp-Medium";
		color: #FFF;
		padding: 12px;
		background-color: #A4966A;
		/* Gold01 */
		background-color: #333;
	}

	#casestsec #casest h2 {
		display: block;
		margin: 30px auto 30px auto;
		width: 80%;
		font-size: 20px;
		font-weight: normal;
		font-family: "NotoSansCJKjp-Medium";
		color: #444;
		line-height: 30px;
		padding-left: 30px;
		padding-bottom: 10px;
		border-left: 7px solid #BF0122;
		/* mmts-red02 */
		border-bottom: 1px solid #BDC3C7;
		/* Siver */
	}

	#casestsec #casest dl.casestitem {
		margin: 0 auto 0 auto;
		width: 85%;
		padding-bottom: 0px;
	}

	#casestsec #casest dl.casestitem dt {
		margin: 0 auto 0 auto;
		width: 90%;
		font-size: 17px;
		padding: 15px;
		padding-top: 20px;
		padding-left: 25px;
		line-height: 27px;
		color: #444;
		background: url("../images/icon/arrow01.png") no-repeat;
		background-size: 14px 13px;
		background-position: left 0 top 28px;
	}

	#casestsec #casest dl.casestitem dd {
		margin: 0 auto 0 auto;
		width: 90%;
		font-size: 15px;
		line-height: 23px;
		padding-top: 0px;
		padding-left: 50px;
		padding-right: 50px;
		padding-bottom: 10px;
	}

	#casestsec #casest dl.casestitem dd.ext {
		color: #A4966A;
		/* Gold01 */
		padding-bottom: 20px;
	}

	#casestsec #casest01 p.category01 {
		/* NEWS & RELEASE カテゴリー */
		margin: 20px auto 30px 10%;
		width: 20%;
		font-size: 16px;
		text-align: center;
		font-weight: normal;
		font-family: "NotoSansCJKjp-Medium";
		color: #FFF;
		padding: 12px;
		background-color: #A4966A;
		/* Gold01 */
		background-color: #333;
		/* Gold01 */
	}

	#casestsec #casest01 h2 {
		display: block;
		margin: 30px auto 30px auto;
		width: 80%;
		font-size: 20px;
		font-weight: normal;
		font-family: "NotoSansCJKjp-Medium";
		color: #444;
		line-height: 30px;
		padding-left: 30px;
		padding-bottom: 10px;
		border-left: 7px solid #BF0122;
		/* mmts-red02 */
		border-bottom: 1px solid #BDC3C7;
		/* Siver */
	}

	#casestsec #casest01 dl.casestitem {
		margin: 0 auto 0 auto;
		width: 85%;
		padding-bottom: 0px;
	}

	#casestsec #casest01 dl.casestitem dt {
		margin: 0 auto 0 auto;
		width: 90%;
		font-size: 17px;
		padding: 15px;
		padding-top: 20px;
		padding-left: 25px;
		line-height: 27px;
		color: #444;
		background: url("../images/icon/arrow01.png") no-repeat;
		background-size: 14px 13px;
		background-position: left 0 top 28px;
	}

	#casestsec #casest01 dl.casestitem dd {
		margin: 0 auto 0 auto;
		width: 90%;
		font-size: 15px;
		line-height: 23px;
		padding-top: 0px;
		padding-left: 50px;
		padding-right: 50px;
		padding-bottom: 10px;
	}

	#casestsec #casest01 dl.casestitem dd.ext {
		color: #A4966A;
		/* Gold01 */
		padding-bottom: 20px;
	}

	#casestsec #casest02 {
		margin: 30px auto 0 auto;
		width: 70%;
		padding-top: 30px;
		padding-bottom: 30px;
		background-color: rgba(255, 255, 255, 0.90);
		/*  White  透過95% */
		border: solid 1px #DDD;
	}

	#casestsec #casest02 .bfat {
		margin: 0 auto 20px auto;
		width: 80%;
		font-size: 16px;
		text-align: center;
		font-weight: normal;
		color: #FFF;
		font-family: "NotoSansCJKjp-Medium";
		padding: 8px;
		padding-bottom: 10px;
		background-color: #519D9E;
		/* WA-green */
		background-color: #2E6193;
		/* sec-blue01 */
	}

	#casestsec #casest02 ul {
		margin: 0 auto 0 auto;
		width: 890px;
		padding-left: 30px;
		padding-bottom: 10px;
	}

	#casestsec #casest02 li {
		float: left;
		width: 400px;
		margin-right: 30px;
		padding-bottom: 30px;
	}

	#casestsec #casest02 li img {
		display: block;
		margin: 0 auto 10px auto;
		width: 100%;
	}

	#casestsec #casest02 li .cmnt01 {
		text-align: center;
		font-size: 14px;
		font-weight: normal;
		font-family: "NotoSansCJKjp-Regular";
		padding-top: 15px;
		padding-left: 0;
	}

	#casestsec .listbk {
		/* 一覧に戻る */
		display: block;
		margin: 0px auto 0 19%;
		width: 200px;
		height: 45px;
	}
}

/* Tablet Layout ◇ */
@media only screen and (min-width: 768px) and (max-width: 992px) {

	#casestsection {
		margin: 0 auto 0 auto;
		width: 100%;
		padding-bottom: 0px;
		background: linear-gradient(90deg, white 0%, white 5%, #F5F5F5 5%, #F5F5F5 40%, white 40%, white 100%);
		/* ★ */
	}

	#casestsec {
		margin: 50px auto 0 auto;
		width: 100%;
		padding-bottom: 50px;
		position: relative;
	}

	#casestsection #casestsectitle01 {
		margin: 70px auto 0 17%;
		width: 80%;
		padding-bottom: 0px;
	}

	#casestsection #casestsectitle01 h1 {
		font-size: 18px;
		font-weight: bold;
		font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3",
			"Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		color: #519D9E;
		/* WA-green */
		padding-left: 0;
		padding-bottom: 0px;
	}

	#casestsec #casest01 {
		margin: 30px auto 0 auto;
		width: 80%;
		padding-top: 20px;
		padding-bottom: 20px;
		background-color: rgba(255, 255, 255, 0.90);
		/*  White  透過95% */
	}

	#casestsec #casest01 p.category01 {
		/* NEWS & RELEASE カテゴリー */
		margin: 20px auto 30px 5%;
		width: 30%;
	}

	#casestsec #casest01 h2 {
		margin: 15px auto 15px auto;
		width: 90%;
		font-size: 17px;
		font-weight: bold;
		padding-left: 20px;
		padding-bottom: 5px;
	}

	#casestsec #casest01 dl.casestitem {
		margin: 0 auto 0 auto;
		width: 95%;
	}

	#casestsec #casest01 dl.casestitem dt {
		margin: 0 auto 0 auto;
		width: 90%;
		font-size: 15px;
		padding: 12px;
		padding-top: 0px;
		padding-left: 20px;
		line-height: 27px;
		color: #444;
		background: url("../images/icon/arrow01.png") no-repeat;
		background-size: 13px 13px;
		background-position: left 0 top 6px;
	}

	#casestsec #casest01 dl.casestitem dd {
		margin: 0 auto 0 7.5%;
		width: 95%;
		font-size: 13px;
		line-height: 1.7em;
		padding-top: 0px;
		padding-left: 0px;
		padding-bottom: 10px;
	}

	#casestsec #casest02 {
		margin: 30px auto 0 auto;
		width: 100%;
		padding-bottom: 30px;
	}

	#casestsec #casest02 ul {
		margin: 0 auto 0 auto;
		width: 100%;
		padding-left: 10%;
		padding-bottom: 10px;
	}

	#casestsec #casest02 li {
		float: left;
		width: 43.5%;
		margin-right: 20px;
		padding-bottom: 20px;
	}

	#casestsec .listbk {
		/* 一覧に戻る */
		display: block;
		position: absolute;
		bottom: 30px;
		left: 0;
		right: 0;
		margin: auto;
		width: 200px;
		height: 45px;
	}
}

@media screen and (max-width:768px) {

	#cta02 {
		margin: -35px auto 35px auto;
		width: 100%;
		padding-bottom: 0px;
		background-color: #FFF;
	}
}

/* ログインコンテナのスタイリング */

/* エラーメッセージ */
.error-message {
	font-size: 1.2em;
	/* フォントサイズを大きくする */
	color: red;
	/* 赤色にする */
	text-align: center;
}

.login {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: calc(40vh - 40px);
	/* ブラウザウィンドウの高さからフッターの高さを引いた値 */
}

.login form {
	text-align: center;
}

/* ログインフォームのテキスト */
.login label,
.login button {
	font-size: 1.2em;
	/* フォントサイズを大きくする */
}

/* ログインボタン */
.login button {
	background-color: #4CAF50;
	/* ボタンの背景色を緑色にする */
	color: white;
	/* ボタンのテキスト色を白色にする */
	border: none;
	/* ボーダーを削除する */
	padding: 5px 13px;
	/* パディングを追加する */
	text-align: center;
	/* テキストを中央揃えにする */
	text-decoration: none;
	/* テキストの下線を削除する */
	display: inline-block;
	/* インラインブロック要素にする */
	font-size: 1.2em;
	/* フォントサイズを大きくする */
	margin-top: 10px;
	/* 上部のマージンを追加する */
	margin-left: 20px;
}

/* ボタンホバー時のスタイル */
.login button:hover {
	background-color: #45a049;
	/* ボタンの背景色をダークグリーンにする */
}